Pratt CCPS Design for the Web

Wednesday, April 1, 2015

Mobile & Table Design Basics

How is mobile different?

“The first thing we need to understand about mobile design is that it’s different – and not just with regards to size. The physicality and specifications of mobile devices impart different design affordances and requirements. Because mobile devices are lighter and more portable, we often find it more convenient to use them. Consequently, through this more regular use, we feel a unique, emotional connection to them.” 1

Because mobile devices have fundamentally changed the users expectations, it’s important that designers design with a user-center design process to arrive at their solution.

There are four mobile delivery methods that a designer can use to achieve a user-centered design:

Mobile-specific site - which is optimized for mobile devices.
Responsive site - this type of site reorients itself for mobile devices.
Native app - an application that’s installed on the user's device. These are self-contained, and every screen of the app is defined up front.
Hybrid app - this can offer a little more flexibility, as it’s viewed in a browser. It loads content from the web and provides users with an “app-like” interface.

"People appreciate iOS apps that feel as though they were designed expressly for the device. For example, when an app fits well on the device screen and responds to the gestures that people know, it provides much of the experience people are looking for. And, although people might not be aware of human interface design principles, such as direct manipulation or consistency, they can tell when apps follow them and when they don’t. As you begin designing an iOS app, be sure to understand what makes iOS devices unique, and learn how to incorporate HI design principles so that you can deliver a user experience people will appreciate.” iOS Human Interface Guidelines

Mobile Information Architecture (IA)

Some of the more popular patterns that are practiced in mobile and tablet design are: Hierarchy, Hub & Spoke, Nested Doll, Tabbed View, Bento Box and Filtered View.

Hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site, you may be restricted to this; however, introducing additional patterns could allow you to tailor the experience for mobile.

Hub & Spoke is pattern gives users a central index from which users will navigate out. It’s the default pattern on Apple’s iPhone. Users can’t navigate between spokes, but must return to the hub instead.

Nested Doll leads users in a linear fashion to more detailed content. When users are in difficult conditions, this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.

Tabbed View is a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened.

Bento Box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly.

Filtered View allows the user to navigate within a set of data by selecting filter options to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users to explore content in a way that suits them.

It’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts and designers need to consider the above methods and patterns throughout the entire design process - from R&D (Research & Development) to the final product - when designing for mobile because they impact the user.

There are also some interactions designers need to pay attention to when designing for mobile and tablet devices. These include: ergonomics, gestures, transitions, and mobile-specific interaction patterns.

Ergonomics
It’s important to pay attention to device dimensions as well as the practical components of a device. The way the user holds the device can influence how easy it is for the user to reach parts of the screen or “hit areas.” These are the areas of the screen the user touches to activate something and require enough space for the user to touch - the smallest button size is 44px square.

Gestures
All devices enable gestures which makes it a crucial component of mobile interaction design. Some of the gestures include: press, long press, double press, small swipe, large swipe, pinch/spread. There are some standards and patterns for developing gestures on touch-based devices that you can read more about here.

Transitions
These are interactions between application states that help tell a story or establish a gestural metaphor, and they help facilitate recall and prevent users from getting lost. Some of the basic interactions include:

Common Patterns
Because mobile devices have less space, along with the users viewing conditions often affecting their experience, it can be a challenge for designers to provide users with an efficient and positive user experience. Some of the most valuable interaction patterns include those used to improve navigation, select content, sign in/out, and negotiate forms.

Main Navigation
Main or “primary” navigation is a visual manifestation of our website's or application’s information architecture.

Selecting Content
Pressing links to activate content facilitates flow, making it easy for the user to quickly select content with one hand. If done well, this transition also increases user engagement.

Sign-In
Entering a username, email and password is an essential process for some applications. As designers, we can ensure that it’s as painless as possible.

Forms
Filling out forms on a mobile device can be a frustrating experience, especially if that form appears on a website designed for a desktop and lacks a mobile version. Make the process easier for the user by paying attention to the small details. You can also use native forms.

Getting the interactions accurate on a mobile device is essential. Today’s solutions become tomorrow’s standards and guidelines. It’s important to keep in mind the details that define a mobile layout and mobile-specific interactions. In doing this, designers can create intuitive mobile experiences that are then translated through the visual design. Below are some additional things to keep in mind when designing for mobile and tablet.

