WEB DESIGN

Design Speaks.

Good design matters. Design is another way to communicate.

PURPOSE & DESTINATION

important phrase

Design provides the vision to get there.

Design should be established to best serve the purpose of the web project and to cater to the needs of the user. Each part of the web project should drive the user toward a goal and fulfill a specific need for the users in the most effective way possible.

...

Design is about communication and problem solving. A successful website design should effectively communicate the message to the audience.

The content should be the main focus, but users must also feel a sense of satisfaction and pleasure from the design. The way the information is presented is essential for the content to make an impact.

A successful website design should be usable and intuitive, present information well, and evoke positive feelings and emotions to the audience.

DESIGN SKILLS

important phrase

Web Designers are special.

Web Design encompasses front-end web development skills including understanding information architecture, semantic conceptualization, authoring, graphic design, user interface design, user experience design and search engine considerations.

Necessarily tethered to these conceptual elements of design are a working knowledge of the platforms available to ultimately build the design. Effective designers must keep in mind what is doable with the time and budget available.

New Media has changed design. Web presences have become more compelling and impactful due to the continual introduction of new browser capabilities and code platforms which speed the implementation of more complex content presentations.

Modern web design which properly harnesses the power of these new technologies allows developers to produce web presences completely freed from the limitations of the old communications mediums produced with printed paper or broadcast signals.

New Media design elements enhance the visual experience, interaction opportunities, and communication impact by blending words, sounds, imagery, and motion into an overall message of the design.

Principles of design

Principles of Design

INTERFACE DESIGN

important phrase

It's all about the user.

UI vs. UX

User experience design (UX)

User experience design looks at how the user feels when interacting with a website or application. UX examines ease of use, usefulness, efficiency, user expectations and user satisfaction. UX evaluates the macroscopic experience and perceptions a user has interacting with a website as a whole.

The job of a UX designer is to observe users' interactions and figure out ways to improve and enhance elements of the website to make it a more positive experience. The goal is to make the website as user-friendly and intuitive as possible. If a person is satisfied with their experience of the website and perceive it as usable and understandable they are more likely to return.

RESEARCH – Observe user behavior, revisit brand, vision and goals

INSIGHT – Analyze research data and metrics, Interpret and Understand

CONCEPT – Explore options, brainstorm, refine ideas, prototype

DESIGN – Implement ideas, test, and monitor

UX Process
UI vs. UX

User Interface Design (UI)

The goal of UI is to make the transactional interaction of the user and the website as simple and efficient as possible to accomplish the desired function. In web development, UI design has a more microscopic emphasis than UX, focusing on crafting interface elements that make it easier for the user to accomplish desired tasks.

The techniques of user interface design aim to create an understandable, accessible and useable environment for the user to engage in. Interface design anticipates the user's actions and looks at how to implement available interface elements to help satisfy their needs.

Interface Elements

UI Elements
UI Elements

Things to keep in mind when considering interface design:

Keep it Simple. Make sure to narrow your focus to the goals you want the user to accomplish on the site. Too many elements can distract and confuse. Figure out the necessary pieces to accomplish the task and implement those pieces well.

Keep it consistent. Make sure the elements fit together and make sense. This will make it easier for the user to understand and navigate.

Make it meaningful. Make sure the elements have a purpose and a reason for being there. Useless features only cause distraction and do not help the user accomplish goals.

Make it engaging. To be successful and keep users coming back the experience must be pleasing and engaging.

Make is logical. The elements must work together and make sense to the user. Elements that are out of place will cause confusion and frustration and may drive users away from the site.

Anticipate the user's needs. Account for the user's actions ahead of time and plan defaults that aid those actions. This can help eliminate confusion and tackle issues before they turn into problems. This will help foster a positive experience for the user and will leave you with less work in the long run.

INFORMATION DESIGN

important phrase

It's got to make sense.

Information Architecture

Information architecture (IA) is the practice of deciding how to arrange the parts of a web content to be understandable. If you've ever tried to use something and thought, "Where do I go next?" or "I don't really understand this," you are experiencing a problem with an information architecture.

Understanding How Information Lives

Finding Systems
Traversing Systems
Understanding vocabularies
Understanding vocabularies

Search Engine Optimization (SEO)

SEO is a method of improving a website's ranking and visibility in search engine results with the goal of directing more visitors to the website.

