Week 13 Outside of Class

This weekend I finished my Photoshop mock-up.

I really like how this idea turned out. I went with a two column grid in the body of the website because I wanted the focus to be on the seals and the content next to the seals. I did not want to add the "Select A Design" section beside in a sidebar because I felt it might become too cluttered.

This screenshot shows how links will look when hovered over. Links will change color and develop an underline in the hover state.

I also read Chapter 4 in Above the Fold. Here are my notes:

Chapter 4 - The Elements of Web Design

•  Creating a design system so that dissimilar types of content appear to work together is what graphic designers have been doing for centuries, and web design is no different
• Design is about more than simply organizing information, however; it's about making something distinctive and memorable

WEB DESIGN STYLE

• A design style is an attempt at connecting with a user's sensibilities and a basic need to relate to things
• The elements of a design style include color, texture, typography, and imagery use
• In all forms of design, a style comes primarily from two areas: the trends of the time - what's fashionable; and the technology that's available to create a piece of design

COLOR

• More than any other design element, color has the ability to guide, direct, and persuade a user
• Color can appeal to a user's emotions by setting a mood or a tone for a piece of design
• Color has three main properties: hue - which is commonly known as the color; value - which is the darkness or lightness; and saturation - which is the vibrancy of a color

TEXTURE

• Adding texture to a web design gives the user sense of a tactile experience and helps connect him or her to the content of the page

IMAGERY & ICONOGRAPHY

• For web designers, the use of images or iconography can mean replacing wordy descriptions with single images, making a layout easier for a user to quickly get information from
• Imagery should be deliberate and add either to the branding or the message of the page

SCALE

• Contrast of size or scale is one way designers can add a sense of drama to a design
• Scale is a relative design element, so in order to achieve a dynamic feeling of scale, small elements must be included in the layout for comparison's sake
• Large design elements that break out of borders or even bleed off the page also heighten the sense of scale

DEPTH & DIMENSION

• From overlapping design elements, to adding gradient color and shadows, to creating three-dimensional elements, adding depth to a web page can help add visual interest and draw a user into a design

ANIMATION

• Animation is a tool used by digital designers to layer information, create a sequence of information, or simply surprise and delight the user
• Web design best practices dictate that the designer should always give the user the ability to pause a large animation, or, if an animation is looping, to cycle for no more than three cycles

VARIABILITY

• The speed at which a web designer can apply changes, combined with the need to continually refresh the look of a site, gives web designers the ability to vary elements of a design based on things like sections of the site or specific events - or randomly
• The best way to keep a site fresh is by updating the content