The structure of the layout needs to be taken into consideration as well as how to best utilize the available screen space; a grid system will help to achieve this.
Keep in mind that on a mobile device the user typically only moves vertically through content, whereas on desktop, the user is able to view content in any direction one wants.
Interactions must be user-friendly, and the visuals need to reinforce those interactions.
Sizing and placement of elements should ensure ease of use, and space to scroll and swipe must be sufficient to allow a user to easily navigate through these elements.
Group like or related items and establish a vertical rhythm that supports the communication of the content hierarchy.
As previously mentioned, by utilizing a grid system and placing elements on the baseline grid, it will make reading and understanding content easier, as well as create structure within the design.
And finally, using color is a valuable tool for communication. While it can be very subjective, it can be used to convey tone or style, to differentiate between sections, static items and interactive functionality and can also be used in communicating status changes.

References

Sunday, March 22, 2015

Web Design Elements Continued

According to Patrick McNeil, there are 10 Web Design Elements that you Shouldn’t Overlook. They are:

Links
Forms
Button Behavior
Form Validation
Status Messages: Errors, Warnings, Confirmations, etc.
Extending the Background on Larger Screens
Base HTML Elements
Website Emails
Page Stretching
Animations: Pop-ups, Tooltips, Transitions, etc.

Designers who keep the above elements in mind, plan and design for them, will come out further ahead. Aside from keeping the developers guessing, it gives the designer more control over the design of the finer details. You’ll be creating a higher quality product, and in the long run, you’ll also reduce the cost of production. Let’s take a look at the above elements in more detail.

Links
Include the following states for ALL links on your website:

Normal - default state of a link
Visited - link whose target HAS been visited
Active - link being clicked by user
Hover - when user mouses over link

Forms
Two of the most important considerations when laying out a form are:

Form label - description of the forms purpose
Input fields and labels - plan for how these fields will be styled and oriented relative to the fields (inside box, above, left, etc.)

Button Behavior
The four states of a button are:

Default - default state of a button
Hover - when user mouses over the button
Click - button that HAS been clicked
Disabled - typically used for a validation process

Form Validation
This is the critical point where the website communicates the user requirements and errors in a form. There are three things to consider:

Required Fields - these fields should be clearly indicated (usually by asterisk).
Real-time Validation - informs the user of any problems with the data they entered
Post-back Validation - happens after the user submitted the form

Status Messages: Errors, Warnings, Confirmations, etc.
Users typically need feedback after performing actions on websites. Be sure to consider actions that a user might go through on your website and plan for the messages that will need to be communicated.

Extending the Background on Larger Screens
If you’re not using a simple background for your website, e.g. solid color, then you need to think about how your site will look on larger screens. If you’re using an image or pattern/textured background, and you’ve designed it to a 960 pixel width, be sure to design and communicate with the developer what it will look like beyond the 960 pixel width. Does the image fade? Does it extend? etc.

Base HTML Elements
For copy-heavy websites, the design and styling of base HTML elements are fundamental and should not be overlooked. Here are the base elements to always plan for:

Paragraphs
Headings 1 through 6
Unordered and Ordered Lists
Tabular Data
Form Fields
Images
Bold and Italicized text

Website Emails
Carefully review the contents of the website at the planning stage to look for any emails that might be sent. Some of the most common are:

Mailing list sign-up confirmation
Registration confirmation
Form-completion confirmation (e.g. contact form)
Order verification after a purchase

Page Stretching
How will the design of your website “stretch” to accommodate additional content? Preparing alternate versions of a layout with much more content can be extremely helpful in demonstrating how to plan for such a scenario.

Animations: Pop-ups, Tooltips, Transitions, etc.
Each of these animated elements has a distinct visual style that must be accommodated all on its own. Some of the most common places animations show up are in:

Tooltips - those pop-ups when users mouse over elements.
Image rotators - slideshow transitions and styles.
Lightbox - you can style not only the lightbox itself, but also the transition to it.

Basic CSS & HTML

The below content has been taken from HTML Dog. More tutorials, techniques and examples can be found here.

CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document. Styles have a format of ‘property: value’ and most properties can be applied to most HTML tags.

Applying CSS

There are three ways to apply CSS to HTML: In-line, internal, and external. Even though the best-practice approach is to have the HTML be a stand-alone document, below is a brief explanation of each.

In-line
In-line styles are put straight into the HTML tags using the style attribute and look like this:

This will make that specific paragraph red.

Internal
Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags surround all of the styles for the page.

This will make all of the paragraphs in the page red and all of the links blue.

External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like this:

If this file is saved as “style.css” in the same directory as your HTML page, then it can be linked to in the HTML like this:

Selectors, Properties, and Values

Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. For our purposes we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific type of element.

For each selector there are “properties” inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

A value is given to the property following a colon (NOT an “equals” sign) and semi-colons separate the properties.

This will apply the given values to the font-size and color properties to the body selector.

