• Google
  • Search box, with searched words, remains prominent at top
  • Option to view an “advanced” search page
  • Total number of results shown at top
  • Ajax-driven auto-complete for typed follow-up searches
  • Sponsored links at top and right
  • Paginated results
  • Results titles are large, bold, and hyperlinked
  • Searched words are shown in bold in a page snippet, in context
  • URLs shown in a different color under each result
  • Each result allows options to view “similar” and “cached”
  • Visited links are in a different color
  • Related search phrases listed at bottom
  • Search box with search terms repeated at the bottom
  • “Show options” link opens a sidebar for further filtering of the results
• Bing
  • Very similar to google but has some differences
  • Lists the user’s “search history” in the sidebar
  • The history to be cleared or turned off
  • The search history remains intact
  • Pagination unit at the bottom of the results page is more user-friendly
  • Pagination rolls over when moused
• Yahoo
  • Yahoo’s search results page includes a couple of JavaScript-driven enhancements
  • Ajax-driven slide-down unit that appears below the search box when a search query is being typed
  • “Search Pad” which allows the user to record notes on searches
  • “SearchScan” to help protect from harmful websites
• Youtube
  • Easily-accessible filtering options near the top of the search results
  • YouTube search result page lists detailed information
    • Including a thumbnail preview
    • Running time of the clip
    • User rating
    • And age
    • Also if a particular item is part of a series
• Twitter
  • Offers a very clean, intuitive JavaScript-driven interface that includes “Realtime” results
  • Their page also offers a list of “Trending topics” and a “Search tip”
  • Additionally, Twitter gives the user the option to refresh the page after it detects additional results in real time
• Digg
  • Each result on the Digg search results page includes the number of comments that have been posted for that particular story
  • In addition to other features that are unique to Digg, including “share” and “bury”
• Delicious
  • Lists search results in a very simple, list format that includes tags associated with each result
  • Plus the number of times the result has been bookmarked
• Amazon
  • Allows for the results to be sorted based on a variety of methods, including “Bestselling” and “Avg. Customer Review”
  • Amazon’s results page indicates if a book has the “Look Inside” feature
• Ebay
  • eBay’s search results page  allows for easy filtering via tabs at the top
  • eBay also has the option to view the thumbnail preview images in a different size:
  • Other features unique search results page are the options to change the amount of items displayed per page and the ability to go directly to a specific page by entering a number into a text box
• Flickr
  • Flickr  displays results by default in a simple grid-based format
  • Flickr also allows the images to be displayed either in a detail-heavy list-style view or inside of a Flash-based slideshow gallery
• Photobucket
  • Photobucket allows filtering of search results by “Most viewed” and “Most commented”. It also includes a link strangely titled “Follow”, which allows the user to enter their email address to receive notifications when the results for a particular search term are updated. A more appropriate title for this feature would be “Subscribe”, or similar.

For easy reference, here is a list of some of the best practices taken from Smashing Magaine’s Article:

• User should have easy access to the search box for follow-up searches
• Search terms should be clearly indicated at the top, and in context in the results
• Related sponsored links can be included below the search box, near the bottom, or on the right
• Titles should be clickable and clearly differentiated from details
• Visited links should be indicated
• Pagination units should be visibly block-shaped and have a hover effect, to easily differentiate from one another
• Related products, tags, or keywords should be displayed in a non-obtrusive section
• E-Commerce sites should allow the “view” to be toggled between “list” and “grid”
• Advanced search options should be easily accessible
• Should allow re-sorting or filtering of results
• Where possible, results pages should have RSS feeds or “subscribe” options
• For complex interfaces, clear, easy-to-access search tips or instructions should be provided
• Sorting and Filters should be JavaScript or Ajax-driven, where possible
• Popularity or star-ratings should be shown for individual results
• Include an option to increase the number of results per page
• To monitor future improvements, request feedback from users after searches are conducted
• If results span different sections of the website, indicate this by sub-headings or other dividers

