WEB AUTHORING. INTRO TO MULTIMEDIA

Alejandra Jarabo
Media Arts & Technologies t
Web Layout 1
TO NEXT PAGE
   
"The Wealth of Nations and the well-being of individuals now depend on having artists in the room".
  Daniel H. Pink,
"A whole new mind, moving from the information age to the conceptual age"
   
"Design in its simplest form, is the activity of creating solutions"
  Frank Nouvo, Industrial designer


When Designing a site, you need to take care of several aspects:

  1. From a structural point of view you need to first DEFINE the content of the site.
    You need to do this BEFORE you focus on the look and feel.
    It will help creating a Site-map: an accounting of bits and pieces that make out the site. For more on site maps, HERE.
    You need to define the scope of the project: the number of sections your site will have, the number of html pages for each section. This is really defined by your content, that will dictate the media content of your pages (ex: text and pics, or text and video, text -pics and flash...).
    You need to envision how the main navigation is going to work (functionality and location on the page) and if you are going to need a secondary navigation (if you have several items/subsections inside a given section).
    This the most work-intensive and problematic part of putting up a website and without this step, building a good navigation is almost impossible.

    After defining the architecture of your site you will structure the content of each of your pages.
    This means collecting all the media, specially pictures, and coordinating it with the text content, that will usually need major editorial design to adapt it to highly interactive screen format. Long text is discouraged: summarizing and transferring concepts into graphs and images is fundamental. People scan text on the web, they seldomly read as a first resource. CLICK

    Once the content is defined, page by page, and a good informational organization is defined, the web page production begins. WHEN CREATING AN HTML SITE, the structure of the page will be created through XHTML tags inside your page.
    As you see, there is a lot to solve before you begin working with html in a web site.

  2. From a visual point of view you need to create a CONSISTENT "look and feel" for the whole site.
    A website is a high profile extension of a business and in many cases their most popular display for branding.
    Selecting a color palette, type, graphics and design elements define an intuitive mood that frames the experience and conditions business. It dictates direct information for your right brain and will help or discourage the site use.
    We will talk more about visual issues down the page.

    WHEN CREATING AN HTML SITE, the look and feel is created with CSS (Cascade Style Sheet).
    Cascade style sheets can be created for an individual page (in the head of the html) or more professionally, as an external file that applies to the whole site.
    CSS will define font families, sizes and colors. Aligning of elements, positioning and even rollover look for your links.

 


1.
DEFINING
THE
PROJECT

 
DEVICE AN ORGANIZATION SYSTEM
CREATE A SITE_MAP

 


2.
PREVIEWING THE VISUAL RESULT

 
BUILD YOUR MAIN PAGES IN PHOTOSHOP TO PREVIEW THE PAGE LAY-OUT


3.
STRUCTURING
THE
CONTENT
FOR WEB

 
CONFIGURE YOUR CONTENT AS HTML PAGES


4.
APPLYING
THE LOOK AND FEEL

 
STYLE YOUR PAGES WITH CSS
 

CREATING THE LOOK AND FEEL OF A WEBSITE,

There are some fundamental ideas that will help you approach the creation of your Layout:

Define your working space.

This is the area of the browser window in which you are planning to place content: the dimensions and general proportion of your pages in Photoshop.

1

Keep screen resolution in mind.

This important decision depends on who your targeted audience is and what type of computer/monitor resolution they tend to have.
The size of a window browser is variable and same goes for the screen size of the user's screen.
We traditionally design for computer screens and those have dramatically increased size in the last few years.
The average screen of a laptop is 1024x768 pixels. A full HD screen is 1920x1080 pixels.
You might also design for cell-phone screens, smart phones, Pads or other devices.
The latest CSS3 technologies allow you to code the page with a liquid layout, what will scale down and reposition the elements depending on the browser window. This allows you to keep consistency between what is seen in a big and small (up to a cell phone screen).

When working for computer screens, your page's main content should be resolved in an area in between
800X600 pixels and 1200 X 900 pixels.

  
     

2

