Design for the Web


Published on

How to transfer your design expertise to amazing websites.

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

  • Be the first to like this

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

No notes for slide

Design for the Web

  1. 1.
  2. 2. Who I Am<br />I am a marketer and a project manager<br />I am a geek whisperer <br />I am NOT a designer<br />
  3. 3. Today’s Presentation<br />The challenges and possibilities brought by current web technologies<br />Ways to better communicate your design to developers <br />Designers create elegant solutions to problems<br />Please keep pushing the envelope <br />
  4. 4. The Basics<br />All about the pixels<br />Always work in 72 dpi<br />Design sites to 984px wide or less<br />
  5. 5.<br />
  6. 6.<br />
  7. 7. The Basics (cont.)<br />Main text no smaller than 12 px<br />Websafe fonts<br />Colors – sRGB<br />Actually built with hex colors<br />Every monitor different<br />Flash<br />Terrible for SEO<br />Entire site is “one page”<br />Alternatives: Javascript or HTML5<br />Flash perfect for header or contained interactive element<br />
  8. 8. The Basics (cont.)<br />Not all browsers are created equal<br />Reviewing your designs pre-development<br />Do not print <br />Colors are based in light, not pigment<br />Contrast is ruined <br />Size issues like balance and legibility become impossible to evaluate <br />Export review documents as JPGs: <br />Exact size<br />Medium quality <br />Post for review in a browser window (Basecamp)<br />
  9. 9. Steps of the Web Design Process<br />Proposal<br />Branding<br />Purchase Domain<br />Set Business Goals<br />Site Map<br />
  10. 10. Site Map<br />
  11. 11. Site Map<br />
  12. 12. Steps of the Web Design Process<br />Proposal<br />Branding<br />Purchase Domain<br />Set Business Goals<br />Site Map<br />Creation of Content<br />Design<br />
  13. 13. Design<br />Start w/home and 1 or 2 interior pages<br />Show your developer<br />Typically just design each “type” of page<br />Deliver as layered Photoshop documents (Illustrator files nice suppliments)<br />Be nice to your developers<br />
  14. 14. HTML Templates<br />Integrate CMS<br />Create Each Page<br />Input Content<br />Shopping Cart<br />SEO<br />Final Testing<br />Final Client Review<br />Launch<br />Steps of the Web Design Process<br />Proposal<br />Branding<br />Purchase Domain<br />Set Business Goals<br />Site Map<br />Creation of Content<br />Design<br />
  15. 15.  How Print and Web Differ<br />Nothing is Exact<br />Brower size<br />screen resolution,<br />Colors<br />Bottomless Pages<br />Font size<br />Content<br />
  16. 16.  Print vs Web: Adaptable Designs<br />Good websites = consistently fresh content<br />Design not just for content you have, but for the content of the future<br />Think through variations (April 1 vs. November 29-December 2)<br />show the variation in your design - If you don’t, the developer will just make it up. <br />
  17. 17. Adaptable Designs<br />
  18. 18. Adaptable Designs<br />
  19. 19.  Print vs Web: Adaptable Designs<br />Don’t count on kerning to get something in a certain width, especially stacked text<br />
  20. 20. Adaptable Designs<br />
  21. 21. Adaptable Designs<br />
  22. 22. Adaptable Designs<br />
  23. 23. Print vs Web: The Bottomless Page<br />The web expands downward<br />Be aware of side columns<br />Background images/gradients<br />
  24. 24. Print vs Web: Many Small Chunks<br />Short attention spans, limited real estate<br />Give information quickly and/or entice to interact<br />
  25. 25. Print vs Web: User Interface<br />Encourage interaction - doing makes a stronger emotional impact than seeing<br />Interaction: active-states, rollovers<br />Use of color to indicate links<br />Some content consistent between pages<br />What is the path?<br />User should never have to use browser back button<br />Easy Access<br />
  26. 26. Print vs Web: Navigation<br />Not a table of contents – way-finding Signs<br />
  27. 27. Print vs Web: Real Estate<br />“The Fold” – about 500px high<br />Top of the page can’t be wasted <br />Intensifies Hierarchy<br />More important the info, the higher on the page<br />
  28. 28. Print vs Web: Everything in a Box<br />Every image and chunk of text is contained in a rectangle<br />Can overlap, but cannot change shape<br />
  29. 29. Everything in a Box<br />
  30. 30. Everything in a Box<br />
  31. 31. Everything in a Box<br />
  32. 32.  Go to Photoshop<br />
  33. 33. Content Management Systems (CMS)<br />is a software system which provides website authoring and administration tools designed to allow users with little knowledge of Web programming to create and manage the site's content with relative ease.<br />
  34. 34. CMS: Advantages<br />Make it easy for someone with limited coding skills to keep website updated, reduces cost overall<br />Encourages sites to have active content (best sites, return visits)<br />Easy to manage evolving content<br />News<br />Events<br />Blogs<br />
  35. 35. CMS: Advantages <br />Easily manage content that appears on multiple pages<br />
  36. 36.
  37. 37. CMS: Advantages <br />Easily manage content that appears on multiple pages<br />Decreases human error<br />Increases efficiency<br />Increases consistency of layout<br />Automates things like ordering new items<br />Most often by date or alpha/numeric<br />Database driven content allows for management, organization, archive and search of complex sets of data <br />Review Sites<br />News sites<br />Shopping sites<br />Makes mobile sites affordable & maintainable<br />Helps with SEO (should)<br />
  38. 38. Types of CMS<br />Single text area on a page<br />List driven<br />Blogs<br />eCommerce<br />Custom Databases<br />
  39. 39. Choosing a CMS<br />Open Source<br />E.g. Joomla, Drupal, Wordpress<br />Always evolving<br />Community maintained forums<br />Have pre-fab templates to start from<br />Can have limits on customization<br />Proprietary CMS<br />E.g. SharePoint, FileMaker Pro, Webany<br />Someone you can call<br />Depending on system and developer (and budget), it can be completely customized<br />Balancing Feature Set with Complexity <br />Often start free/cheap, more features with upgrades<br />
  40. 40. CMS: Disadvantages <br />Most need a developer to set up<br />Must work in templates<br />Even more important to think through variations and exceptions before build starts<br />Almost every text space must be expandable (downward)<br />
  41. 41. Search Engine Optimization: 3 Parts<br />Research<br />Technology<br />Keywords Implementation<br />
  42. 42. SEO: Research<br />Like any process, prep is key<br />Sweet Spot: high search + low competition<br />Clients often think they know what they want to come up for, but they usually don’t:<br />Think they want to optimize for their company name<br />Think they want to be #1 for “Cheesecake”<br />Think they want to be #1 for “Frisbee Cheesecake”<br />For some high-competition industries, SEO for natural search may not be affordable for all clients <br />Pay-Per-Click should be considered as an alternative. (Research for PPC is the same as SEO)<br />
  43. 43. SEO: Research<br />
  44. 44. SEO: Research<br />
  45. 45. SEO: Technology<br />Dozens of ways to build a site to optimize (or screw it up)<br />Page titles<br />Meta descriptions<br />Page URL aliases<br />Directory structure<br />File size<br />Using header tags<br />Configuring Robot.txt files<br />Setting up ISS correctly<br />Submitting it to webmaster accounts<br />Alt tags<br />On and on<br />Work with a developer who knows what they are doing, and use a CMS that makes SEO a priority.<br />
  46. 46. SEO: Use of Keywords<br />Don’t bury keywords in images or Flash<br />Consider consequences of non-Web-safe fonts as headers<br />Work keywords into text high up the page<br />Bold, italics and bullet points help keyword prominence<br />Every page should have some text on it<br />Use alt text on images<br />Make sure page titles match content<br />Say things in different ways<br />Set up links from outside pointing in – use keywords (not Web address) as links whenever possible<br />More pages are better, build authority <br />
  47. 47. Take a Picture of This Screen with Your Phone!<br />For a PDF copy of this presentation email:<br /><br />Online Resources Mentioned in Presentation:<br /><br /><br /><br /><br /><br />