Visual Design

 
Printer-friendly version
Syndicate content
Podcast

Your Web Site Needs a Chiropractor: Alignment in Web Design

skeleton

I woke up this morning with a kink in my neck. The kind of kink that can't be cured. No amount of massaging, twisting, or rolling will get it back in line. And so my head is tilting slightly to the left today. I figure if I rest my chin on my hand, I'll just look like I'm in deep thought, like I'm really considering what you just said. But in fact, I am too distracted by the discomfort of my unaligned vertebrate.

Web Design Implementation Challenges: Page Backgrounds

When reviewing a designer's mock-up of a web site design, my job as an interface engineer is to look for areas of the design which will be challenging or impossible to implement. Such areas aren't always obvious. In theory, a mock-up and the final site should look identical, but in reality a mock-up and a web site are very different animals.

How to Crop an Image Without Photoshop

How to Crop an Image - Cropped image of horses

Nicely-cropped images help any web site look more credible and finished. Unfortunately, not everyone has access to fancy, schmancy photo-editing software like Adobe Photoshop. But don't despair. Beautifully-cropped photos can be yours with a few simple steps.

Design Principles: Contrast

One of the building blocks of visual design is contrast. Contrast occurs when two elements are different. Therefore, when you want two elements to be different from each other, you should ensure that those differences are obvious. Robin Williams eloquently reminds us that

Fancy Fonts Without Images or Flash: @font-face and text-shadow

This weekend I started playing around with two advanced CSS properties I had never used before -- @font-face and text-shadow. The property @font-face allows the embedding of non-standard fonts, resulting in text that is rendered normally in the browser in the font of your choice (achieving the same visual goal of more complex solutions, like sIFR). Text-shadow is a CSS3 property that adds drop shadows to text.

Motion Graphics Delight

Motion Graphics

As humans, we are visual creatures. We understand information best when presented visually (versus verbally). Below we discuss and share examples of how trends have shifted over time in the quest to communicate data effectively.

First there was Edward Tufte who revolutionized how information (particularly data) was presented on paper and screens. To learn more about Tufte's perspective on visual literacy and information design, visit edwardtufte.com.

Design Principles: Proximity

I love my Subaru. I've driven it with no issues for about seven years. (BRB - going to knock on wood.) Despite my love, there are two design flaws that have driven me nuts throughout the duration of those seven years. (Disclaimer: I drive a 2004 Subaru. These features may have been updated on newer models.)

How To Account for Design Details Without Designing Every Page

At Forum One we are always attempting new ways of delivering better looking web sites more quickly and within the budget. One of the techniques that we grown fond of and have incorporated into our process for most projects is creating what we call a hybrid page. A hybrid page contains text and visual elements such as H1 tags and buttons that can be used on many pages through out a web site. These elements are provided from the visual design in a comp that is consistent with the web site existing grid layout. View the hybrid page we developed for Forum One's web site redesign.

Tools for Selecting Color Schemes

I was at a conferences yesterday and the speaker demonstrated several tools that you may find useful for selecting color schemes

Hierarchy - Design's Pecking Order

Hierarchy. Strong, consistent visual hierarchy is key to a quality design.

Q : What is visual hierarchy?
A : Important elements have the most emphasis. Least important elements have the least emphasis. So, a user's eye should move around the page from your most important content to your least important content.

Syndicate content