When this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 14 pixels in size and navy in color.

Lengths and Percentages
There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties, and it is worth familiarizing yourself with these before continuing.

px (such as font-size: 12px) is the unit for pixels.
em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.
pt (such as font-size: 12pt) is the unit for points, for measurements typically in printed media.
% (such as width: 80%) is the unit for percentages.

Color

The following values to specify red can all produce the same result with the following:

red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00

Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.

Text

You can alter the size and shape of the text on a web page with a range of properties. They include:

font-family: this is the font itself, such as Times New Roman, Arial, or Verdana.

font-size: the size of the font

font-weight: this states whether the text is bold or not. Most commonly this is used as font-weight: bold or font-weight: normal but other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800 or 900.

font-style: this states whether the text is italic or not. It can be font-style: italic or font-style: normal.

text-decoration: this states whether the text has got a line running under, over, or through it. This property is usually used to decorate links and you can specify no underline with text-decoration: none.

text-transform: this will change the case of the text.

text-transform: capitalize turns the first letter of every word into uppercase.
text-transform: uppercase turns everything into uppercase.
text-transform: lowercase turns everything into lowercase.
text-transform: none I’ll leave for you to work out.

letter-spacing: properties are for spacing between letters or words. The value can be a length or normal.

line-height: property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font.

text-align: property will align the text inside an element to left, right, center, or justify.

text-indent: property will indent the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.

Margins and Padding

margin and padding are the two most commonly used properties for spacing out elements. A margin is the space outside something, whereas padding is the space inside something.

This leaves a 20-pixel width space around the secondary header and the header itself is fat from the 40-pixel width padding.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

Putting It All Together

The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.

Background Images

Used in a very different way to the img HTML element, CSS background images are a powerful way to add detailed presentation to a page. To jump in at the deep end, the shorthand property background can deal with all of the basic background image manipulation aspects. The properties include:

background-color: which we have come across before.

background-image: which is the location of the image itself.

background-repeat: which is how the image repeats itself. Its value can be:

repeat: the equivalent of a “tile” effect across the whole background
repeat-y: repeating on the y-axis, above and below
repeat-x: repeating on the x-axis, side-by-side
no-repeat: which shows just one instance of the image

background-position: which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.

Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results.

Further reading:
Technical Web Typography: Guidelines and Techniques
The Future Of CSS Typography

References:

Sunday, March 15, 2015

Gathering Content for your Website

When you don’t have any content, and your client wants to begin, where do you begin?

After you’ve completed your wireframes and have moved on to developing your comp in Photoshop, you can begin to gather content, even if it’s not finalized or you have none.

Copy
There are a few ways to procure copy. You can:

Use existing/old copy.
Write something quickly that will be similar to the final draft; this should include headlines, sub-heads, etc.
Use "dummy" copy, which is usually your best, fastest, and most efficient option.

Resources for dummy copy generators:
Lorem Ipsum Generator
Blind Text Generator
Loremify

Images
Similar to obtaining copy, there are many options for finding FPO (For Placement/Position Only) imagery:

Use existing/old images.
Depending on the content, you can take photos, but this might not be the most efficient, time effective option.
Stock photos are most likely your best bet. Many stock photo companies allow you do download a low-res image without the watermark simply by creating an account. This option will best reflect the final imagery that will be used.
Or, even better you can use Google, Flickr, etc!

When using FPO content, the designer should somehow indicate such by either notating it somewhere on the page, or what’s typically done is placing a big fat FPO over the content.

Additionally, you can use shapes and other place holder content to represent the content that will be featured on the final designs.

When you begin to develop the final content to be used on the website, there are a few things to keep in mind related to developing good content that will engage the user.

According to Nicholas Tart, the “3 Things that Visitors Should See on Every Page of Your Blog” (or website) should be:

A First-Thing-They-See Headline
A Valuable, Persuasive, and Trust-Building Message
A Call to Action that Accomplishes Your Goals

Getting into more detail, starting with headlines, Tart uses the analogy that if you’re lost somewhere, when you look at the provided onsite map, be it at a mall, museum, public transpiration, etc. the first thing you see is a big red circle and an arrow saying, “YOU ARE HERE.”

Tart compares the headlines on websites as your “YOU ARE HERE” circle and advises to make them “big, bold, and colorful.”

Next, you need to effectively communicate the message you’re advocating. Within each page of your site, it’s “an opportunity to give something while building trust” with your users and this message is translated to the user via text, image, audio and video.

Your text needs to be written extraordinarily well in order to stand out among your competitors. Your images need to be curated in such a way that they grab the users attention; creating infographics and other icons can help you stand out. Audio and video are optional, but it is the most effective way in building trust with your users.