SEO can be accomplished by adding or modifying specific elements of a site so search engines can easily interpret the content and better target users search queries.

SEO is a crucial part of reaching target audiences and making a website visible to its audience. A company that employs good SEO tactics on their website will be more visible to potential customers that use common search engines.

VISUAL DESIGN

important phrase

There's only one chance to make a first impression.

Graphic Design

Graphic Design is the process of planning and projecting visual communication, and problem-solving ideas through the correct use and combination of text, typography, symbols, space, images and colors to create a visual representation of ideas and messages. Graphic design can be implemented in physical or virtual spaces.

COLOR

Complementation

Colors must work well together and fit with the company's brand and personality.

Colors must complement each other to induce a pleasing feeling to the audience. Color combinations should be decided using color scheme methods on the color spectrum. Three common methods include the Triadic method, the Compound Color method and the Analogous color method.

  • Triadic color scheme – complimentary colors from 3 separate ends of the color wheel. Example, yellow, blue, red.
  • Split Complimentary color scheme – colors from opposite ends of the color scheme, blue and orange.
  • Analogous color scheme – example shades of yellow and orange.
Color Schemes Color Schemes Color Schemes

Contrast

Colors guide users to the content and help users understand the message.

The content should be highlighted and the main focus. Users should be called to focus their attention on the content.

Color can be a mechanism to accomplish this. Using contrasting colors to divide elements on a page, helps the viewer focus their attention on specific page elements. The eye can easily see and read the content, because it stands out from the rest of the page.

Vibrancy

Colors evoke certain feelings from the audience.

Vibrancy deals with energy and emotion. Colors have a major psychological impact on the user.

Bright colors provide an energetic feel to the design, this may be appropriate for some websites but not others. Bright colors might be used to grab attention or to make a bold statement that creates an instant emotional response.

Darker or more neutral colors tend to provide a more relaxing and calming feeling. Using more subtle colors might be appropriate when the user needs to digest a larger amount of content, it frees the users mind to focus their attention on other things, where as the bright bold colors might take over the attention.

Meaning

Colors have certain meaning and connotations. Color choice must accurately represent the company and its personality.

Color Meaning chart

TYPOGRAPHY

Typography is the art of arranging type in an appealing, pleasing, and effective way. Type choice is crucial to website design, because it can greatly effects whether or not the user receives and understands the message.

Things to consider about Typography are:

Fontography

Font choice is evocative of a tone and feeling. Using the wrong font is subconsciously uncomfortable and can damage the credibility of the content and detract from the message.

Caution!

This is some example text to show what happens when the wrong font is chosen!

Hierarchy

Hierarchy refers to the different sizes of text in a layout. Hierarchy is about font size and the differentiation between navigation, headers, body text, lists elements on a web page. Proper use of typographic hierarchy breaks up the content and makes the content easier to read and understand.

Hello,

This is some example text to show you how hierarchy can affect the way text content is displayed. The large relative size of the headline 'Hello' draws the eye to this section of textual content. Color is used as a further typographic accent which ties the content block to the headline text. The font used in the body of text is a san serif font which improves readability on computer displays and mobile devices. The width of the text block is kept to a comfortable eye scanning width to also improve readability.

Serif

Serif typefaces are characterized by tiny lines (serifs) coming off the edges of the letter stems. They are commonly used for headlines and narratives. They are harder to read on digital screens so are not usually present in large chunks of body text on web pages. Serif fonts are more commonly used in text printed on a page because they are easier to read from a physical page. Examples of serif fonts are:

Georgia

Times New Roman

Palatino Linotype

Adobe Garamond Pro

Sans Serif

Sans serif typefaces are straight and clean fonts, sans (meaning 'without' in French) the lines coming off the letter stems. They are commonly used in websites because they are easier to read on digital displays. Examples of sans serif fonts are:

Arial

Helvetica

Verdana

Tahoma

SHAPE

Geometric shapes whether as individual elements or as part of the content presentation layout, can provide interesting subtle cues to viewers of the content. Effective use of shape can set the tone in the mind of the viewer.

Shapes Meaning Example

POSITIONING

Spatial positioning and organization of content can enhance the meaning of the content or confuse viewers. Designers must understand eye scanning behavior, grid patterns of organization, visual impact rules, and other position-related design concepts to most effectively design a web presence.

Scan Patterns

