Class 01B

Topics

The Nature of Web Design
  • The Influence of Print Design on Web Design
  • Browsers
  • Alternative Browsing Environments
  • User preferences
  • Different Platforms (PC vs. Mac)
  • Connection Speed
  • Monitor Resolution
  • Monitor Color
  • Know your Audience
  • Types of Websites
Web Design Fundamentals
  • Web Design Process
  • Questions Before You Begin
  • Preparing Design Comps
  • Information Architecture
  • Site Maps

 


The Nature of Web Design

The Influence of Print Design on Web Design

Jason Santa Maria    Great Resource!

jasonsantamaria.com

Watch this information video from Jason Santa Maria on The Influence of Print Design


SVA Dot Dot Dot Lectures: Jason Santa Maria from MFA Interaction Design on Vimeo.

Browsers

The nature of web design is that there is no guarantee that everyone will see your page the way you do.

One of the biggest challenges in designing for the Web is dealing with the multitude of browsers in current use. Although the current version of Chrome and Firefox makes up the lion’s share (nearly 80%, as of this writing) there are at least a dozen browser versions that web developers pay attention to, and hundreds more obscure or antiquated browsers still in use.

Internet Explorer Firefox Chrome Safari Opera
14.7% 31.1% 46.9% 4.2% 2.1%

Resource: W3 School Browser Statistics http://www.w3schools.com/browsers/browsers_stats.asp

You can see from the above statistics, why it’s important that you do not get in the habit of testing websites exclusively on Safari. Safari’s share of the browser market is less than 5%!

How do you cope with the various browser versions and variations?

Alternative Browsing Environments

As a web designer, it will be important to understand how to design for these situations:

  • User with disabilities
  • The mobile Web
  • Dealing with diversity
Dealing with diversity

Here are some working solutions:

  1. Start with clean HTML
  2. Provide alternatives
  3. Allow text to resize
  4. Don’t put text in graphics
  5. Use accessibility features when creating HTML tables and forms
  6. Be careful with colors and backgrounds

User preferences

We need to remember as web designers that the user has the most control over the way in which the website is viewed. The user can do the following:

  • Change the font face and size.
  • Change the background and text colors.
  • Ignore style sheet or apply their own.
  • Turn images off.
  • Turn off Java and JavaScript.
  • Turn-off pop-up windows.

Different Platforms (PC vs. Mac)

As a web designer, we must understand the differences between the Mac and PC platforms:

  • Font availability and display
  • The rendering of form elements
  • Availability of plug-in media players

Connection Speed & Page Weight

Recommended page weight: total size (html/images/scripts) for a web page should be around 300-500K although we often visit web sites like Amazon and eBay where a page size is sometimes larger.

According to a poll taken in December 2011, 87% of people think websites page size should be 1MB or under.
http://css-tricks.com/poll-results-ideal-page-size/

Some typical download times under ideal conditions (which rarely happen):

Size of File 56Kbps Modem 256Kbps DSL (Broadband)
1500 Kbps Cable (Broadband)
50k 8.0 secs 1.6 secs < 1 sec
100k 16.0 secs 3.1 secs 1 sec
300k 48.0 secs 9.3 secs 3 sec
1MB 160.0 secs 31.3 secs 6 sec

Note: Pew Internet Project latest survey shows that 66% of Americans have broadband connections at home. The survey was completed on April 3, 2012.

Facts and Stats to keep in mind
  • 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • 51% of mobile internet users say that they’ve encountered a website that crashed, froze, or received an error.
  • 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
  • 47% of consumers expect a web page to load in 2 seconds or less.
  • 40% of people abandon a website that takes more than 3 seconds to load.
  • A 1 second delay in page response can result in a 7% reduction in conversions.
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

Resource: http://blog.kissmetrics.com/loading-time/

Monitor Resolution

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/monitor-resolution/

What does “above the fold” mean?


[Via: BaseKit – Your Website, Your Way!]
View Larger Image.

Newspaper editors know the importance of putting the most important information “above the fold,” that is, visible when the paper is folded and on the rack. This principle applies to web design as well. Web designers have adopted the term “above the fold” to refer to the first screenful of a web page. It’s what users will see without scrolling, and it bears the burden of holding their attention and enticing them to click in or scroll down further. Some elements you should consider placing above the fold include:

  • The name of the site and your logo(if you have one)
  • Your primary message
  • Some indication of what your site is about (e.g., shopping, directory, magazine, etc.)
  • Navigation to key parts of the site.
  • Crucial calls to action, such as “Register Now”
  • Any other important information, such as a toll-free number
  • An advertising banner (your advertisers may require it)

Monitor Color

Color will never look the same from monitor to monitor so as a web designer we must:

  • Let go of precise color control
  • Simulate alternative Gamma settings while you design
  • Use transparent images for smooth transitions to the background.

Know your Audience

Webdesigner Depot   Great Resource!

www.webdesignerdepot.com

Read this article from Webdesigner Depot on Designing for your target audience http://scrible.com/s/iGpgg