Remember that web page design is relative. You don't know how big the browser window of a user is going to be.
You can set your layout to be:

  • Elastic (working with percentages instead of pixels)
  • Fluid (using Javascript and different style sheets). Produces an even better result,
  • Fixed (defining a fixed- window centers in the browser window and letting the background fill out the rest of the space.

More on Elastic, Fluid or Fixed options for a layout HERE
More design examples. see t the page HERE

Click HERE for layout examples (this is a page with links to multiple successful web layouts, including blogs)

  
 
     

3

Content distribution within the page.

Everybody can see what is placed on the upper-left corner of your page.
That is the "democratic space" that you should use for Navigation information(nav bar), and main content.
As you advance to your right and down of the page, you are beginning to depend on the size of the user's display to be able to view that content.

 
  In this graph I am using a fixed layout that is centered against an html/CSS background color, image or pattern.
Notice the difference with the example above (in white, gray and red) where the negative space and text block changes as you increase/decrease the width of the browser window (called a Fluid layout).

Don't count with the scroller bar to view your main content.

Scrolling down a window takes the user's time.
It also distracts from reading.
If you design a page to be longer than the browser window you need to be even more careful with vertical composition, so there are visual points that will let you quickly tell where you were reading (or looking) before you scrolled.
Too much content on 1 page will also require a long time to load the whole content (specially if the content includes pictures and videos).

  

 

      
     

Design your template page-layout.

This is the distribution of content across the page that defines the composition and negative space in your page.
You will follow this structure in ALL of your pages. It should be as Simple and Clear and possible.

In complex sites you might use 2 or 3 different page-templates across the site to adapt to the content-need of the pages.
(ex. one main template with a top header, a footer, one main column and a side smaller box , another with 2 equal boxes underneath the header).

In the graphs you see the boxes (defined by DIV tags in CSS)named according to standard CSS conventions.
See more layouts in this page, that also describes the CSS for this liquid layout, HERE

 

 2 column
COMPOSTION ISSUES        
 

Think were are you going to place your main navigation.
(this depends on the amount of items that you are going to include as main sections).

A Horizontal line or bar across the top of the page is the most popular choice.
Blogs tend to have previous issues listed on the right.
This decision is both functional and compositional" it will define the placement of blocks on your page.

 

 

Plan a location for a sub navigation if any of your sections are going to have more than one page.
 
     

Reserve an area for pictures and an area for text.

Like in an "Image and background" exercise, think about the empty space in your page.
It is called the Negative Space, and defines a "resting area for your eyes". It is considered, in composition terms, as important as the location of your content (images and text). Click
Click HERE for graphic examples.

Text blocks define areas of interest that need to be incorporated as part of the composition.

Notice that in a traditional book page you will only have one color background and one or max two columns of text.
In a typical web page you use several boxes of information, very often with distinctive background colors to organize different types of information

  
     
 

Align your images.

One of the most common newbie layout mistakes is to slap images into a page without any thought to layout.
Use guides in Photoshop to understand the internal visual structure of your page when designing. It will make a world difference when you have to slice the content out to export it to match the html/CSS structure. Click HERE
ClickHERE for a number of graphic examples.
     
 

Balance the graphics and text on a page.

It's easy to get carried away with lots of images and animations, but they can make a page very hard to read.
When you're considering your layout, remember that images are a major part of the design, not just afterthoughts: carry content through them.
Think of blocks of text as images when envisioning the composition of the page and find a good balance between both.

     
 

Think about text width.

This is often called the "scan length", and refers to how many words are displayed on one line.
Most people can comfortably read about 7 to 11 words on a line.
Longer than that, the text will be hard to read, shorter than that and it's disjointed and distracting.
When designing your layouts make sure that the major text area displays the text in a readable width.
     
 

Centering text is inadvisable. Centering is very difficult to do well and it's often hard to read.

Avoid phrases in all capitals. Capitalization of the first letter can help reading, a phrase in all capitals is way harder to read than all lowercase because of the straighter negative space of all capitals and all letters having the same height.
     
 

Avoid "rectangle-itis" in your page design.

An obsessive use of guides makes you envision the whole page as a grid of boxes.
you need some organic elements, that alter the shape of your negative space and give some variation to the structure of blocks.
Blocks are psychologically constrictive and they need to be counterbalanced with some other elements (curves, free form shapes).

  Rectangles divide the small amount of real estate that you have into smaller pieces. They make everything on the page feel the same: predictable, boring, standard.
 

Here are some ways to break up the monotony of rectangle-itis (I am paraphrasing Lynda Weiman all along):

  • Make graphics with round edges or
  • Use irregularly shaped graphics as an alternative shape.
  • Use graphics to break the lines,
  • Use background images to break the lines,
  • Don't cram everything tightly,
  • Vary shapes and weights,
  • In frame sites, use one background
  • Think outside the box.
     
Color is information
 


Use color to define spaces.
There are only so many words that a human can take (and those are even fewer on a web page). excessive Information can be overwhelming and requires a strong effort for assimilation:
Color helps your intuitive perception, inducing clear understanding with no extra effort (and even some enjoyment).

Guide the user through a site with color hierarchy:
establish a few color Keys that will become your intuitive guide for the site; we call that the color-palette for your site.

Those few colors will become your communication code, you can use them to distinguish heading info from text blocks,
to help alleviate a very long text with small-not interfering design elements, or to code main sections of the Navigation.