The Complete Step-by-Step Guide to Designing Websites

---- THE COMPLETE STEP-BY-STEP GUIDE TO DESIGNING WEBSITES III I I KNOW WHAT YOU'RE DOING When you design a site, always be clear on your goal. Focus on the state you wish to reach. • Do you want to impress other web designers? • Do you want to delight your client? • Do you want to make a good profit and pay your rent on time? KNOW WHAT THE SITE NEEDS TO DO You may have a client who tells you what they want. Get really clear about what the goals of a site are. What does success look like? How will you know when you've got there? Having this stuff clear helps you. • Make the thousands of design decisions between now and a finished product. • Communicate with your client and maintain their confidence throughout. • Show that you've done what you set out to do. KNOW WHAT THE SITE'S VISITORS WANT Ideally, you'd like to show your designs to all your site's target users, and find out what works well for them. As this is not practically possible, you need to develop personas and scenarios, based on simple goal-directed techniques. GET A GOOD PICTURE OF THE PERSONALITY AND STYLE OF THE WEB SITE User personas give you great insight into users' goals and behavior. But a web site may also have its own goals to develop the brand. To avoid conflict, you need to balance these forces optimally. The Site Persona represents both the Brand and the Goals of the web site, which you work into the mix through dialogue with User Personas. The users are trying to get what they want, and the Site Persona is trying to help them, while ensuring it does its own job. 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. Don't start with a site map, as this is too restrictive. Start with a paper and sketch that concentrates on the interaction between site and user. ...-... ...- ..- 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 places. ORGANIZE 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 following their noses to their goals. Your site map will effectively merge all the views from your initial free sketches into a structure that's clear and economical. SKETCH THE ESSENTIAL FEATURES FIRST Now we'll start designing the page, still working on paper at this point. Visualize what kind of layout and look will feel right, providing a nice clean interface that portrays the right personality. Then sketch that in a rough rectangle with a clear focus on the essential features: • 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. When you craft the page on the computer, be sure to balance the relative noticeability of all the visual elements on the page, so that visitors will be drawn to the things that are most important. ARRANGE THE VISUAL ELEMENTS TO WORK TOGETHER It's only now that ľ'd dive into Photoshop. I'm totally prepared, and ready to work quickly • Know what the site has to achieve to succeed • Know what my visitors are looking for, and what they're trying to achieve • Understand the site's personality and what it wants to achieve while the visitors are on there • Know what pages and sections are on my site • Have a good idea of the right page layout that will help visitors flow round the site easily, keeping them interested until they have done what they want • Know what visual elements will be on my page, and their relative priority. This prior work will help you quickly execute a design thatťs fit-for-purpose, without getting too bogged down trying lots of different page layouts in Photoshop CRESTMEDỊA INTERNET MARKETING www.crestmediamarketing.com Disclaimer: All data & images are based on the best we could find at the time. We expressly disclaim any liability for any omissions of information or errors in fact.