Viewers' eyes scan digital content in certain patterns that are different than content presented on the printed page. Strategic use of the scanning patterns in layout allows designers to increase the likelihood of viewers seeing the most important content elements.

Grid System

A grid system consists of an underlying pattern of quadrants of equal proportions divided into a consistent pattern of columns repeated in each row. The grid is used to display hierarchy and importance of the content.

Grid System

9 Quadrant Grid

Blocks of content may span more than one quadrant either horizontally or vertically, but must not violate the pattern of the underlying grid.

Grid System

Proportional Structure

Rule of Thirds

The rule of thirds highlights the focal point of a visual element on a nine quadrant grid. The human eye is naturally takes in a scene focusing first on areas about a third of the distance from the left or right edge and about a third of the distance from the top and bottom.

Rule of Thirds

Dividing a scene by imagining positional guides drawn at each third both horizontally and vertically produces 4 guidelines. The 4 intersecting points on the divided grid represent the focus points. Placing the most important elements of the visual at those points gives the viewer a subconscious indication of the important elements to focus on in the visual.

Case Study

Wireframe Example

COLOR: The Analogous green color scheme of this company website, portrays consistency and professionalism. The colors are more subtle and calming appropriate for the business oriented content. You don't see dark or bold colors because that is not the tone the company wants to set. The arch at the top is a bright yellow, an accent color, which provides a bit of excitement and draws attention to the site design. The light green color scheme doesn't overwhelm the user and allows the user to focus and soak in the content.

TYPOGRAPHY: The san serif fonts used are clean and crisp, so that the written content is easy to read and understand.

SHAPE: The arch resembles a frame encompassing the content of the site, it also acts as a path to the navigation, which is where users can delve deeper into the meat of the site. The three box style allows content to fill the middle section sectioning all the content to the center. The use of three tabs across the top help dissect the information into logical sections to make it easier for the user to digest and understand.

POSITIONING: The arch resembles a frame encompassing the content of the site, it also acts as a path to the navigation, which is where users can delve deeper into the meat of the site. The three box style allows content to fill the middle section sectioning all the content to the center. The use of three tabs across the top help dissect the information into logical sections to make it easier for the user to digest and understand.

Road in countryside - Purpose and Destination

PURPOSE & DESTINATION

important phrase

Design provides the vision to get there.

Design should be established to best serve the purpose of the web project and to cater to the needs of the user. Each part of the web project should drive the user toward a goal and fulfill a specific need for the users in the most effective way possible.

...

Design is about communication and problem solving. A successful website design should effectively communicate the message to the audience.

The content should be the main focus, but users must also feel a sense of satisfaction and pleasure from the design. The way the information is presented is essential for the content to make an impact.

A successful website design should be usable and intuitive, present information well, and evoke positive feelings and emotions to the audience.

Design Skills

DESIGN SKILLS

important phrase

Web Designers are special.

Web Design encompasses front-end web development skills including understanding information architecture, semantic conceptualization, authoring, graphic design, user interface design, user experience design and search engine considerations.

Necessarily tethered to these conceptual elements of design are a working knowledge of the platforms available to ultimately build the design. Effective designers must keep in mind what is doable with the time and budget available.

New Media has changed design. Web presences have become more compelling and impactful due to the continual introduction of new browser capabilities and code platforms which speed the implementation of more complex content presentations.

Modern web design which properly harnesses the power of these new technologies allows developers to produce web presences completely freed from the limitations of the old communications mediums produced with printed paper or broadcast signals.

New Media design elements enhance the visual experience, interaction opportunities, and communication impact by blending words, sounds, imagery, and motion into an overall message of the design.

Principles of design

Principles of Design
iPad touch screen - Interface Design

INTERFACE DESIGN

important phrase

It's all about the user.

UI vs. UX

User experience design (UX)

User experience design looks at how the user feels when interacting with a website or application. UX examines ease of use, usefulness, efficiency, user expectations and user satisfaction. UX evaluates the macroscopic experience and perceptions a user has interacting with a website as a whole.

The job of a UX designer is to observe users' interactions and figure out ways to improve and enhance elements of the website to make it a more positive experience. The goal is to make the website as user-friendly and intuitive as possible. If a person is satisfied with their experience of the website and perceive it as usable and understandable they are more likely to return.

RESEARCH – Observe user behavior, revisit brand, vision and goals

INSIGHT – Analyze research data and metrics, Interpret and Understand

