STEPS IN THE WEB DESIGN PROCESS A 5 minute presentation on the latest Ideas and methods

Know what you’re doing! Always be clear on your goal  Do you want to impress other web designers?  Do you want to delight your client?  Do you want to make a good profit and be rolling in it?

Know what the site needs to do! Try to get really clear about what the goals of a site are. 1. Communicate with your client and maintain their confidence throughout the process 2. Show that you’ve done what you set out to do

Know what the site’s visitors want!  Identify the target audience  The best-designed web sites are sensitive to the needs of the users.

Sketch out highly successful scenarios! Once you know what your site wants to achieve, and what your visitors want to achieve, it’s time to start planning out the site’s structure. A sketch will typically feature:  Stars showing how a user arrives at the site (entry points)  Circles showing actions, views or places (which may eventually become pages)  Arrows showing how users may move around the site  Speech bubbles representing what a user persona thinks at key place

Organise views into a site map! You will need to plan out what pages will be on your site, how they might be grouped, and how users will easily find their way around. Things to think about:  Links  Creating enough sections that it will be easy to focus  Avoid creating sections that won’t have enough content  Extra bits (Login, Contact us etc.)  Look for ways to use smart links and deep links that take users directly to what they’re most likely to want next.

Sketch the essential features & look!  Overall page structure and proportions  Level 1 navigation (your sections)  Other global navigation (like login/out, site map, help, footer navigation)  Main areas of screen real-estate  Any key graphical elements

Map your visitors’ attention! A key step in doing your page layout sketch is getting a good idea of where your visitors will want to look. Things that increase notice ability  Bigger things!  Strong colours  High contrast (either shapes, lines or edges with significantly different tones)  Movement (either actual animation or dynamic lines that give the impression of movement)  Things with plenty of space around them (they’re easier to identify and seem more important)  Things placed at high-value positions on the page (e.g. towards the top-left and down the middle — depends on your layout)

Arrange the visual elements to work together! Some things to help the creativity flow:  Work in short bursts. If you feel tired or unclear, stop and do something else.  Keep it simple. Try to find simple page layouts, navigation structures, and tonal/colour schemes. Don’t be afraid to adapt something that has worked before, if it’s suitable.  Invest energy where it is most beneficial. Use custom buttons, an icon or logo, if doing so will deliver impact. Know that each page doesn’t need too many rich visual features, if they are applied with care.

Website Mock up This is a website mock up I created just to display the general layout of a website. The mock up was created on the website