Your SlideShare is downloading. ×
0
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Design for the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design for the Web

734

Published on

How to transfer your design expertise to amazing websites.

How to transfer your design expertise to amazing websites.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
734
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
  • 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. 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. The Basics<br />All about the pixels<br />Always work in 72 dpi<br />Design sites to 984px wide or less<br />
  • 5. BrowserSize.GoogleLabs.com<br />
  • 6. BrowserSize.GoogleLabs.com<br />
  • 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. 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. Steps of the Web Design Process<br />Proposal<br />Branding<br />Purchase Domain<br />Set Business Goals<br />Site Map<br />
  • 10. Site Map<br />
  • 11. Site Map<br />
  • 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. 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. 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.  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.  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. Adaptable Designs<br />
  • 18. Adaptable Designs<br />
  • 19.  Print vs Web: Adaptable Designs<br />Don’t count on kerning to get something in a certain width, especially stacked text<br />
  • 20. Adaptable Designs<br />
  • 21. Adaptable Designs<br />
  • 22. Adaptable Designs<br />
  • 23. Print vs Web: The Bottomless Page<br />The web expands downward<br />Be aware of side columns<br />Background images/gradients<br />
  • 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. 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. Print vs Web: Navigation<br />Not a table of contents – way-finding Signs<br />
  • 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. 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. Everything in a Box<br />
  • 30. Everything in a Box<br />
  • 31. Everything in a Box<br />
  • 32.  Go to Photoshop<br />
  • 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. 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. CMS: Advantages <br />Easily manage content that appears on multiple pages<br />
  • 36.
  • 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. Types of CMS<br />Single text area on a page<br />List driven<br />Blogs<br />eCommerce<br />Custom Databases<br />
  • 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. 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. Search Engine Optimization: 3 Parts<br />Research<br />Technology<br />Keywords Implementation<br />
  • 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. SEO: Research<br />
  • 44. SEO: Research<br />
  • 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. 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. Take a Picture of This Screen with Your Phone!<br />For a PDF copy of this presentation email:<br />katie@astekweb.com<br />Online Resources Mentioned in Presentation:<br />BrowserSize.GoogleLabs.com<br />BasecampHQ.com<br />AstekBlog.com<br />W3Schools.com<br />Webany.net<br />

×