CONCEPT – Explore options, brainstorm, refine ideas, prototype

DESIGN – Implement ideas, test, and monitor

UX Process
UI vs. UX

User Interface Design (UI)

The goal of UI is to make the transactional interaction of the user and the website as simple and efficient as possible to accomplish the desired function. In web development, UI design has a more microscopic emphasis than UX, focusing on crafting interface elements that make it easier for the user to accomplish desired tasks.

The techniques of user interface design aim to create an understandable, accessible and useable environment for the user to engage in. Interface design anticipates the user's actions and looks at how to implement available interface elements to help satisfy their needs.

Interface Elements

UI Elements
UI Elements

Things to keep in mind when considering interface design:

Keep it Simple. Make sure to narrow your focus to the goals you want the user to accomplish on the site. Too many elements can distract and confuse. Figure out the necessary pieces to accomplish the task and implement those pieces well.

Keep it consistent. Make sure the elements fit together and make sense. This will make it easier for the user to understand and navigate.

Make it meaningful. Make sure the elements have a purpose and a reason for being there. Useless features only cause distraction and do not help the user accomplish goals.

Make it engaging. To be successful and keep users coming back the experience must be pleasing and engaging.

Make is logical. The elements must work together and make sense to the user. Elements that are out of place will cause confusion and frustration and may drive users away from the site.

Anticipate the user's needs. Account for the user's actions ahead of time and plan defaults that aid those actions. This can help eliminate confusion and tackle issues before they turn into problems. This will help foster a positive experience for the user and will leave you with less work in the long run.

Board game pieces on a map - Information Design

INFORMATION DESIGN

important phrase

It's got to make sense.

Information Architecture

Information architecture (IA) is the practice of deciding how to arrange the parts of a web content to be understandable. If you've ever tried to use something and thought, "Where do I go next?" or "I don't really understand this," you are experiencing a problem with an information architecture.

Understanding How Information Lives

Finding Systems
Traversing Systems
Understanding vocabularies
Strategic Visibility

Search Engine Optimization (SEO)

SEO is a method of improving a website's ranking and visibility in search engine results with the goal of directing more visitors to the website.

SEO can be accomplished by adding or modifying specific elements of a site so search engines can easily interpret the content and better target users search queries.

SEO is a crucial part of reaching target audiences and making a website visible to its audience. A company that employs good SEO tactics on their website will be more visible to potential customers that use common search engines.

Visual Design - colorful paint

VISUAL DESIGN

important phrase

There's only one chance to make a first impression.

Graphic Design

Graphic Design is the process of planning and projecting visual communication, and problem-solving ideas through the correct use and combination of text, typography, symbols, space, images and colors to create a visual representation of ideas and messages. Graphic design can be implemented in physical or virtual spaces.

COLOR

Complementation

Colors must work well together and fit with the company's brand and personality.

Colors must complement each other to induce a pleasing feeling to the audience. Color combinations should be decided using color scheme methods on the color spectrum. Three common methods include the Triadic method, the Compound Color method and the Analogous color method.

  • Triadic color scheme – complimentary colors from 3 separate ends of the color wheel. Example, yellow, blue, red.
  • Split Complimentary color scheme – colors from opposite ends of the color scheme, blue and orange.
  • Analogous color scheme – example shades of yellow and orange.
Color Schemes Color Schemes Color Schemes

Contrast

Colors guide users to the content and help users understand the message.

The content should be highlighted and the main focus. Users should be called to focus their attention on the content.

Color can be a mechanism to accomplish this. Using contrasting colors to divide elements on a page, helps the viewer focus their attention on specific page elements. The eye can easily see and read the content, because it stands out from the rest of the page.

Vibrancy

Colors evoke certain feelings from the audience.

Vibrancy deals with energy and emotion. Colors have a major psychological impact on the user.

Bright colors provide an energetic feel to the design, this may be appropriate for some websites but not others. Bright colors might be used to grab attention or to make a bold statement that creates an instant emotional response.

Darker or more neutral colors tend to provide a more relaxing and calming feeling. Using more subtle colors might be appropriate when the user needs to digest a larger amount of content, it frees the users mind to focus their attention on other things, where as the bright bold colors might take over the attention.

Meaning

Colors have certain meaning and connotations. Color choice must accurately represent the company and its personality.

Color Meaning chart

TYPOGRAPHY