And finally, your Call to Action (CTA) is typically at the end of your advocated message, but can be in multiple places within your site. However, before you do all of the above, you need to decide exactly what that message is - what are you advocating?

Questions to ask yourself when deciphering how to accomplish your goals through a call to action. Is your goal to:

Keep someone on your site? List your related posts. The popular posts in the sidebar also help keep people on your site.
Get someone to comment or interact? Ask them a question and make sure that they know that their response is meaningful.
Get someone to click an ad? Put your ads there and make sure that they’re relevant to the content.
Get someone to opt-in? Place an opt-in box and tell them why they should subscribe.
Get someone to buy a product? Put a link to your sales page or someone else’s sales page and make a final recommendation on why they should purchase.
Get someone to take your advice? Tell them exactly what to do and emphasize the importance of taking action immediately.
Get someone to trust you? Add an author bio with a mix of personal and professional details.

Ultimately, one action or goal listed above translates into another action and then begins to build trust in the user. This can be translated into a series of actions that look like this:

The user browses your site and has a positive experience; maybe they comment on something or engage in some way; you respond in a timely manner confirming the initial trust and positive experience the user had; this then turns into the user returning to your site and making it part of their browsing routine which can then translate into buying a product and/or advocating and recommending you, your brand and what you stand for to others. All of this helps build your brand and allows it to be more accessible which is the primary goal.

You don’t want content that will distract the user from the website's indented goals. All of your content should work together to fulfill the objectives of your site. If it doesn’t, why is the user there?

References:
http://www.incomediary.com/visitors-see-every-page-blog

Common Elements

10 Crucial Elements for Any Website Design by Carrie Cousins

As the title suggests, Cousins expands upon what elements should be present, and how to use said elements in designing a good website. Continue reading for a summary of her article or read the full article here.

While every designer may have a different plan when it comes to building a website, they do have a common checklist. These are the elements every website should include:

Space
Simple Navigation
About Us
Contact Information
Call to Action (or Signup)
Search
Informational Footer
Style for Buttons
Great Images
Web Fonts

1. Space
Space is one of the most important design tools because it dictates everything— from flow to readability. Designers are beginning to use space in ways that we did not see on the web a decade ago. More site designs include vast spaces, increased spacing between lines of text, and an overall use of open space.

How To Use It: Start with key elements such as navigation menus. Make sure elements are organized in a way that includes set spacing between elements. This will make each button or word stand out more clearly on its own.

2. Simple Navigation
Navigation does not need to be (and should not be) complicated. It should be easy to identify and easy to use. It is also important to keep navigational menus to a minimum, so you don’t overwhelm users. Depending on the type of site, you should have no more than five to ten navigation items.

Navigation also includes tools that help users navigate through a site. For example, sites with parallax scrolling often include directional arrows to make the site more user friendly. The easier it is for people to use and navigate your site, the longer they are likely to interact with it.

How To Use It: Use simple navigation as the framework for your website. Remember, users want a few key things from navigation: knowledge of where they are on the site, a way to go back or home, and directions if your site has an unusual or more complicated interface.

3. About Us
It is especially important for a small business or site owner to tell users who they are, and the “About Us” page should do just that. It can also outline a company’s philosophies or goals, or how the site came to be. User testimonials and success stories can go here, as well as serve as a gateway to related pages or even social media profiles.

These pages tend to get long and wordy so keep the page simple; give users just enough information to be interested but not bored.

How To Use It: Use the About Us page to give your brand a little personality. Consider including photos of your team and a short company biography.

4. Contact Information
Contact information commonly appears in one of two ways: in the header/main navigation or as a Contact Us page with a form or expanded information. Either option can work well, depending on your site design. The key is making it highly visible. Having contact information such as a phone number, physical address, or form to contact the website owner adds legitimacy to your site and business.

How To Use It: Add contact information to all static headers and/or footers. If you have a physical business address, include location information. Consider a contact form so users can email directly from the website.

5. Call to Action (CTA) or Signup
In most instances, a website is the gateway to an action: make a sale, provide information, gather contact information. To ensure this action, CTA prompts need to be obvious and strong. Another popular call to action is a signup form. If this is your goal, place the form in a prime location and size it prominently. Make the form simple and quick to fill out.

As previously mentioned, determine what your site is supposed to do. Then design it so that action is obvious and leads users to it. Techniques such as color, contrast and space can help lead users to the “right” buttons.

How To Use It: Make calls to action obvious. Placement should be in a highly visible part of the page and next to the item which it relates. Buttons should be of a contrasting color and say exactly what you should do: Buy Now, Join, Download, Sign Up.