How would you design differently for these 3 unique scenarios?

  • Scenario 1: A site that sells educational toys
  • Scenario 2: A site with resources for professional graphic designers
  • Scenario 3: A site used to share company information for in-house use only (also know as a intranet).

Types of Websites

How are the website types different from one another?
What are the different goals for the website types?
Who are the different audiences for the website types?

Personal websites

Jason Santa Maria
Veerle Pieters

Commercial websites

R/GA
Blind Studio

Organizational/Non-Profit websites

PETA
Take Part

Educational websites

Treehouse
Code Academy

Entertainment websites

HBO
Adele

News websites

New York Times
Los Angeles Times

E-commerce websites

Zara
Sephora

Photo/Video Sharing websites

Vimeo
Flickr

Social Media websites

Google +
LinkedIn

Content Sharing websites

Pinterest
Springpad

Community Building websites

Behance
Dribbble

Mobile websites

BBC mobile website
Southwest Airlines

Responsive website

What is responsive web?: http://visual.ly/responsive-website-design-%E2%80%93-what-it

Responsive Design allows your website to respond to the device that it is being viewed on. This presents an optimal experience for all user regardless of whether they’re using a phone, tablet, computer or other device.

Smashing Magazine
Starbucks

Blogs

The Blogess
Swiss Miss

Web Critiques: Knowing your Target Audience

Who are the target audiences for each of these three websites?

 

Web Design Fundamentals

Web Design Fundamentals | by James Williamson

View this entire course and more in the lynda.com Online Training Library®.

Web Design Process

Please read the information  located at: http://www.everythingaboutweb.com/beginner/web-design-process/

There are many approaches, below is another Web Design Process:

  1. Conceptualize and research.
  2. Create and organize content.
  3. Develop the “look and feel.”
  4. Produce a working prototype.
  5. Test it
  6. Launch the site.
  7. Maintain.

1. Conceptualize and Research

Questions Before You Begin:

Strategy

  • Why are you creating this web site? What do you expect to
  • accomplish?
  • What are you offering your audience?
  • What do you want users to do on your web site?
  • After they’ve left?
  • What brings your visitors back?

General Site Description

  • What kind of site is it? (Purely promotional? Info-gathering?
  • A publication? A point of sale?)
  • What features will it have?
  • What are your most important messages?
  • Who are your competitors? What are they doing right? What
  • could be improved upon?

Target Audience

  • Who is your primary audience?
  • How Internet-savvy are they? How technically savvy?
  • Can you make assumptions about an average user’s
  • connection speed? Platform? Monitor size? Browser use?
  • How often do you expect them to visit your site? How long
  • will they stay during an average visit?

Content

  • Who is responsible for generating original content?
  • How will content be submitted (process and format)?
  • How often will the information be updated (daily, weekly,
  • monthly)?

Resources

  • What resources have you dedicated to the site (budget, staff, time)?
  • Does the site require a full content management system?
  • Can maintenance be handled by the client’s staff?
  • Do you have a server for your site?
  • Have you registered a domain name for your site?

Graphic Look and Feel

  • Are you envisioning a certain look and feel for the site?
  • Do you have existing standards, such as logos and colors, that must be incorporated?
  • Is the site part of a larger site or group of sites with design standards that need to be matched?
  • What are some other web sites you like? What do you like about them? What sites do you not like?

2. Create and Organize Content

  • Content creation
  • Information design

3. Develop the “Look and Feel”

  • Sketch it
  • The art direction process

4. Produce a Working Prototype

5. Test It

  • Basic quality check: What are the questions you need to address?
  • Browser environment testing: What is the criteria you use when testing?
  • User testing: What are some questions you might want to answer?

6. Launch the Site

7. Maintain the Site

Preparing Design Comps

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/preparing-design-comps/

Information Architecture

Once you’ve got content—or at least a very clear idea of what content you will have—the next step is to organize the content so it will be easily and intuitively accessible to your audience.

For large sites, the information design may be handled by a specialist in information architecture. It might also be decided by a team made up of designers and the client. Even personal sites require attention to the division and organization of information.

Again, this is a time for lists and sketchbooks. Get everything that you want in the site out there on the table. Organize it by importance, timeliness, category, and so on. Decide what goes on the home page and what gets divided into sections. Think about how your users would expect to find information on your site and design with their needs and assumptions in mind.

The result of the information design phase may be a diagram (often called a site map) that reveals the overall “shape” of the site. Pages in diagrams are usually represented by rectangles; arrows indicate links between pages or sections of the site. The site map gives designers a sense of the scale of the site and how sections are related, and aids in the navigation design.

Please read the following: http://www.uxbooth.com/blog/complete-beginners-guide-to-information-architecture/

Site Maps

Information architecture, site maps and wireframes

An example of a site map

Download the site map example here: Monday May Design Site Map

How to create a Site Map in Illustrator

Please read the following: http://www.ehow.com/how_6785412_create-website-sitemap-illustrator.html



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65