Typography is the art of arranging type in an appealing, pleasing, and effective way. Type choice is crucial to website design, because it can greatly effects whether or not the user receives and understands the message.

Things to consider about Typography are:

Fontography

Font choice is evocative of a tone and feeling. Using the wrong font is subconsciously uncomfortable and can damage the credibility of the content and detract from the message.

Caution!

This is some example text to show what happens when the wrong font is chosen!

Hierarchy

Hierarchy refers to the different sizes of text in a layout. Hierarchy is about font size and the differentiation between navigation, headers, body text, lists elements on a web page. Proper use of typographic hierarchy breaks up the content and makes the content easier to read and understand.

Hello,

This is some example text to show you how hierarchy can affect the way text content is displayed. The large relative size of the headline 'Hello' draws the eye to this section of textual content. Color is used as a further typographic accent which ties the content block to the headline text. The font used in the body of text is a san serif font which improves readability on computer displays and mobile devices. The width of the text block is kept to a comfortable eye scanning width to also improve readability.

Serif

Serif typefaces are characterized by tiny lines (serifs) coming off the edges of the letter stems. They are commonly used for headlines and narratives. They are harder to read on digital screens so are not usually present in large chunks of body text on web pages. Serif fonts are more commonly used in text printed on a page because they are easier to read from a physical page. Examples of serif fonts are:

Georgia

Times New Roman

Palatino Linotype

Adobe Garamond Pro

Sans Serif

Sans serif typefaces are straight and clean fonts, sans (meaning 'without' in French) the lines coming off the letter stems. They are commonly used in websites because they are easier to read on digital displays. Examples of sans serif fonts are:

Arial

Helvetica

Verdana

Tahoma

SHAPE

Geometric shapes whether as individual elements or as part of the content presentation layout, can provide interesting subtle cues to viewers of the content. Effective use of shape can set the tone in the mind of the viewer.

Shapes Meaning Example

POSITIONING

Spatial positioning and organization of content can enhance the meaning of the content or confuse viewers. Designers must understand eye scanning behavior, grid patterns of organization, visual impact rules, and other position-related design concepts to most effectively design a web presence.

Scan Patterns

Viewers' eyes scan digital content in certain patterns that are different than content presented on the printed page. Strategic use of the scanning patterns in layout allows designers to increase the likelihood of viewers seeing the most important content elements.

Grid System

A grid system consists of an underlying pattern of quadrants of equal proportions divided into a consistent pattern of columns repeated in each row. The grid is used to display hierarchy and importance of the content.

Grid System

9 Quadrant Grid

Blocks of content may span more than one quadrant either horizontally or vertically, but must not violate the pattern of the underlying grid.

Grid System

Proportional Structure

Rule of Thirds

The rule of thirds highlights the focal point of a visual element on a nine quadrant grid. The human eye is naturally takes in a scene focusing first on areas about a third of the distance from the left or right edge and about a third of the distance from the top and bottom.

Rule of Thirds

Dividing a scene by imagining positional guides drawn at each third both horizontally and vertically produces 4 guidelines. The 4 intersecting points on the divided grid represent the focus points. Placing the most important elements of the visual at those points gives the viewer a subconscious indication of the important elements to focus on in the visual.

Case Study

Mockup Example

COLOR: The Analogous green color scheme of this company website, portrays consistency and professionalism. The colors are more subtle and calming appropriate for the business oriented content. You don't see dark or bold colors because that is not the tone the company wants to set. The arch at the top is a bright yellow, an accent color, which provides a bit of excitement and draws attention to the site design. The light green color scheme doesn't overwhelm the user and allows the user to focus and soak in the content.

TYPOGRAPHY: The san serif fonts used are clean and crisp, so that the written content is easy to read and understand.

SHAPE: The arch resembles a frame encompassing the content of the site, it also acts as a path to the navigation, which is where users can delve deeper into the meat of the site. The three box style allows content to fill the middle section sectioning all the content to the center. The use of three tabs across the top help dissect the information into logical sections to make it easier for the user to digest and understand.

POSITIONING: The arch resembles a frame encompassing the content of the site, it also acts as a path to the navigation, which is where users can delve deeper into the meat of the site. The three box style allows content to fill the middle section sectioning all the content to the center. The use of three tabs across the top help dissect the information into logical sections to make it easier for the user to digest and understand.

Back arrow

Go Back

Web
Development

Up Next

Next arrow

Content
Development

Back to Top