A website designer, is a name often used for the requirement of design and build of a website, but in this instance I am talking about just the design aspect. Each element of the design process needs to account for the different device view ports, so when thinking about designing a website we now think about it across any device from mobile to tablet, laptop and desktop, offering the best experience for that device.
It is important to think of a website now as different experiences, colours and speeds depending on what, where and how a user is viewing this site.
Style boards
Perhaps contrary to belief, if you talk to most designers they will still say they start their design process away from the computer. Sketches, ideas, scrap books. Admittedly the web has made it easier to gather these thoughts digitally, using pinterest, taking snapshots with our phones, and sketching with touch screen apps. But the ideas process hasn't changed. A process I call the 3 i’s.
Immersion
Inspiration
In-situ
More about this can be read on an article I wrote about the learning the web design process on Medium.com
Visuals
This is where we do move onto the computer, to start mocking up ideas from the information gathered across the workshops, experience design process and above. Looking at the structure of the website, the best place and style for the menu and branding across devices, footer and call to actions. Then looking at the features and functionality, often designing these as stand alone elements so they receive the right detail and hierarchy in a page. For these I create a library of ‘patterns’ - this is each element, colour palette, font well, graphics and icons, so that I know they are identical across each page These pattern element can also be useful for front end coders or developers to program and when presenting as complex pages of designs can become difficult to focus on each element at sign off.
The homepage is a usually the best for initial presentation as it encompasses a lot of different elements all on one page alongside an inner page used a little like a style guide, ie; showcasing further elements and as many text and interaction styles as possible. This allows clients to experience in more depth how we are interpreting the brand.
Templates
Once the initial concept visuals have been presented, fed back and agreed, then templates for each different page type are created. Ideally these are based on wireframes that have been researched, planned and drawn up. However if it is a small website or there aren’t wireframes it is the job of the designer to not only visually design the interface but make sure the user’s journey features the correct hints and functionality to guide, engage and fulfill the goals of the project.
See more about wireframes here Experience Design
Prototypes
A prototype takes many forms as well and may be an interactive version of the wireframes or the final designs. A prototype allows a test user or client to carry out certain actions but does not have the full functionality of the website behind it. I show a design prototype for feedback using Invision this allows my clients to click through the pages seeing them in browser at the different device sizes.
Style guides
Continuity across your web pages is imperative and ‘style guides’ document each text and graphic style, font and colour available to used helping guide admins updating the website to use the correct typeface or image to encourage interaction from users reading the pages and keep brand consistency as the website grows.
--
I am a freelance Website Designer, Logo Designer and Graphic Designer based in Suffolk.
Contact me for more information.