Welcome Portfolio Thinking Contact

Welcome

About me

Hello. My name's Andrew Knight. Welcome to my online portfolio and window on the world of user interface design and development. I'll be updating it often, especially the 'Fresh Thinking' section, because innovation is a daily event!

All my work is hand-coded using mixtures of the following:
HTML4 and 5, XHTML, CSS3, XML, Javascript, jQuery, jQuery Mobile, Adobe Creative Suite, Flash with Actionscript, Microsoft Visual Studio and experience working in an ASP .Net environment.

Delivering great User Experience

My portfolio offers a cross-section of my creative and user interface work - from children's websites to SME's to enterprise level e-commerce applications. For the last 2 years my focus has been working as a UI consultant and developer in the automotive industry, as is reflected in the first few entries.

Thank you for viewing!

What makes a strong UI?

Never mind funky graphics and eye-popping animations. These have their place. But when the key purpose of your webpage is a user journey that allows the user to move as gracefully and quickly from one piece of information to the next with an end goal in mind, here below are the rules you shouldn't ignore...

  • Keep it obvious
    Help prevent user errors by making important information obvious. A UI should contribute to ease of learning and use, not create extra work.
  • Keep it consistent
    Use the same shapes, colours and symbols to signify the same meanings and functions throughout the UI. For example, all major action buttons should be glossy green with white text to distinguish them from buttons with lesser functions in the journey.
  • Simplicity is key
    So you can use Photoshop. That doesn't mean your design should shout about it. A good design requires balance between maximizing functionality and maintaining simplicity through progressive disclosure of information.
  • Put the USER in control
    The user, not the computer, should initiate and control all actions.
  • Be direct
    Users must see the visible cause-and-effect relationship between the actions they take and the objects on the screen. This allows users to feel that they are in charge of the computer's activities.
  • Allow for mistakes
    User actions should be reversible. A good interface facilitates exploration and learning through trial and error.
  • Give feedback
    Keep the user informed and provide immediate and appropriate feedback.
  • Make it aesthetic
    Provide an environment that is pleasant to work in and contributes to the user's understanding of the information presented.

© aknight 2011

Welcome Portfolio Thinking Contact

Portfolio

Touch thumbnails for info.

© aknight 2011

Welcome Portfolio Thinking Contact

Fresh Thinking

'Fresh Thinking' is my mini blog on current UI thinking and methodologies.

Rounded corners

Very insightful article here on why the human brain finds it easier to process UI's with rounded boxes. I like the idea that they focus the user in towards the box contents. I suppose our eyes 'snag' on sharp objects. http://www.uxmovement.com

Think Vitamin and CSS3

Think Vitamin is a one-stop shop for UI style tutorials. I used their lessons on CSS3 transitions to create the simple fading in hover effect for the navigation buttons of this site (0.6sec ease-in). Probably so subtle you don't consciously notice them. But then, that's the kind of styling that enhances without competing for the user's attention. http://www.thinkvitamin.com

Folding CSS Code

Thought provoking article on how we arrange our CSS. It's good to comment into clear sections and subsections so other developers can pick it up. Don't much like the capitalised version. Why shout? http://perishablepress.com/css-code-folding/

Use Fount for fonts!

Fount will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style.http://fount.artequalswork.com/

Colour scheme designer

I normally don't have a problem coming up with colour schemes, but this site could certainly help with inspiration! http://colorschemedesigner.com/

jQuery cheatsheet

Not really cheating, more an aid to memory... http://d2o0t5hpnwv4c1.cloudfront.net/154_cheatsheet/jquery12_colorcharge.png

jQuery Mobile = awesome

A quick word to say how much I'm enjoying using the jQuery Mobile UI at this site: http://www.jquerymobile.com. Simplicity itself.

© aknight 2011

Welcome Portfolio Thinking Contact

Contact

Get in touch!

Need a word? Please feel free to contact me by email at:

Or you can use my Twitter and Linkedin buttons at the foot of the page!

Hope to hear from you soon!

© aknight 2011

Description

British Car Auctions

British Car Auctions is the UK and Europe's largest vehicle remarketing company serving multiple auction centres in 14 countries. In my current position, I play a key role in the smooth running and design progression of BCA's websites and online tools. UI focuses on promoting the multitude of daily sales to trade users and the facilitation of viewing, buying and selling vehicles in real time. It also plays an essential role for global marketing to promote high profile sales and events. The clear segmentation of BCA products and services, plus a look and feel that is uncomplicated, fresh and engaging, are key factors.

My role in the design and development of this site followed the project life-cycle from beginning to end. The process involved stakeholder consultation for layouts and interaction specifications, wireframing, full visuals, interactive prototyping, integration with the ecommerce platform, user acceptance testing and launch.

www.british-car-auctions.co.uk

2010 Website Award (pdf)

Description

BCA European websites

All BCA websites are designed as a .Net application that allows the users to configure layout and content as they chose. The image depicted here is a redesign currently in progress for the European country homepages. My aim in this task is to make the system more user friendly for first-time users and to better encourage use of the online tool set.

The progressive enhancement of these BCA sites is ongoing. This design is currently at the prototype stage, utilising jQuery for tabbing, image/text gallery display and for calling JSON data into the 'vehicle count' for each sale type (physical, online, buy now, etc.). As with the UK site above, my involvement in the project runs the complete life-cycle in UI terms.

Description

BCA Vendor Brands - BMW

The BCA e-commerce platform is continuously being rebranded for European vendor sites. There are currently 23 vendor-branded websites that I have personal responsibility for. New brands are being added at a rate of 1 per month. It is necessary to liaise closely with the vendor's brand guardians to ensure that all criteria are met.