So to sum it all up when building your own search engine try to come up with the best combination for your targeted audiance. But the overall goal should be your user’s experience and usability.

Type

Type is the basic building block of any piece, and often one of the most compelling features of design on a page. The major question is how do you know which typefaces work effectively together? There are typically three types of relationships between typefaces: concordant, conflicting, or contrasting.

Concordant – is the relationship between typefaces where you use only one type family without much variety in size, style, weight, etc. This gives the piece a subtle, more formal feel.

Conflicting – this relationship occurs when you have two similar typefaces in weight, size, etc. The similarities are there but the visual attraction is quite different, therefore they conflict with one another.

Contrasting – in this relationship you combine two unlikely and separate looking typefaces and elements that are distinct from one another.  By choosing visually appealing typefaces, you already have a lot of contrast built in. When paired with another typeface that contrast is emphasized.

Even though most designers typically wing type combinations, you can recognize the problem quicker and fix the problem faster when you are able to name the problem.

Categories of Type

While there are thousands of types available in this day and age, most typefaces can be dropped into one of six categories. Knowing each of the categories will help you in deciding what typefaces works well with another, and so on.

Oldstyle – Based upon the hand letter of scribes, Oldstyle always has serifs,including on lowercase letters. Imagine writing with a wedge-tipped pen, therefore giving the letters a slanted angle ending. There is also a thick/thin transition where the stroke of letter has a slight variation. Oldstyle has a diagonal stress (which means you a draw a line through the thinnest parts of the curved strokes). Typically if you are going to have a lot of text that needs read you’ll want to choose an Oldstyle because of it’s easy of readability.

Modern – These typefaces have serifs but are a horizontal lines instead of the penmanship slant of Oldstyle. The serifs are very thin, causing a radical contrast between the thick/thin strokes and giving a perfectly vertical stress. Giving a cold and elegant look, modern fonts give a striking appearance but are not good for large amounts of body copy.

Slab serif - Slab serif has very slight thick/thin transitions if any at all. Slab serif fonts are usually very heavy in visual weight but can be used in an extensive amount of text because of their easy readability. These fonts are often used for children’s books because of their clean, easy and  straightforward look.

Sans serif- “Sans”  means “without” in French, and “sans serif” means “typefaces without the serif endings on the letters.” These typefaces are typically “monoweight,” meaning they are the same thickness all the way around. Alternatively, there are a few sans serif fonts that do have a slight thick/thin transition. Use caution with these fonts because of their similarities between classic Oldstyle fonts. Sans serif fonts have a lot of versatility and can be very helpful with all their font weight options (ex. thin, extra thin, bold, extra bold, heavy, black, etc.)

Script – This typeface is any that tends to look like it’s been handwritten whether via calligraphy pen, brush, or pencil. Scripts are fonts that should be used sparingly, and never in all caps or large blocks of text.  However, Scripts are a font that can look striking when placed in large text.

Decorative – One of the easiest types of font to recognize. Because each of these fonts are so distinctive, their use is rather limited, although anytime you want to make a bold statement or have something stand out, a decorative font is a good choice. When using a decorative font, try to go beyond what your first impression is and see if you can make something new come out of it.

The Contrasts of Type

Going beyond aesthetic appeal, type  enhances the communication of a specific piece. The reader should have a clear concept of organization, purpose, and flow of information.  All of which should be recognizable at a single glance.

Size – A contrast in size can make a big impact, so don’t be afraid.  If you contrast too little, people can think it is a mistake and not what you’re trying to convey, so make it obvious.  Alternatively, you don’t have to make the type large to have a contrast in size. You can have a small line of type on a large page, which still creates contrast.

Weight – Weight refers to the thickness of strokes. Most type families have a variety of different weights. Don’t go for the regular type with the semi-bold counterpart, use the extra bold or black version.  By efficiently using weight, you can visually organize the information on the page (via headings, sub headings, etc.). If you lack the room to put graphics or other visual elements in an otherwise drab and boring newsletter, bold the key phrases or headings.

