Web Design Process - Tips & Guidelines


Published on

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design Process - Tips & Guidelines

  1. 1. “A lot of times people don’t know what they want until you show it to them.” –Steve Jobs
  2. 2. A lot more goes into aweb site than just code.You’ve got big ideas and yourprocess book will help youdocument your creative process.
  3. 3. A process book can be used to present ideas to your client or boss. Think of it as a way for you to sell your work to them.
  4. 4. Your presentation should impress the client. They should be impressed enough that they want to continue working with you
  5. 5. You are a graphic designer.Your presentation shouldn’t looklike it was designed in word orpowerpoint. It should bedesigned to impress the client.
  6. 6. Your cover pageshould excite us.Be sure it includes theproject name, your name,the course name, yourinstructors name, and thesemester you are takingthe course.
  7. 7. An introduction will help us understand what we’re about to view. This may be a creative brief summary or your project description.
  8. 8. Presentation is everything.Communicating your ideas visually and in writing could very well help land you your next creative gig.
  9. 9. Get us inspired.It’s great to share your creativeinspiration. But dont just show me abunch of pictures though. Help usunderstand why youre showing usall the inspiration youre including inyour presentation.
  10. 10. Get inspired awayfrom the computer.Before you design a website get creative away fromthe computer. Workingonly behind a computerwill crush your creativity.Find inspiration elsewhereevery chance you get.
  11. 11. A site map can helpyou get organized.It can help your client orboss see what is needed tocomplete the project.
  12. 12. A sitemap is one of the key 1st steps to creating a web site.It’s an outline that can help you plan how many pages might be created and allows you to think of the content and navigation necessary.
  13. 13. Mindmapping can helpyou brainstorm ideas.Jot down ideas to help you brainstorm.
  14. 14. Mindmapping can helpyou think through ideas.They can be useful,especially when you’re stuckor your mind is overflowingwith ideas. Mindmappingtools can be a usefulalternative to drawing them.
  15. 15. Type studies allow you to test drive your typographic ideas.Before you move full speed working on your web site design begin by thinking about the typography you might use.
  16. 16. Show a minimum of two type studies.Be sure to indicate heading, subheading, and body copy typefaces.
  17. 17. The web doesn’t giveyou an excuse toignore typography.You are designing for theweb so you will face typelimitations but that doesntgive you an excuse toignore good typographicprinciples. Web fontsshould usually be used forbody copy. For identity andheading fonts you may useimages or font replacementtechniques.http://www.busesatthebrewery.com/
  18. 18. Color studies help you explore color schemes. It helps to think through potential color combinations for your project early on.
  19. 19. Study how colors interact with other colors. Color can draw a user into a web site and interest them. It can also also heavily impact legibility.
  20. 20. Take time to getinspired by color.Don’t expect for colorschemes to justmiraculously pop up inyour head as you design.Reference great colordesign and refer toinspirational colorresources to help you comeup with potential colorschemes for your project.http://www.colorschemer.com/http://www.colourlovers.com/http://kuler.adobe.com/
  21. 21. Wireframes or rough drafts can help you plan out your ideas.Sharing rough ideas could save you hours of time that you might invest in photoshop on an idea the client might think is lame.
  22. 22. If your sketches are too rough yourclient will never understand your ideas. Write or type notes to help us understand your ideas.
  23. 23. Wireframes shouldn’t be too vague. Never assume that we’ll understand the ideas in your head. It doesn’tmatter how perfect they look, if they don’t communicate your ideas they are useless to the client.
  24. 24. Explore multiple ideas.Thinking through more than just your first idea could lead to a more creative solution for your project.
  25. 25. Sketch out ideas to share your plans. It may seem like busy work, but it’ll likely save you a lot of time thinking through layout ideas this way.
  26. 26. Wireframes should be rough but clear. The should communicate layout, content and interactivity plans for your project.
  27. 27. Sketch a home & sub page idea.Thinking through the page structure for more than onepage will help you anticipate changes between pages.
  28. 28. Wireframe tips •Don’t use lined paper •Don’t just draw boxes - explain what the box would be used for. •Be sure to identify all the important sections on your web page. •Don’t just write “text” or “image” - be clear in the type of content that might be used in the site. •Write or type notes to help the client understand your ideas. •Your client can’t understand chicken scratch so type notes if necessary and make sure your sketches aren’t too sloppy. •Wireframes aren’t finished concepts, they are initial ideas. •Scans or photos of wireframes should be a good quality.
  29. 29. Before you ever code a thing... You must first design your web page visually.
  30. 30. Comps are created to help share your ideas.They help the client understand what you want to do before you code.
  31. 31. Always present more than one idea. And present a home & sub page of each idea.
  32. 32. Comps should look just like a real web site. But they shouldn’t function yet.
  33. 33. Show the variation between pages.It can help the client get excited about a project and understand your ideas.
  34. 34. Page layouts don’t have to look identical. But they should have some consistency between pages.
  35. 35. Think about the web site’s interactivity.What will happen when the user interacts with things like navigation?
  36. 36. Design beyond the top fold.The top fold is what the user sees before they scroll.
  37. 37. It helps to see more than just the top fold. Put your heart into designing the page content.
  38. 38. It helps see the whole page, even the bottom. Give your footer a little TLC...if your user made it that far they deserve to get that much more excited by your design.
  39. 39. Present unique & different ideas.Don’t just change colors and type. Change the layout and concept.
  40. 40. Focus on showing what is important.You may zoom in or use a unique perspective to help the client get more excited about the ideas you’re presenting.
  41. 41. No if’s, and’s, or but’sabout it...use a grid.In web design a grid systemcan help you align elementsin your page and create astronger page flow andimprove hierarchy in a page.Two popular grid systemshttp://960.gs/http://cssgrid.net/
  42. 42. Using a grid system helps keep things aligned. Templates are available online to help you keep elements in your web page aligned properly.
  43. 43. Grids help keep your web site in order. A variety of grid systems are accessible to web designers.
  44. 44. After your site is built, test it.Share views of your web site tested from web browsers.
  45. 45. Test in multiple web browsers.Test it in as many web browsers as you can to ensure it looks consistent across multiple web browsers.
  46. 46. Test in browsers used on both Mac & PC.You won’t be able to control what browser or type of computer the viewer of your web site will be using.
  47. 47. Test all pages, not just one.You’ll want to make sure it’s fully functional on all browsers before a web site is launched publicly.
  48. 48. Identify any issues across browsers.Make notes if there are any bugs or problems identified that were not able to be corrected before your project’s completion.
  49. 49. Final Process book tips •The size should be 8.5” x 11” landscape. It’s intended to be viewed online •Create a cover page and guide the user through your presentation with notes, headings, and imagery. •You’ve got big ideas. Help the client understand what they are. They should be able to review this without you present. •Don’t try to cram all your ideas on one page. •Make sure images are an adequate quality. •If you put your heart into your process book at the start of your project you wont have to redesign it by the end of the semester. •Save as an optimized pdf so it may be shared online.