Please see below for a detailed description of the Vendor Brand process.

http://de-bmw.bca-partner.com

Description

Toyota Financial Services

Toyota branding. This site requires secure login. More visuals are available on request. I'm very pleased with the flash effect I designed for this page to mirror the Toyota advertising campaign of revealing one car under another.

My role in ensuring the successful launch of each vendor brand is as follows: I take specifications on branding and fuctionality requirements from a business analyst. This spec is then translated into jpeg visuals illustrating the key masterpages (e.g. login, homepage, default, vehicle search, view lot page). Iterations may be necessary, but my first versions have usually been accepted. The jpegs are then sliced to create suites of generic and specific graphics. As I have developed a white label brand that can be modified to mirror the agreed design, the graphics can then be added directly to the platform on a local environment (ASP.Net and C#) without the need for individual prototyping. Once the masterpages and layout templates have been created and tested in all browsers, the brand is then 'built' to the test environment for the test team to add real data. Modifications are made as prescribed using Team Foundation Server (TFS). Once okayed, the brand moves to User Acceptance Testing (UAT) for selected live users to try out. UAT takes 2-4 weeks. The brand is then launched as a live site.

https://dk-toyota.bca-partner.com
(Flash element requires Flash Player)

Description

Renault - RIA using Flash and XML

Renault branding required the use of a Flash webpart (the hover panel in the middle of the page) which used XML to update news feeds from the Immediacy CMS. This site requires secure login. More visuals are available on request.

Description

BCA Image viewer

The BCA e-commerce platform includes a number of powerful tools from filtering vehicle search to image gallery viewers. The example give here was an image viewer created by myself using Flash with AS3. The application will display any number of thumbnails, which the user can scroll through vertically.

Description

Intech Science Centre

Based in Winchester, this interactive science experience boasts the largest digital planetarium in the UK. Rebuilt and redesigned to coincide with the busy holiday season, the brief for this website was to be colourful and engaging to compete with other family attractions. I suggested bright colour-coding for the individual sections as an aid to navigation. The design is templated around a CMS system to allow the centre to update their content.

www.intech-uk.com

Description

Ludlow Infant School

Primary school sites offer an opportunity to be as creative as you can. In Ludlow's case, the school's existing theme of jigsaws and elephants gave this project scope for engaging Flash animation - a jigsaw puzzle with a choice of four pictures, and several interactive elephant animations set to display randomly on the homepage using javascript.

http://ludlowinfants.virtualschools.net

Description

Louise Goodman Media

Louise Goodman is an award-winning TV presenter and journalist with over 20 years of media and motor racing experience. Dubbed 'the first woman of Formula One' Louise made her name as part ITV's Grand Prix presentation team and is currently co-presenting ITVs live coverage of the British Touring Car Championship but her skills extend way beyond reporting from the pit-lane.

www.goodmanmedia.co.uk

Description

Style is...

The original brief for this project was 'keep it clear, stylish and pink'. This site design evolved from the stationery I created for this startup business. The website's logo was a representation of one of the business cards. Flash actionscript was used to generate the floating coathangers. I have since redesigned this site according to the owner's new brief as can be seen at the address below.

http://www.styleis.co.uk

Description

Oxfordshire EBP

A more corporate design that clearly conveys the OEBP's work to bring teachers and business together to create a forum for young people to experience industry and commerce.

http://oebp.virtualschools.net

Description

Intelligent EcoEnergy

This design clearly sets out the 4 main selling points the company offers. Sometimes websites benefit from clarity of information over the 'wow-factor'. If the message is strong, the site design should be a straightforward vehicle for that.

Intelligent EcoEnergy

Description

Cape Cornwall School

Cape Cornwall School in St. Just is a colourful, forward thinking place with a penchant for surfing and, for some unexplained reason, small robots. The website I designed and built for them reflects these passions to dynamic, off-the-wall effect. Once you have passed the animated mission statement on the splash page, there is the option on their welcome page to play 'Robo Surfer' - a Flash arcade game I created in an attempt to fuse their two somewhat disparate theme requirements!

This website changed due to new management last year, but I thought it was worth including!

Description

Waterside School

This school site was to reflect the school's proximity to the sea, specifically with a signpost as navigation. The ship moving across the horizon is achieved by floating Flash animation over the HTML. If you watch for long enough, you'll see the vessel realistically disappears behind the signpost. This was done with a mask in Flash shaped like the signpost. I also created a fun 'Virtual Tour' that appears in a pop-up window.

http://waterside.virtualschools.net

Description

Flash Virtual School Tours

As part of the 'Virtual Schools' package, the Virtual Tour is an animated map geared to displaying a brief overview of key areas in the school. After viewing a few simpler versions on other people's sites, I envisioned creating a more 3D experience. When a destination is selected, the point of view should zoom into it, then offering thumnail images of the location. This is achieved by building a 3D model from vectorised plans of the school. The initial artwork is finalised in Illustrator. It is then imported into Flash to achieve the animation process.

View an interactive tour (requires Flash Player)

Description

A Fishy Christmas

Christmas in the UK may be a time for turkey and cranberry sauce, but in the polar regions it's about fish - and lots of it. This was a quick turnaround festive card sent to all associates and clients of Virtual Schools. I particularly enjoy synchronising action with music in Flash and animating small characters that blink and react in recognisable ways.

Click here to view the finished piece (with sound - requires Flash Player).

Description

Logos

Whether they are for print or web, I always attempt to create logos that are more than just a name in a fancy font. Different ways to add dimension include a subtle reflection effect underneath, or the idea of movement - both of which are features in the Martcom logo, for example.