Structure – Structure refers to how a letter is built.  One major rule to remember is to never put two typefaces from the same category together on the same page.  An easy rule of thumb would be to choose a serif font and a sans serif font until you get the hang of the different type categories.

Form – The shape of the letters is referred to as form. One of the easiest ways to think about it is lower case letters versus capital letters. An example would the form of a “G” capitalized and lower case, some fonts have the letter form the same for both capital and lower case (just slightly smaller).

Direction – The obvious choice for direction would be to type from a slant, but another interpretation of direction would be how the type is set on a page horizontal for straight across and vertical direction for when you use columns.

Color – Color has obvious interpretations as well. When choosing a color to include in your piece, knowing the meanings of colors is helpful.  Warm colors are forward whereas cool colors recede.  Also just having black text is still considered a “color” and is considered the most sophisticated of them all.

Combining the Contrasts

All in all, don’t be wimp, the most effective layouts take advantage of contrast. For good inspiration, leaf through a magazine and check out the articles and advertisements. Verbalize what you see, if you can name the dynamics and relati0nships you have power over them. Before trying a better solution identify the problem. Go ahead, experiment!

What now?

If you’re still confused or need help please don’t hesitate to call Liz at NuRelm 724.430.0490! Or email Liz at liz@nurelm.com.

In steps CSS3 …

The newest family member to the style sheet family is CSS3. With the possibility of new and exciting things when it comes to designing and how you design, things look hopeful on the horizon. Word on the street is that with CSS3, you can create more diverse styles sheets for large variety of occasions and much much more.  All of this information can be found at css3.info more in depth and detail.

If you don’t want to wade through all the details, here’s a summary for Web developers and Web users broken down into website parts:

Borders

• border-color: in Firefox there is now an option for a fading gray border, a very common effect that is now achieved in somewhat kludgy ways.
• border-image: this feature can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
• border-radius: a new feature in CSS3, which allows you to create round corners on box-items (very sexy stuff … if you’re using Firefox or Safari, check out how that works here, a page that helps you roll your own “themes” on the site of our favorite Javascript library, jQuery).
• box-shadow: another new feature in CSS3, gives you the option of setting up a shadow on a box-item and varying the options … once again, a very common activity that is currently done in unsettlingly dirty ways.

Backgrounds

• background-origin/background-clip: this property is going to be used to calculate background-position of a background in a certain box. A feature in this property is used to determine whether the backgrounds extends into the border or not.
• background-size: You can specify this size in pixels, width and height, or in percentages of a background.
• multiple backgrounds: this snazzy new feature allows the implementation of multiple backgrounds on one element.

Color

• HSL (Hue, Saturation, Lightness): using hexadecimal colors as well as HSL colors are going to be implemented in CSS3.
• HSLA (Hue, Saturation, Lightness, Alpha): similar to the HSL feature it allows a fourth value, which sets the Opacity (via the Alpha channel).
• Opacity: this feature can used by implementing HSLA & RGBA colors.
• RGBA: similar to the HSLA feature where there is now an alpha channel option to create opacity.

Text Elements

• text-shadow: eliminates the need for Photoshop when all you want to do is a simple shadow.
• text-overflow: for this particular feature sometimes when text will have to be clipped you can place a  “…”  to show there’s more text.
• word-wrap: this feature allows the extremely large words or sentences to wrap much cleaner and more efficiently than in previous versions.  For example if the text is in a box you can constrain it to said box.

User-interface

• box-sizing: you can force the browser to instead render the box with the specified width and height.
• re-size: yet another new feature of CSS3 that allows you to deem a box re sizable.
• outline-offset: this new element allows the offset to be rendered away from the edge of the specified element.

Selectors

• attribute selectors:[att^=val],[att$=val] and [att*=val] are the three new attribute options added to the mix in CSS3 to matching substrings in the value of an attribute.

Other Modules

