Web typograhy

Simon Pascal Klein writes on the Top 10 dos and don’ts of Web Typography

1. Apply no more than three typefaces per design (or page)
2. Set headlines large and invitingly, at the top of the page
3. Size body copy 14px+
4. Ensure a good text to background contrast
5. Apply stress and emphasis discreetly
6. Do not set continuous text in full capitals
7. Give the type space to breathe; set ample measures and leading
8. Be wary of fonts not designed for screen use
9. Ensure webfont assets are subsetted and cached
10. Don’t use Comic Sans

Read more at the original article.

Web

The Oatmeal presents "How to make your shopping cart suck less" Vulgarly amusing advice on design.

What not to ask

Sometimes the secret of successful design is to not include a feature. Boing-Boing reports on a company that increased its sales by $300 million by removing its user log-in feature.


http://boingboing.net/2011/08/05/300-million-button-making-customers-create-logins-to-buy-cost-etailer-300myear.html

Websites that leave a bad taste in your mouth

Slate Magazine on Why are restaurant websites so horrifically bad?

Over the last few weeks I've spent countless hours, now lost forever, plumbing the depths of restaurant Web hell. I also spoke to several industry experts about the reasons behind all these maliciously poorly designed pages. I heard several theories for why restaurant sites are so bad—that they can't afford to pay for good designers, that they don't understand what people want from a site, and that they don't really care what's on their site. But the best answer I found was this: Restaurant sites are the product of restaurant culture. These nightmarish websites were spawned by restaurateurs who mistakenly believe they can control the online world the same way they lord over a restaurant. "In restaurants, the expertise is in the kitchen and in hospitality in general," says Eng San Kho, a partner at the New York design firm Love and War, which has created several unusually great restaurant sites (more on those in a bit). "People in restaurants have a sense that they want to create an entertainment experience online—that's why disco music starts, that's why Flash slideshows open. They think they can still play the host even here online."

The article illustrates its points with great links to expensive websites that may satisfy a chef's ego but don't work for the customer. The whole article is well worth reading.

Impressions

Seth Godin posted on the importance of design details.

"If a book has cheap color separations, the wrong sort of gloss on the cover and the wrong hue to the paper, it just feels cheap and self-published and unlikely to be the real deal. It doesn't matter a bit what's inside, who wrote it, anything. You've already decided because this book reminds you of untrustworthy books you've encountered before.

"Visit a website with a brown on brown color scheme, a stock photo of a nautilus, some flashing graphics, a bunch of widgets and a typeface that's not quite right, and you've already decided how you feel. Entirely based on the fact that this site is like those sites, and you didn't like those sites."

Webpage design process

from stopdesign, A Design Process Revealed

Some excerpts:

1. Research & Discovery

Jumping into any design project before examining the problem or task at hand might spin the wheels, but won’t get you very far. Any project, no matter how big or small, can benefit from research and planning before the work begins.

2. Competitive Analysis

Another helpful task in the process involves looking at pre-existing ideas and executions created by peers, mentors, heros, and/or competitors. Competitive analysis identifies the strengths and weaknesses of those existing designs.

3. Exploration

When tackling a design project with limitless creative boundaries, I like to begin by creating lists of relevant words, topics, and phrases. By creating these lists, I try to gain a broadened perspective of the problem I’m attempting to solve, and often uncover additional ideas and concepts which weren’t so obvious at the outset.


4. Thumbnail Sketching

Once I exhausted the idea branching, I started drawing thumbnail sketches on a pad of paper. Thumbnails are small sketches which can literally be as small as your thumbnail, or as big as a couple inches in width and/or height.

5. Typography

To me, typography is a crucial element in setting the formalness or informality of a design. Evocations of different typefaces are subliminal to most people, but a designer will go to great lengths to ensure the selection and construction of type complements the mood of the piece.

6. Imagery

Imagery is not always necessary in design. In fact, some of the most beautiful designs use type alone. However, selectively chosen photography or illustration can create enormous visual impact for a design, adding dimension, implication, and a deeper level of understanding far beyond a well-written headline or paragraph of text.

7. Execution & Implementation

I started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page. Groups of elements were positioned in correct locations.

8. And More
The ever-changing design process does not end here. This summary is not an exhaustive one. Additional review and approval cycles, more design iterations, and frequent user testing all may be inserted anywhere into this process.

Designing webpages

Ben Hunt writes on the principles of web design

The Golden Rule

Everything that goes into your web site must have a purpose.
Every single element and decision must help users achieve their goals and support the site's goals.

How people use web pages

They move quickly because they don't like looking at the screen
They're impatient - they tend to click the first promising link, and often don't wait for pages to finish loading
They don't like to read, scanning text quickly for clues
They're looking for things to help them do what they want to do

Ideal web design process

1. Know what you're doing
2. Know what the site needs to do
3. Know what the site's visitors want
4. Get a good picture of the personality and style of the web site
5. Sketch out highly successful scenarios
6. Organise views into a site map
7. Sketch the essential features & look
8. Map your visitors' attention
9. Arrange the visual elements to work together

Career Websites by students

Lawyers

Corporate Lawyer

Financial Advisors

Economists

Nursing

Defense Attorney

For Monday

Biggest Mistakes in Web Design 1995-2015

Optional: see also Top 30 Web Design Mistakes

Web design

Gerry McGovern writes on Why Simplicity Is Essential to Web Design

A few quotes:

"We don't pay for visiting a site with our money; we pay for it with our time. The longer we spend on a Web site, the more we pay..."

"Visiting a Web site is about now. We have a particular need and we visit the website to meet that particular need."

"We like sites that resemble sites we're used to visiting, because they are more familiar and easier to navigate."


"If people loved complexity on the Web, then everyone would be using Advanced Search. We'd all be going to the 10th page of search results instead of clicking on one of the first three results on the first page.

We may still end up buying complex products on the Web, but our Web behavior will remain relentlessly simple and hugely impatient.
...
We simply don't have time to waste on complex navigation, convoluted language, or the vanity publishing of navel-gazing organizations."

How can you boost your web site's credibility?

Stanford Guidelines for Web Credibility

1. Make it easy to verify the accuracy of the information on your site.

2. Show that there's a real organization behind your site.

3. Highlight the expertise in your organization and in the content and services you provide.

4. Show that honest and trustworthy people stand behind your site.

5. Make it easy to contact you.

6. Design your site so it looks professional (or is appropriate for your purpose).

7. Make your site easy to use -- and useful.

8. Update your site's content often (at least show it's been reviewed recently).

9. Use restraint with any promotional content (e.g., ads, offers).

10. Avoid errors of all types, no matter how small they seem.