Design for the Web
Upcoming SlideShare
Loading in...5
×
 

Design for the Web

on

  • 921 views

How to transfer your design expertise to amazing websites.

How to transfer your design expertise to amazing websites.

Statistics

Views

Total Views
921
Views on SlideShare
920
Embed Views
1

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design for the Web Design for the Web Presentation Transcript

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