• media queries: this new feature makes it possible to change style sheets based on for instance the width and height of the viewport (such as firefox, iphone, etc.).
• multi-column layout: this feature allows text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns.
• web-fonts: by using @font-face website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.
• css speech: this feature is used for creating style in speech synthesis in aural user agents (e.g. screen readers). There were several additional properties added to this new media type.

In short, it looks as though there are a lot of exciting things on the horizon for Web designers and Web surfers alike.  However, you may not want to go right out and create your first rounded-corner, drop-shadow enabled Web page quite yet, as it’ll be a while before browser software writers agree on, let alone implement, these new ideas (here’s a slightly dated, but pretty darn good compatibility table, in case you’re interested in the details).

But, Rome wasn’t built in a day … and in fact CSS3 will take way less time to adopt than it took to build Rome, so keep your eyes peeled.

Reviewing C.R.A.P.

Be bold.  Leave plenty of blank space for a place for the eyes to rest.  Be asymmetrical,  it typically makes your efforts stronger.  Don’t be afraid to make text or images big or  small.  Proximity is where related items should be grouped together.  Separate items that are not directly related.  Alignment: make sure to keep pieces unified and keep alignment with other elements on the page. Repetition is the stronger form of being consistent,  see what you already consistently use and make one of the elements stronger.  Contrast draws the eye to the page, the strong black versus white space.

Extra Tips & Tricks

Identity Packaging - the most prominent features of an identity package are cohesive repetition throughout.

Business Cards – Use second colors sparingly. Talk to the print shop on how to set up your business cards on a page.  Standard business card size is 3.5 inches by 2 inches (vertical or horizontal).  Some pitfalls to avoid on business cards are to keep things out of the corners,  avoid using Times, Arial, or Helvetica typefaces.  They’re dated. Try to avoid using 12-point size font business cards. Typically, 10-point or smaller is used.  Finally, don’t feel like you have to use the entire space. There’s no need to have the words email or website on the card. A left or right alignment gives a more professional look than a center alignment.  Use periods instead of dashes or parentheses, it gives a much cleaner look.

Letterhead & Envelopes – Use a similar format on the letterhead, envelope and business card.  Make one element dominant, but avoid having the boring center aligned across the top layout.  If you make a second page take a small element from the first page and use it alone on the second page.  Since you’ll invariably be faxing or copying your letterhead avoid dark or speckled paper.

Flyers - With flyers the sky is the limit. You want your piece to stand out because it has to compete with all the other readable junk out there.  Most of all you want to call attention to your headline.  Some pitfalls to avoid: boring typefaces, putting characters in boxes, instead of hyphens or bullets try zapf dingbats instead, don’t center everything (boring),  avoid  ho hum gray contrasts, watch your line breaks so there are no unnecessary hyphens. Try using interesting new typefaces. Use a big graphic element or typeface in a huge way.  If you draw the reader in with interest they will read the text.  Try to use subheadings that contrast so the reader can scan,  make a strong focal point,  use repetition for typefaces even if the typeface is bold or different.  Finally, make sure to choose one kind of alignment.

Newsletters - The main element when designing a newsletter is consistency. Each pages should look like it belongs.  That doesn’t mean everything needs to look exactly the same, though.  Also don’t forget your white space. Your flag or masthead sets the tone for the rest of your newsletter. It should tell your readers who you are.  Use contrasting type, but use your type consistently throughout the newspaper.  Make sure to have your headlines and sub heads bold and contrasting so the reader can skim.  Avoid using a sans serif typeface for the body text as it’s hard to read.

Brochures – Before making a brochure you should sit down and fold a piece of paper to determine how you want your brochure to look.  Choose the style for the front and back panel and how it will open.  Be careful though, the fold measurements aren’t the same on the front as they are on the back.  Be aware of the folds. You don’t want information getting lost in the folds.  You will need a “gutter” to keep you from losing text in the folds.  On the other hand, feel free to have graphics flow from panel to panel. As always keep alignment consistent throughout the whole brochure and keep the text size under 12-point.