6. Search
Search functionality is vital for repeat users. Design the box in a way that is unobtrusive but is easy to use. Make sure the box is big enough to type in. If you use an icon for search, there’s no need to invent something new. Use the standard magnifying glass.

How To Use It: Design a simple box that lives at the top of your website for search. The top right corner is the most popular location: using that space is expected and easy for users to find.

7. Informational Footer
The footer was traditionally used as a place to list links to every nook and cranny of your website, but now, websites are opting for a more minimalist footer. No matter how you choose to display your footer, it’s a good way to connect to your audience with a wealth of information without it getting in the way of the design.

Just be sure to make the footer useful and keep it simple. Whether you opt for a couple of buttons or a small sitemap, the footer should be designed to mesh with your site

How To Use It: Some of the best footers combine many of the above elements. The footer is often a repeat of elements found elsewhere (such as adding search to the top of the page in the main navigation and again in the footer). It can also introduce some of the above elements and house them if there is no other logical location in the design scheme.

8. Style for Buttons
Every button on a site should be recognizable as a button. They should have the same shape, design effects and feel, regardless of purpose or location.

How To Use It: Develop a set of buttons unique to your site. Create a consistent color theme with an overall style. Achieve this by making every button a single color and giving it the same shape and attributes.

9. Great Images
People love to see things in action. Great images or illustrations are one easy way to do this. With a relatively small set of great imagery, you can showcase content that will entice users to your site. Be cautious of using too many stock images because your site could end up looking like something else.

How To Use It: Hire a photographer or illustrator to develop and create a great set of images for your site. Rely on custom images rather than stock images for a unique visual experience.

10. Web Fonts
The web was once filled with a handful of typefaces because they were readable by most computers and browsers. That is no longer a limitation for designers, but web fonts are still important for two key reasons: compatibility and licensing. By using a web font versus creating images out of type to maintain a certain look, type is searchable on the web, which is important for search engine optimization (SEO).

How To Use It: Start with a service such as Google Web Fonts, which is free, to implement a set of beautiful and interesting typefaces into your site design without having to spend a fortune on licensing or worry about compatibility issues.

In summary, while there are a lot of important components to effective website design, including these ten key elements can make a difference. Take care to appropriately design with space, simple navigation, about us, contact information, calls to action, search, footer information, buttons, images and web fonts. These often overlooked details can make or break your site design.

Further reading:
Elements of Modern Web Design
The Elements of a Clean Web Design

References:
http://www.incomediary.com/10-design-elements-all-big-blogs-have-in-common

Sunday, March 8, 2015

The Psychology of Web Design, Part 1: Content & Space

A well designed website is more than just delivering content and making it look good. When people come to your site they immediately develop an impression about you, your website and what you stand for. Whether positive or negative, their opinion lies in your hands as the designer of the website, and there are many resources to help designers create effective visuals that play into the psychology of those viewing your site.

Content, Space, Color and Typography are the main components that have the biggest impact on a viewer, and it’s up to the designer to understand how using different design elements affects the mood, attitude and experience the viewer will have while browsing your website.

Content
People visit websites to access information they need, and the design of that website aids in them finding the information they need quickly and with ease.

When websites were first developed, it was common to see pages too full of content. They typically had no structure, and it was difficult to find information and read through it to get what they needed. The user often left the site overwhelmed and had a poor experience.

When designing a site now, designers really need to condense and organize their content, as hiding or presenting too much information can lead to a possible loss in potential business. There should be a happy medium between providing adequate and needed content, while not overwhelming the user. This will lead to a good user experience as well as setting the tone for you and your organization.

Keep your content concise, organized and easy to read and navigate in order to aid in the psychology of your users having a positive experience on your website.

Space
The organization of a website can greatly affect how a user interprets a site, so organizing content should be a high priority. When organizing content, the designer should take into account the space that it takes up as well as the white space that’s used or not used!

“…white space is often referred to as negative space. It is the portion of a page left unmarked: margins, gutters, and space between columns, lines of type, graphics, figures, or objects drawn or depicted.”1

The white space on a website plays an important role because visually it gives the user a resting place, and it’s a sort of pause that gives the user a chance to rest their eyes.

Take, for example, a website utilizing every inch of screen space. This site starts to feel chaotic and without any negative space present, there is nothing for the user to focus his eye to to take a visual break.

Keeping things simple by having a well organized website that uses adequate white space translates into a good user experience.

These are two of the tools you’ll need to create a visually engaging site that encourages visitors to return. Read the next post about color.

References:

Pages