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

Design for the Web

on

  • 935 views

How to transfer your design expertise to amazing websites.

How to transfer your design expertise to amazing websites.

Statistics

Views

Total Views
935
Views on SlideShare
934
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