Postcards – Postcards are a great way to grab attention.  Be different.  Use an odd sized postcard to make it stand out.  Be specific with your message but keep it brief.  Use color to attract the eye. The guidelines for business cards can also be applied to post cards.  Be brave in your design and don’t forget your white space.

Newspaper Ads -  White space is a must. It gives the reader something to land on.  Be clever with your headlines, be clear on your purpose, and be brief.  Readers want simple and to the point.  Avoid reverse type (white type on black background).

Websites – As always repetition and clarity are important. Websites must be inviting and easy to navigate. Consistency is also a key factor is designing websites.  Line lengths of text are actually shorter than what is used on paper.

What now?

If you’re still confused or need help please don’t hesitate to call NuRelm 724.430.0490!

Preview of next article:

How to design with typefaces and make them work effectively.

proximity shows how the text is related to the rest of the layout, contrast is the difference in text weights used, alignment is how all the text is left aligned at the same margin, and repetition is how the color is used throughout the layout.

The Four Basic Principles

As taken from Robin Williams’ The Non-Designer’s Design Book, there is an awkward yet memorable acronym to recall the basic design principles. The four principles are Contrast, Repetition, Alignment, and Proximity, or C.R.A.P for short. Very rarely will only one of these principles be used, since all are really interconnected with one another.

Contrast

The point of contrast is to avoid putting multiple elements together that are considered similar. Contrast is one of the most effective ways to put visual interest into a page. The most important rule in order for contrast to be effective is that it must be strong. To add contrast, you can use your typeface choices, line thickness,  colors,  shapes,  sizes,  space, etc. By adding these elements into your piece, it draws your reader in and aids in the organization of information for the reader.  Some things you should avoid when using contrast are to stay away from the “too similar.”  Brown text against black visual elements is an example. Another example is using two similar typefaces.  Make each different and it will create a much more pleasing piece.

Repetition

When you repeat visual elements of a design throughout the whole piece, you create unity, which makes a stronger, more organized piece.  Elements such as a bold font,  thick line,  color,  formatting,  spacial relationship, etc.  are some things you can use to tie your piece together.  The visual element can be anything the reader will visually recognize. Another way of thinking about repetition is consistency.  When you keep all your headers the same size and use the same font,  you are implementing repetition.  One point to avoid with repetition is that you don’t want to be overwhelming and overbearing. “For instance,  if the woman is wearing a black evening dress with a red hat,  earrings, red lipstick,  a red handbag,  red shoes and a red coat – the repetition would not be a stunning and unifying contrast -  it would be overwhelming and the focus would be confused,” says Robin Williams.  The point is to make the piece look interesting.  Once you do so, the more likely it will be read.

Alignment

It has been stated that with alignment, nothing should be placed on the page arbitrarily. Every item on the page should have a visual connection with something else on the page. With alignment,  even if certain elements are separated by space,  there’s an invisible line that connects them.  Just by using careful alignment,  you can create a sophisticated, serious,  funky,  or formal look.  So when laying out your work,  be conscious of where things are placed and aligned,  as  it can make a huge difference. When using alignment try not to use more than one alignment for text,  such as centered and right aligned,  in one layout.  Also, try to  break away from using the standard center aligned text unless  you want a formal and sedate feel.

Proximity

The idea behind proximity is the grouping of related elements together.  This is so that the items can be seen as one cohesive group. Organizing is the primary purpose of proximity.  Some points to consider when using proximity: avoid too many separate elements on a page, don’t put items in the corners or the middle of the page, avoid leaving equal amounts of white space between elements unless each element is part of a subset, don’t let a split second of confusion occur with the relationship to a headline, and finally, don’t create relationships with elements that don’t belong together!  Using this principle will give your readers a logical progression defining a beginning to a logical end.

Pulling it all together!

So when it comes down to making a newsletter or sending out a memo, take your time! Remember to use your C.R.A.P. principles. Everything should be placed where it is on a page for a reason. If you still need help,  please don’t hesitate to call NuRelm – 877-268-7356.

Preview of next article:

A brief review of our previous content combined with many tips and tricks to help with all of your design projects.