Inerd Hussein - tagged with design

5 Simple Tricks To Bring Light and Shadow Into Your Designs

Mon, 20 Apr 2009 15:45:00 -0600

There’s just no escaping light and shadow — it’s everywhere you look. Everything you see reflects light and casts some sort of shadow. Visually, light and shadow help us make sense of what we see and help us understand texture, dimension and perspective. So, as we try to make our designs on the Web more natural, moving and intuitive, a good understanding of light and shadow is pretty important. Here are 5 ways to better use light and shadow to polish your page designs and make them stand out on the screen. A Quick Anatomy Of Light And Shadow In the simple diagram below, we can see that the light source is coming from the left. The highlight is where the light is strongest, and the shadows fall on the side furthest from the light source. The appearance of light and shadow tells us a lot about the surfaces and textures in the image.

But what does this have to do with Web design, you ask? If you’re trying to design rich, tactile interfaces and websites, light and shadow are your friends. In the same way that many classic artists made their paintings jump off the canvas, you can use light to give your designs depth and visual interest. Let’s get into it. 1. Using A Light Source Perhaps the most important part of working with lighting is knowing where the light(s) is coming from. The light source will most likely determine where the highlights and shadows fall (although with Web design you can afford to bend these rules in places). If you’re working in Photoshop, you can use the “global light” effect so that all of your lighting effects follow the same light direction. Controlling the source(s) of light in your designs (even if just with a linear or radial gradient) can help create atmosphere in your page designs. It can also help direct the eyes to a focal point in the design. Examples on the Web Campaign Monitor use a burst of light rays that conveys the feeling of a sunrise behind the design.

Icebrrg use light to submerge its website deep underwater.

Mike Precious uses more than one light source to add visual interest and to tie in with the desk-lamp lighting style.

Deaxon use a subtle light source behind its logo to give the logo visual prominence on the page.

Gradients In the real world, very few things have a flat tone. Light and shade are on everything. Subtly using gradients is a great way to provide depth and makes things come to life on the screen. The key with gradients is not to overdo them. If you’re using Photoshop, make use of layer styles for your gradients. This gives you the freedom to edit them at any point; it also means that if you resize the element, the gradient will rescale too.

Examples on the Web nclud’s website is a lesson in subtle yet effective use of gradients to separate and organize content.

CSS Ninjas appears to use flat colors at first glance, but each colored area has a subtle gradient, which gives it texture.

Highlights Highlights can help balance shadows and should be used on the edges of objects closest to the light source. Highlights are often overlooked because when used effectively, you don’t even notice they’re there. And while not suited to every situation, a tiny highlight can make all the difference in polishing an interface. The “sharper” the highlight, the shinier the surface will appear. To really appreciate highlights, we need to zoom in a bit close. A good trick for adding highlights is to work at 200% or more, because at 100% it can be hard to see what you’re doing clearly. Examples on the Web Icon Dock and Newism both use a semi-transparent white line on the page element’s top edge to give it a highlight. It’s barely noticeable but adds a bucket of polish to the design.

You’ve probably seen Apple’s website already. However, you may not have noticed the lovely highlights at the bottom of the navigation items, which help make the words look recessed.

Basic Shadows Like gradients, drop-shadows have become a staple of most Web designers. Shadows can really add visual depth and texture when used the right way. The key is not to overdo it. The qualities of a shadow depend on the light direction and intensity, as well as the distance between the object and the surface where the shadow is cast. The stronger the light, the darker and sharper the shadow. The softer the light, the softer the shadow.

Examples on the Web When it comes to online examples of drop-shadows, there are simply too many websites to choose from. When used cleverly, they can add a touch of dimension to even the most minimal design. LinkedIn adds a very subtle shadow to the bottom of its sidebar elements to create the illusion of depth.

Google — with perhaps the hardest-working page on the Internet — still invests in the subtle use of shadow for its search page.

Advanced Shadows You can do a lot beyond basic drop-shadows to give elements a third dimension. Longer shadows are a great way to change the spatial relationship between objects on a page. In the examples below, the same Coke can is given completely different positions in space depending on its shading and shadow.

Examples on the Web Emotions by Mike cleverly uses shadow (and light) to turn the flat page into a floor.

Superkix uses shadow to float sneakers “above” the website. The shadow moves when you resize the page, as if the light were shifting.

Sofa creates a floor on the white background with great use of both light and shadow.

Further Resources Area for further articles and related resources.

Photoshop Cafe Tutorial on casting shadows in Photoshop. Advanced Shadow Techniques Working with shadows in Photoshop. PSDtop Blog Understanding drop-shadows. Peachpit Light and shadow in Photoshop. Aviva Casting realistic shadows. PSDtuts Using light and shade to bring text to life. Build Internet Light and shadows: feathering gradients in Photoshop PSDtuts Using gradients to make light and shadow… and a coffee cup!

About the Author Rob Morris is an Australian designer based in Japan. He freelances for clients all over the world under the moniker Digitalmash. You can follow his adventures on Twitter. (al)

Post tags: design, light, shadow, techniques

Beautiful And Creative Logo Designs For Your Inspiration

Thu, 09 Apr 2009 15:40:00 -0600

Last week we already presented our first selection of beautiful, clever and creative logo designs. This post presents the second part of our selection, featuring even more beautiful and creative logos that will hopefully inspire you or at least give you the idea of what the current logo design trends look like. Just as last time, we focused on logos that use creative methods to represent the brand through color, shapes, and typography. Every design presented below tells you something about the company that it is supposed to represent. Also note the brilliant color palletes and unique patterns used in many of these. Finally, pay attention to the typography, especially font selection and coloring. Below you’ll find a collection of 40 more beautiful and creative logo designs to inspire you. Browsing through the showcase, you will notice many trends. Some of these include the usage of simple shapes to create something complex, origami shapes, coloring and transparency trends, and many more. You may want to take a look at the post Logo Design Trends 2009 for further reference. 40 Creative Logo Designs

Further Resources You may want to take a look at the following related posts:

Logo Design Trends 2009 (logoorange.com) Logo Design Trends 2009 (1stwebdesigner.com)

About the author Matt Cronin is a freelance web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

Post tags: design, Design Showcase, inspiration, logos

15 Essential Checks Before Launching Your Website

Tue, 07 Apr 2009 15:29:00 -0600

Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world. This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release. Favicon A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head. And if you have an iPhone favicon:

Titles And Meta Data Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content. 10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.

Cross-Browser Checks Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.

Cross-Browser Checks: Services and Test Suites 7 fresh and simple ways to test cross-browser compatibility

Proofread Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.

Writing for the web

Links Don’t just assume all your links work. Click on them. You may often forget to add “http://” to links to external websites. Make sure your logo links to the home page, a common convention. Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?

W3C Link Checker

Functionality Check Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.

Silverback - guerrilla usability testing

Graceful Degradation Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.

Validation You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&” for ampersands.

10 reasons your code won’t validate (and how to fix it) W3C validator

RSS Link If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar. Put this code between your tags.

Analytics Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.

Sitemap Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is http://www.mydomain.com/sitemap.xml. If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.

Defensive Design The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in. Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.

404 error pages reloaded

Optimize You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources. Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.

Best practices for speeding up your website Web page analyzer

Back Up If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.

Print Style Sheet If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed. To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your tags.

Printing The Web: Solutions and Techniques A List Apart: Going to print

Download the Ultimate Website Launch Checklist! Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released. You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.

What other checks would you list? Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments! About the author Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter. (al)

Post tags: checks, design, launching, release, usability

5 Must Know Web Design Polishing Techniques

Mon, 06 Apr 2009 02:02:00 -0600

There are a range of simple techniques that can be employed by web designers to add the finishing touches to a website design, giving an extra level of detail that makes the design jump from the screen. Jacob Cass takes a look at five of these polishing techniques that can be easily implemented in your next design project to give dramatic results.

First and foremost, this article is not for advanced web designers, as you will more than likely know these tips but you may be surprised by one or two tips, who knows? These tips are focused on making your website more ‘polished’ which I will explain by outlining some techniques I have used to create this chocolate gift basket website. 1. Use Anti Aliased Text

Something that is often over looked when designing for the web is the use of Anti-Aliasing in your image based text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of your ‘Character’ panel. You can choose between None, Sharp, Crisp, Strong and Smooth. The best way to see what works best is to experiment as different fonts and sizes will yield different results however the sharp setting usually prevails in most cases. 2. Use Subtle Contrasting Stroked Borders

Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. These stroked borders really add that extra crispness to the design as it gives extra contrast to the surrounding elements and gives the design more depth. Notice the zoomed-in screenshot above; see the inner purple lines that run alongside the inside of the boxes? You can add these 1 pixel borders by using your stroke option found in the ‘Blending Options’ or ‘Layer Styles’ panel. This technique also works great for large text. 3. Use Subtle Gradients

Gradients are popping up everywhere in web design and for a reason - they add depth and real aesthetic to the design. Unlike print design where gradients seem flat, on the screen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen so to speak. Use the ‘Blending Options’ or ‘Layer Styles’ in Photoshop to create these nice subtle (emphasis on subtle) effects. 4. Use A Grid

Although it may sound like basic knowledge, I know for a fact that not all designers use grids however they are extremely useful and in my opinion, vital. Alignment and spacing in web site design creates order, organizes the page and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid template is from http://www.960.gs). Notice how the logo and all of the text is left aligned? Also, take note of the even spacing around the boxes and text. Use the guidelines in Photoshop to ensure all of your elements are aligned which can be done by dragging ‘rulers’ from your rulers tab. Press Ctrl+R to turn rulers on. 5. Use Levels, Curves & Unsharp Masking

In web design, photos, icons and images are usually quite prominent so you should ensure that they are of the utmost highest quality. Check the color balance, sharpness and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Photoshop’s ‘Levels & Curves‘ & ‘Unsharp Masking‘ tools. Click on the links provided to show how to do this - these functions go beyond the scope of this article. Anyway, hope these tips help in polishing off your next website. Do you have any other not so well known web design polishing tips? Similar Posts

Line25 Sites of the Week for April 3rd 2009 How to Create a Lifestream of Your Online Activities Line25 Sites of the Week for March 27th 2009 Line25 Sites of the Week for March 20th 2009 The Harsh Truth About Life as a Designer

Redesigning my blog and lifestream

Sun, 22 Mar 2009 13:33:00 -0600

nerdsane

in the process of redesigning my lifestream and blog into this,

Redesigning my blog and lifestream

Sun, 22 Mar 2009 12:33:00 -0600

nerdsane

in the process of redesigning my lifestream and blog into this,

Cool business theme in 3 color variations

Sun, 22 Feb 2009 14:04:00 -0700

Hi, since I’ve been quite busy designing for clients I’ve managed to find some time to make a very interesting psd theme and i thought why not show it to you all and who knows maybe if you like it then you will buy it from me. Now you’ll wondering why I’m doing this, well I’m [...]

Related posts:Projects coming up Hi, I’m working on a few personal projects in between...3 x 1000 full color, double sided business cards Contest Do you love free stuff as much as i do,...Cool list of tutorials, resources and more Hi, the past few weeks I’ve been watching...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

22 Website Designs Inspired by Apple.com

Tue, 17 Feb 2009 10:34:00 -0700

It’s well known that Apple is one of the most creative and innovative companies in the world, so it’s no wonder that many software companies and web designers would choose to follow Apple’s style of branding. The Apple website is one of the best websites out there due to its ease of use, functionality and the beautiful environment that it creates. I looked at websites that use one or more design elements inspired by Apple.com. Some of these sites sell Mac software and apps, so it makes sense for them to keep the same Apple look and feel. Consider this though: How many software companies that develop for Windows, choose to brand their websites to look like Vista? I have included a few screenshots of the Apple website, just in case you haven’t never seen it before. Apple.com

Icon Designer
iSlayer
Versions
Checkout
Small Transport
MacRabbit
280 Slides
Disco
Warehouse
Cha-Ching
RapidWeaver
DeskLickr
Tangerine!
1Password
Jumsoft
Roxio Toast
CandyBar
Cultured Code
Anxiety
Tao Effect
TaskMate
The Invoice Machine

Chad Mueller owns and runs the design inspiration blog; Inspiredology. He is also a freelance designer who enjoys working on websites, blogs, logos and anything to get his creative juices flowing. Do you know of any other good examples? Please share with us…

How to Create a Professional Logo

Mon, 16 Feb 2009 11:03:00 -0700

A professional logo can enhance a company, an organization, or a product. On the other hand, an unprofessional logo can ruin a brand and mar an otherwise good designer’s portfolio. Many logos in use are unprofessional and carry all the tell-tale marks of an amateur or a beginner. Everyone thinks they can design a great logo, but simply knowing your way around Photoshop is not enough. Here are some insights into the process and workflow of effective and modern logo design. With these tips and your creativity, you can make your logo designs shine with the very best.

Design: Sketch and Brainstorm A lot of beginners jump right onto the computer to create a logo. However, more often than not, a lot of time is spent fiddling with special effects and filters. While this can be useful, it usually means that the thoughtful design and artistry of the logo itself has taken a back seat. A better way to start is to get a fresh sheet of paper and a pencil. Think about the meaning and the feeling you want the logo to impart to the viewer. Is it for a high tech game company or a historic non-profit organization? Should it be complex or simple? As you are thinking, sketch and doodle your ideas. Don’t worry about making everything perfect. You just want to let your natural creativity flow without your computer software taking over at this stage. As you sketch different options, start eliminating the designs that seem weak or inappropriate. When you are satisfied with your ideas, move to the computer. (For those of you with graphics tablets, you can try sketching your ideas directly on your computer, but try and keep away from special brushes and effects.)

If you are designing a logo for a customer, keep in mind that they might not like all your ideas. So, before spending too much time on each design, you may want to present some work-in-progress designs to gauge their level of interest. This can be a huge time saver, especially if your customer has not given you a lot of direction or if they tend to be very particular.
Build: Vector Graphics Ah, the world of vector graphics. This is a topic that many beginners (and some professionals) find confusing. In recent years, some software such as Photoshop, Paint Shop Pro, and Fireworks have blurred the lines between vector and bitmap graphics. Common image formats like GIF, JPEG, BMP, and TIFF are all bitmap formats. Digital photos are perfect examples of bitmap graphics (also known as a “raster” images) - because they are made of dots which are also known as pixels. Bitmap graphics have a specific resolution. If you zoom in on a digital photo, you will see the individual pixels. You can scale a bitmap down in size, and get some decent results, but increasing the size of a bitmap means that you are blowing up the pixels and you will get mixed results depending on the amount of enlargement. Photoshop, Pixelmator, Paint Shop Pro, and Painter are all good examples of applications that are primarily designed for bitmap graphic creation and photo editing. They are not the best tools for logo design.

In contrast, vector graphic files are not made of dots or pixels. Instead, they are mathematical formulas for shapes. Vectors can be enlarged or reduced, to any size, with no loss in detail or sharpness. For example, the lines and curves of a vector graphic will look equally as sharp on a small business card as they will on a giant advertising billboard. Professional logos are made with vector graphics so that they can used for commercial printing, web sites, television, and all other forms of media. Vector-capable file formats include EPS (encapsulated postscript), PDF (portable document format), and AI (Adobe Illustrator).

If you learn to use vector-specific drawing software to create logos, you will be able to create perfect straight lines, smooth curves, and accurate shapes quickly and easily. Excellent commercial vector drawing programs include Adobe Illustrator, Lineform, FreeHand, and Corel Draw. In addition, there are excellent free alternatives including Inkscape which is shown below.

Using your pencil sketches as a guide, use your vector drawing software to recreate a crisp version of your ideas. If you are new to using vector software, take a few moments to learn the basics of using the pen tool to create lines and “bezier” curves. Keep in mind that vector shapes can have a “stroke” of varying thickness (the outside line of the shape) and a “fill” color or pattern (the inside of the shape).

Decorate: Color Schemes When thinking about “fill” and “stroke” colors, try and use color combinations that make sense for the logo. For example, you might not use bright pink and orange for an investment bank. For color inspiration, look online at Adobe’s free Kuler service or pick up a copy of Jim Krause’s Color Index 2.
Versions: Black and White After you’ve made brought your logo to life with color, consider how it will look when photocopied or faxed. If it looks muddy and incoherent when converted to black and white by a copier or fax machine, its time to get back on the computer and make a separate version of your logo that is purely black and white and ready for anything. The black and white version may differ somewhat from the original, but it should retain the overall look and feel. You may find yourself converting a solid shape to a hollow shape or vice versa.
Planning: Media While developing a logo, keep in mind your target medium. For example, if a logo will only be displayed on a web site, you might jazz it up with multiple colors, fades, or even special effects. However, if a logo will also be used for commercial printing, you need to consider the complexity of the logo and the expense that multiple colors and effects will add to the printing costs. For some logos, you may want to create a web version and a less elaborate print version. In the printing world, each color is called a “spot” color and the more colors that are required, the more expensive the printing. You should also take into consideration your “trapping” settings for your logo graphics. Trapping refers to the space between two colors. On a printing press, each color is usually printed separately and there can be some slight movement of the paper and machinery as each color is printed. These slight movements can cause thin hairline blanks between colors and even half of a millimeter will be noticeable if you have 2 colors that are designed to touch each other perfectly. This is equally important for colored shapes that are outlined in black. In your design, you can create an overlap (known as a “choke” or a “spread”) to occur between adjoining colors to reduce the chances that movement on the printing press will be noticeable. However, if you look at a lot of professional logos, you will notice that different colors do not always touch and there is frequently blank space built into the designs. Blank space (”white space”) is not only an important visual tool but it can also eliminate trapping worries.
Refine: Typography Words that form a part of a logo are just as important as graphics. A lot of beginners will use any old font for a logo. However, the lettering style, fonts, and even the case (uppercase, lowercase, mixed) in a logo can have a dramatic impact. Never underestimate the need to use effective typography. Also, if your logo uses a font, use your software to convert the letters into shapes/outlines. That way, if you need to send the vector file to someone, they won’t need to have your font installed on their system.

Written exclusively for WDD by Derek Underwood, a professional web designer and software developer. You can read more about Derek and contact him at his website: http://www.derekunderwood.com Logo design is interesting and challenging. Have you designed some logos? Share your logo designing experiences and tips.

20 Awesome Valentine’s Day Advertising

Sun, 15 Feb 2009 09:31:00 -0700

As you know all that Valentine’s Day is just around the corner, at this occasion I have previously showcased some really 23 Valentine’s Day Wallpapers to spice up your desktop for your inspiration, now again at that time of Valendine’s Day here’s a collection of 20 Beautiful Valentine’s Day Advertisements from leading companies. I hope you enjoy this collection of Valendine’s Day Advertisements and if I’ve missed your favorite, please let me know. Ad of ADEL Saatchi & Saatchi for Procter & Gamble

iPod Shuffle Valentines Promotion

Candy Gram Fundraiser Poster

cinecittadue Doves

How to Revive your Love this Valentine

Celebrate this Valentine’s

From YOU to YOU

British Airways Valentines Day

Valentines Day

Portuguese Cardiology Foundation Valentines

Sheba Valentine

Postit Heart

Dom Francisco Restaurant Valentines Day

123 Fleurscom Planes

Valentine Avon

Luxury Hotel Brochure

Happy Valentines Day

Heineken Valentines Day

You May be Interested In More Interesting Posts:

30 Unforgettable Christmas Advertisements Around the World

15 Incredibly Useful Wordpress Plugins to Boost your Blog

23 Valentine’s Day Wallpapers to spice up your desktop

27 Wonderful Typographic Posters For Inspiration

23 Very Conceptual & Terrific Dark Art Photos

21 Must Have Web Apps for Designers and Developers

Give a Hand to Wildlife - 23 WWF Most Heart Touching Advertisements Around the World

18 Awesome Christmas Lights and Imaginary Photos

23 Tremendously Useful & Free Web Resources to Increase your Productivity

34 Mindblowing Advertisements of Shoe Brands, I have ever seen!

22 Most Striking New Year Wallpapers for you Desktop!

25 Outstanding Christmas Wallpapers to Decorate your Desktop!

25 Very Creative Movie Posters of 2008

DryIcons - Valentines Free Icons!

Sat, 14 Feb 2009 00:15:00 -0700

February is all about romance and love and one special day: Valentine’s Day! The day when candy, flowers and cards are exchanged between loved ones. In that manner, DryIcons are presenting their brand new free icons set, called “Valentines”. Because this holiday is so special to all of us . ” Valentines” free icons set comes in 32-bit transparency PNG and 32×32px, 48×48px, 64×64, 128×128 and 256×256px size.

Free Textures from TextureKing

Tue, 10 Feb 2009 22:56:00 -0700

TextureKing is a project created and maintained by REH3design. Throughout the site you will find a growing repository of high quality texture photos that are free for personal and professional use.

50 Free Rusted Metal Texture Backgrounds

Tue, 10 Feb 2009 20:45:00 -0700

If you ever heard the phrase ‘you can find inspiration everywhere you look’, then this article is for you. Today we look at rusted metal textures as both an unusual source of inspiration as well as an option for unique backgrounds. Textured backgrounds are a great way to add an extra dimension to any graphic design project. Magazines and printed media can resort to textured paper for added impact however, this is impossible to do on the web, and the closest we can do is adding texture to simulate this effect. We’ve compiled a list of 50 free rust metal texture backgrounds that will really look great on your websites, blogs, Twitter backgrounds or even wallpapers. Most of these are available under a Creative Commons License requiring attribution however, check each source for any specific details.

Source: GrungeTextures

Source: Flickr

Source: GrungeTextures

Source: Flickr

Source: GrungeTextures

Source: Flickr

Source: GrungeTextures

Source: Flickr

Source: Flickr Have you used textures like these in your projects? We’d love to see them, please post your links below…

Coquette - Free icon set contains 50 high quality icons

Sun, 08 Feb 2009 23:49:00 -0700

Coquette part 2, the better, improved version of one of DryIcons’ most downloaded and most popular free icons sets. they powered this free icons set with 50 brand new icons, mostly demanded by users. This playful free icon set contains curvy and colorful free icons made with one goal, to get all the affection to your projects. These free icons flirt with style! “Coquette” free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.

10 Web Typography Rules Every Designer Should Know

Sun, 08 Feb 2009 21:12:00 -0700

When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text. No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do. That alone should make typography, the art of arranging type, a priority for any web designer. In this article we take a look at 10 easy rules to keep in mind when designing your next web project. 1. Read through the text yourself With a design like JonesingFor a designer without a great grasp of the text would have struggled to put together the typography that makes this site really work. As you tackle your own typography, you probably don’t have to worry about writing a site’s text — but you do have to read it!

Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. But reading through the text provides at least a basic idea of how the text can be integrated into a website, avoiding the disconnect between the writing and the design of a website. You can kick your typography up yet another notch, if you can read through the text once it’s in place in your design. Take special note of the space around the letters. Do you have any unusually big spaces that look odd? A little careful typography can eliminate those issues. You can also get an idea of lines that might be too long to easily read, awkward line breaks and similar issues. 2. Dump Lorem ipsum as soon as possible Do you think you could have designed Jesus Rodriguez Velasco’s website without the actual text? The site is heavily dependent on the written word — and very specific words too. Even the body text got special attention with a drop cap and some other tweaking that just wouldn’t have been possible with Lorem ipsum.

Unless the text of your website is actually Lorem ipsum, dummy text will bear no similarity to the real thing. That means that any tweak you might make to the text — or the design surrounding it — will have to wait until you get the real thing. Asking for (and getting) text from your client as early as possible in the process will give you the ability to match your overall design and your typography. 3. Show a clear hierarchy

When you arrive at Rik Cat Industries, you know immediately where you should start reading. Even though there are a few links at the top of the page, Rik’s welcome catches your eye first. It’s much bigger, using typography to establish a clear hierarchy. Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that hierarchy — just as Rik’s does — as long as you know your hierarchical order ahead of time. By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide. Your design’s hierarchy goes beyond just the typography you employ, of course, but since users almost always start with the text, it makes sense for designers to do the same. 4. Pay attention to both macro and micro typography

Relying entirely on typography for their front page, the Crowley Webb and Associate’s website was designed with two factors in mind: both macro and micro typography. Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own. Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn’t legible, there’s no point in proceeding. Crowley Webb and Associates addressed this question through both careful writing and spacing out those words that the site would highlight. But macro-typography provides you with the opportunity to make your text more than well-spaced: it’s the chance to make it look appealing and a part of your whole design. The choice of typefaces and colors on this website create a viable whole. Ignoring either facet of typography is detrimental. 5. Take care with type colors

It would be so easy to lose text in the background of ArtofElan, especially the bright red on dark red combination used by the designer. When a web designer works with colored type, care is absolutely necessary, there’s no guarantee that a red on red combination, or even a yellow on red combination will be visible. After all, everyone has visited a website where the text seemed to be only one shade off from the background color and gotten a case of eye strain when they tried to read it. The easiest fix for this situation is to make sure that the color of your type is drastically different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well: something along the lines of a dark blue on a light pink will get the job done. Reversed out text is pretty tricky… while you can work with light pink text on a dark blue background, you’re more likely to get a complaint about it. 6. Get serious about your CSS

If your CSS is solid, you can move between pages of your website seamlessly, just as the different versions of Hutchouse.com rely on different stylesheets to create some impressive effects. Even if you don’t take things as far as Hutchhouse, CSS can help eliminate amateur typography issues like changing up typefaces and sizes between pages. CSS can provide easy consistency between your typography across the entirety of a website. If you are consistent in how you use type, however, breaking that consistency even a small amount can make whatever you wish to highlight truly stand out, just like establishing and then breaking a grid can make for an effective design. In web typography, keeping your fonts consistent can be a simple matter of CSS. 7. Ditch the centered text

Choosing an alternative to centered text can make a website design easy to read, just like DesignCanChange.org. Opting for centered text, especially on a page like this, would make for a problematic page: the jagged edges centering creates on each side make it much harder to read and there are plenty of opportunities for perfectly centered text to wind up distorting the rest of your designs on different displays. In some circles, centered type is only one step up from using Comic Sans in a website design. You might consider it for a headline, but in general, aligning your text to the left will make your readers much more comfortable, unless they read from right to left. 8. Deal with smart quotes and other symbols

Luigi Ottani’s site showcases what careful attention to quotation marks and other symbols will get you: a complete lack of problems when the site displays those symbols. Many websites are dotted with symbols a browser cannot display. It’s a legacy of the fact that most of the text a web designer works with was probably written in Microsoft Word or another piece of word processing software that makes all sorts of little changes to text without the writer paying much attention. One of the worst changes is smart quotes: the curly quotation marks Word automatically substitutes for straight quotation marks. Another problem area comes when you work with text written in another language: accents and umlats can cause just as much trouble as Word’s helpfulness. If you just copy and paste text with such changes into your design, you’ll likely have to go back and fix them later, at least for some web browsers. Instead, get them early in the design process so you can focus on making your text fit better with your design. If you do want those fancy symbols and smart quotes showing up in the final design, break out your HTML entities. 9. Plan for your text to get larger When you increase the size of the text on Veerle Duoh’s website, it’s not quite as pretty than if you use the font size she picked out. However, you can still read everything, locate links and so forth, something that is true of very few websites.

That’s because, in part, many designers make sure to layout text in 10 point font or even smaller. Most people are comfortable reading such fonts, but Baby Boomers make up a huge section of the web-browsing population and a lot of those aging web surfers are going to have their browsers set to display type as large as they can. Your text, as well as your design, needs to be able to adapt to that fact. It’s also worth taking into account the fact that browser size can vary dramatically, moving text around to unexpected locations if you aren’t careful. If bumping the size up a point creates problems, that older demographic is going to move on to the next website in a hurry. Having to scroll forever over to the side will have a similar result. 10. Show a preference for sans serif If you look at the A List Apart’s website, pretty much every big block of text is set in a sans serif typeface, making it much easier to read. Headlines and other smaller blocks of text are laid out in serifed fonts, creating a balance between the two.

When it comes to laying out text on a screen, sans serif fonts are almost always the best bet, especially if you chose a font like Verdana that was designed for display on a computer screen. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated. It’s not possible to entirely avoid serifs, of course. But for large blocks of text especially, using a font without serifs can offer an extra level of guarantee that visitors will be able to easily read a site’s text. When you’re choosing fonts for a project, look through your sans serif options first. A final comment Typography is easily overlooked, and even when a designer does take it into consideration, it’s easy to write off as a time-intensive activity with little return. But spending even a few minutes with the text that will be the centerpiece of your design can transform it from something any web designer could slap on a page to an element that supports the rest of the design. Written exclusively for WDD by Thursday Bram. Do you follow these rules and others? Please share your views below…

13 iPhone Apps for Graphic Designers

Fri, 06 Feb 2009 11:16:00 -0700

If you’ve found a greater purpose for your iPhone besides calling or Googling directions, then you’d probably like to explore what your iPhone can offer you in the realm of graphic design. I’ve compiled a collection of the most useful 13 iPhone apps for graphic designers that I’ve come across. Each contributes and offers a unique ability to aid you on your journey through graphic design. We’ll be taking a look at applications that help with task management, enhance photos, sketching and a whole lot more. As usual, feel free to add your comments below and let us know which ones you like best and which ones you use. 1. Palettes

Palettes is a great app that allows you to create color schemes. You’re able to sample colors from websites, photo albums stored in your iPhone, and more. You can also import and export palettes to Photoshop. Grab colors while you’re viewing a picture, a web page, or anything else on your iPhone. This can come in handy, for example, if you visit a website and find a color scheme that’s extremely appealing, with Palettes you’ll be able to introduce yourself to the exact colors used. 2. Omnifocus

OmniFocus: Because task management is important for any graphic designer (despite the unhealthy managing many of us take part in), I’ve decided to include OmniFocus, a standalone application or a conjuncture app that syncs to your Mac. Set due dates for your latest projects, or a reminder that you need to submit your artwork soon. If you’re using it in conjunction with the Mac app you can also send yourself todo’s, notes, or quick memos through email and it automatically adds them to your OmniFocus inbox. 3. CameraBag

CameraBag: This app allows you to simulate several different camera styles in a unique way. For example, you can take a picture of an individual and apply a wide range of effects to that specific photo. You could apply a fisheye lens effect, an infrared effect, a simulated cinema effect, a widescreen effect, and other effects that mimic the style of old cameras as well. 4. Pixelpipe

PixelPipe enabled you to share a load of photos through your iPhone to over 50 supported sites such as Twitter, Flickr, MySpace, YouTube, Tumblr, WordPress, and FTP sites. The way this works is once you find a picture on your iPhone or on a site, you can then simply upload them to the sites mentioned above (and more) in an instant. 5. CliqCliq

CliqCliq: Most of us use CSS, HTML, or Flash in order to design, however, we need something that can give us the exact match of the colors we’d like to utilize. CliqCliq allows you to find the exact colors you wish to use and immediately converts them to a variety of scales and formats. Integrate your iPhone camera and automatically extract colors with this simple palette app. 6. ZeptoPad

ZeptoPad is a sketch pad tool for your iPhone. You can sketch, design, plan, and use your finger as a pencil to draw. You won’t be limited by screen space many times as you can enlarge your screen whenever you need to. You’re also able to cut and paste pictures, texts, and graphics onto your sketch pad to later edit and use. 7. ColorExpert

ColorExpert makes it easy to grab, identify, capture and showcase your chosen colors. If you find yourself looking at a picture or graphic art and you’d like to use this color scheme in your design, then you can simply click the ColorExpert button on your iPhone and find out the shade, color scheme, and palette you would like to match. You can later email your findings to yourself for desktop use, a friend, or to a client as well. 8. iBlueSky

If you’re on the go and ideas start flowing into your mind on your current or future project then you can use iBlueSky to map your brainstorming path while never forgetting to feed your creative side. Create a collection of ideas, thoughts, and suggestions, and then email them in PDF or PNG formats. You can also print a hard copy of your brainstorming in PDF format as well. This is a video that elaborates on the uses and further features of this mind mapping app. 9. Caliper

Caliper is a nifty measuring tool that like its names states uses caliper like jaws to measure objects. You can quickly and independently move the upper and lower jaw of the caliper with the swift move of a finger. This app takes measurement in pixels, inches, and centimeters. 10. iPhlickr

iPhlickr is great if you’d like to instantly browse the Flickr archive. All you have to do is go to the iPhlickr website (http://www.chandlerkent.com/iphlickr/#_searches) on your iPhone and begin to browse photo albums and any graphic on the Flickr site as well. You can access your photo album and search Flickr users too. 11. RulerPhone

RulerPhone’s “motto” is that you can measure anything that you’re able to take a picture of. Convert your phone into a tape measure and take snaps of items you’d like to find out their sizes. Take a picture of a frame, window, silhouette, couch, or even a car and quickly find out the size of that item. Here’s how it works, once you have the picture taken, you position and align the arrows to the area where you’d like to find out the measurements of. Once these two steps have been knocked out you’ll be able to instantly reveal the objects measurement by dragging the ends of the virtual measuring tape to configure your desired distance. 12. Photobucket

Photobucket allows you to upload all of your photos to Photobucket and share them with your colleagues or clients all through your phone. You’re able to send any image through email, Instant Messaging, Facebook, and several other social networking and blogging sites. 13. Dexigner

Dexigner News & Events: This application allows you to view the latest news, events, exhibitions, conferences, and competitions having to do with anything regarding design. Grab design news and stay up-to-date with breakthroughs at design events and competitions. It’s like your own mini design portal all on your iPhone. You do not need to download any software, all you need to do is navigate the developers site through your iPhone. Do you use any other apps on your iPhone that simplify your life as a designer? Please share your favourites with everyone…

Now Create And Share Patterns With BG Patterns!

Fri, 06 Feb 2009 10:13:00 -0700

BG Patterns is a web based tiled backgrounds designer. You can create any pattern your site needs just in few minutes. You will have adjustable size, pictures, colors, texture and transparency in any pattern. As you create any pattern, you can also share them as well. Recently created patterns by others are also available there. You can save your created patterns there for future use as well. Preview is also available for any patterns.

50 Beautiful And User-Friendly Navigation Menus

Wed, 04 Feb 2009 16:44:00 -0700

By Matt Cronin Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in. Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites. Please also consider our previous articles:

CSS-Based Navigation Menus: Modern Solutions, which lists modern solutions for CSS-based navigation. Navigation Menus: Trends and Examples is an inspirational collection of navigation menus.

CSS-Based Navigation Menus LoodoA colorful menu that adds to the feel of the website.

Acko.netSteven Wittens takes a look at the navigation menu from a quite unusual perspective.

Web Design LedgerWeb Design Ledger has an excellent menu; its large size is convenient but doesn’t intrude on the content.

UX BoothUX Booth uses a a stylish text box under the navigation as a sort of subtext for each menu item.

NopokographicsVertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

Icon DesignerThis website uses a large image-based menu on the home page. The user’s attention is drawn directly to this large menu, making it convenient for users.

CosmicsodaThis large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

DesignsensoryAn intuitive drop-down navigation that uses 2 colors effectively to communicate the active navigation item and the passive ones.

SmallstoneSmallstone, a U.S. record label, presents its navigation menu in the form of a the so-called Space Echo Roland SE-201.

TNVacationIt’s pretty hard to find a nice-looking drop-down menu. This one is a beautiful exception.

ClearleftClearleft uses a couple of paper pieces for its navigation.

45royaleA simple, clean and beautiful navigation with a nice hover effect.

Design IntellectionAn excellent example of block navigation that shows how effectively “speaking” hover effects can be used with a clean and simple navigation menu.

Ronnypries.deA navigation menu doesn’t have to look like a traditional navigation menu. Ronny Pries uses a floor plan to lead site visitors through the pages of the site.

Jiri TvrdekJiri Tvrdek presents the navigation options of his site as leaves on a tree. Creative, unusual and memorable.

Water’s Edge MediaPatricia Abbott uses clothespins for the navigation options.

Matt DempseyMatt Dempsey highlights his navigation options with a brush stroke.

CognigenThe current navigation option is pressed — clear and intuitive.

District SolutionsVertical tabs are used very rarely. But they can look good!

Jayme BlackmonJayme Blackmon seems to like setting “done”-marks…

Jeff SarmientoWhy not try a sloping navigation options once in a while?

StudioracketA really unusual navigation menu that uses some kind of a mindmap to illustrate the navigation. And, apart from that, the navigation menu is hand-drawn!

Cultured CodeA subtle yet distinct menu that is out of the way of content. Excellent colors and a nice hover effect also add to the menu.

Nando DesignerThis Portugiese designers uses handwriting and a piece of paper for its main navigation.

BonfiremediaSometimes typography is just enough…

ArtgeexVivid typography in use.

GloobsSome designers integrate a stamp in the contact navigation option.

South CreativeThis website uses large navigation buttons and has a good hover effect.

Mac RabbitOne more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

RapidWeaverThis menu has a clean and smooth layout, and it has a great sub-menu that uses transparency to separate it from the main menu.

DFW UPAIcons reinforce the menu items on this website and add emphasis to each option.

Revolution Driving TuitionThis website has a great grunge style, and the menu fits right into the layout.

Duarte PiresThis menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

Valetin AgachiThis navigation has a rather unique style that emphasizes selected items. Also, the menu layout stays consistent throughout the whole website.

Tutorial9Tutorial9 recently got a nice redesign, which came with a very usable and well-organized menu.

CSS Menus With JavaScript Agami CreativeDesigners sometimes use tooltips for their navigation. However, tooltips and aqua are quite an unusual combination.

Whitehouse.govA perfect example of how one should organize huge amounts of content into clear and easily distinguishable sections. Also, excellent design of the drop-down menu.

AppStormAppStorm is a new website by Envato. A jQuery effect is used to create an excellent and very usable drop-down menu.

Eric JohanssonEric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

CodaThis conveniently located menu has a beautiful hover effect. The sub-menus are consistent and include every item.

Dragon InteractiveDragon Interactive has a colorful jQuery-based menu with a great effect.

BernI am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

AbduzeedoFor its recent redesign, Abduzeedo introduced a jQuery slider into the navigation.

Flash-Based Menus IipvapiColorful sloping Flash-based navgation from an Indian Web design agency.

Not Forgotten: The MovieMost entertainment websites use Flash and unusual navigation menus to capture users’ attention. On this one, an instant classic, navigation items are put on cards.

Nick TonesNick Tones, with a dynamic, colorful and yet still somehow usable navigation menu.

woonky.ideasThis Argentinian design agency puts CDs and books on a table, each representing a navigation option, of course. When hovered over with a mouse, each object reveals what can be found inside.

GotmilkThe designers of this Flash-based site came up with something truly original. The navigation menu is put on a ribbon; each navigation item has a nice and simple hover-effect: when an icon is hovered, it is replaced with the site area the icon stands for. Usually tooltips are used for this puprose, here designers use a different approach. Outstanding!

Spectra Visual NewsreaderA beautiful and very colorful Flash menu that is a good example of excellent usability.

NickADThis unique website is all about easy-to-use navigation.

Sensi SoftThis amazing portfolio has very well-thought out and convenient navigation.

Highly Usable Navigation tap tap tapThis website has a beautiful layout and a menu with great effects.

AppleApple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.

Alex BugaVisitors here use a large and well-laid out slider to move through news items.

CREASENSOThe content on the home page of this portfolio website has an extremely simple yet usable organization.

polargoldThis visually stunning Flash-based portfolio uses an accordion-like layout for the content, so there is no loading of new pages. The large type stresses the importance of menu items.

ColourpixelColourpixel has a very interesting layout for its portfolio. It combines all of its sections onto a single page, and allows each item to be hidden or revealed, as demanded by the user.

DVEINYet another excellent Flash-based portfolio. This website organizes all gallery items onto an interesting revolving list.

Alexandru CohaniucThis portfolio is rather well known for its beautiful layout. An accordion effect allows users to navigate through projects and portfolio items.

Porsche CanadaPorsche Canada’s website has very user-friendly navigation, with many sub-items for each menu item. The convenience and usability of this menu is great.

Jeremy Levine DesignThis architecture portfolio has a unique layout that allows users to easily browse the website. The line of menu items has many effects and transitions that make it very convenient.

firstbornFirstborn, a well-known design studio, uses scrollable, horizontal navigation for its portfolio. The navigation items can also be displayed in other modes, such as thumbnails, making it even better.

Benjamin DavidThis portfolio has a vertical slider that automatically moves through menu items. Many large items are placed together in a single glowing menu.

Thibaud’s PortfolioAnother stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.

Jason Reed Web DesignAccordions are useful when trying to squeeze many items into a small space. Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages.

Marius RoosendaalAnother usable accordion menu that groups portfolio items.

Vertical Navigation Layouts Danny BlackmanDanny Blackman’s website is often regarded as one of the better portfolios out there, in part because of the amazing vertical layout.

Tomas PojetaThis website is yet another portfolio that uses a vertical layout to incorporate multiple pages onto one, while allowing users to move vertically between sections.

volllVolll uses a vertical layout with a beautiful illustrated landscape background.

MediocoreMediocore is an awesome portfolio. It has a few more elements than usual on its pages, but still looks excellent.

User-Friendly Sidebar Menus FreelanceSwitchFreelanceSwitch organizes its articles using a great menu.

FubizThe redesign of Fubiz brings an excellent sidebar. Slide effects are used to fit a large amount of content into a small sidebar.

CheckoutCheckout has a stunning website. An extremely clean list-style menu in the features section also displays nice icons.

Ruby TuesdayRuby Tuesday has a very nice website. The sidebar menu has exceptional icons and smooth hover effects.

Concentric StudioA simple and minimalist menu with sliding effects.

Barack ObamaPresident Obama’s website has a well-spaced and nicely contrasting list-style sidebar menu.

GABBO DESIGNAnother clean and well-spaced list menu.

Further Resources You may be further interested in these articles and related resources:

Pattern Tap Navigation CollectionA nice collection of inspiring navigation menus. 13 Awesome Javascript CSS Menus13 useful JavaScript CSS menu resources. 7 Advanced CSS Menu, A Great Roundup!Another 7 CSS menu resources from noupe. 300+ jQuery, CSS, MooTools and JavaScript navigation menusA long list of menu resources, tutorials and downloads.

Clear And Effective Communication In Web Design

Tue, 03 Feb 2009 20:43:00 -0700

By Steven Snell Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors. Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors. In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively. 1. Methods of Communication Websites communicate with visitors in a number of different ways. Not all websites take the same approach, but almost every website will use at least a few common methods of communication. To get started, let’s first look at some of the basic ways that websites communicate with visitors before going into more depth on the subject. 1.1. Text Text is, of course, the most obvious form of communication that takes place online. Whether the text is in the main body content of the page or a headline, most website visitors rely on text to understand the basic messages of a website. Depending on the type of the website, text may be extremely critical to communication, as in the case of blogs. The approach taken with text will depend on the purpose of the website. For example, sales copy on an e-commerce or membership website will differ from article content on an informational website. 1.2. Images We’ve all heard the saying “A picture is worth a thousand words.” Photos and images are excellent resources not only for creating an attractive and interesting design, but also for communication purposes. Images can often communicate a message faster, more clearly and more emphatically than text. The designer needs to be aware of the messages being communicated via images and ensure they work in harmony with the rest of the website’s communication.

Photographer Andrew Gransden has a beautiful portfolio website. Most of the screen space above the fold on the home page is taken up by a large photo that rotates randomly on page load. Andrew allows the quality photography to do the majority of the communication, rather than rely primarily on text to attract potential clients. 1.3. Titles and Headers Whether you’re examining Web design, magazine layout, newspaper design, etc., titles and headers are critical to effective communication. Human nature is to want to know something quickly, and especially when on the Web. Titles and headers help to communicate major points and ideas to visitors, and they tell visitors what to expect from the rest of the content. 1.4. Icons One of the reasons icons are so useful in Web design is that they communicate messages without any text being used. A visitor may see a familiar icon, such as a house that represents a link to the home page, and immediately know what the item represents and what to do. 1.5. Design Styles The style of a website’s design may also communicate a message to visitors. Certain design styles are common in particular industries, and other styles may not be an appropriate fit for a specific type of website. The style can, in these cases, indicate to visitors something about your website and how it fits their needs. For example, a website that sells skateboards would likely feature a grunge style design. This is a style that most visitors in the target market would appreciate, and by seeing this type of style, visitors in that target market will likely feel comfortable with the website and feel an association with it. In this case, the design style helps communicate to visitors that this is where they belong and that the website was created for them. 1.6. Colors Obviously, there is an infinite variety of colors and color schemes in Web design. Sometimes colors are chosen just based on what looks good, but other times the psychology of color comes into play. Colors not only play a large role in determining how a website looks, but also communicate messages to visitors in certain ways. 1.7. Audio and Video While most of the Web is made up of text, audio and video have become increasingly common over the past few years as more and more Internet users are on high-speed connections. As audio and video have become increasingly common, many new opportunities have arisen for effective communication online. Designers and website owners have plenty of options in how they communicate with their visitors, and audio and video have some definite strengths that make them a tremendous method of communication. 2. Challenges of Creating a Website with Clear Communication In order to build a website that effectively and clearly communicates with visitors, a number of challenges need to be overcome. Not all websites are the same, so challenges may differ from one website to the next, but the challenges discussed below are some of the most common. 2.1. Too Much Content One of the biggest challenges that designers have to overcome is simply deciding on the amount of content and information to use. Of course, having a lot of quality information is a good thing, but it can also get in the way and make it difficult to communicate clearly with visitors. In many cases, websites with less content have an easier time effectively communicating a particular message to visitors because there is no excess to get in the way. By trying to fit a lot of content onto a page, the website owner can very easily create a cluttered page that confuses visitors. Primary messages are often overpowered by the busyness of a page, and sometimes the content may even send mixed or unclear messages. 2.2. Every Visitor is Different When developing websites, one needs to keep in mind that each visitor is unique and that it is impossible to classify all of them in the same group. Websites are designed with their target audience in mind, but even within that group of users, some diversity will still exist. These differences can have an impact on the communication of the website, because not every visitor will respond in the same way or understand the same messages. How are visitors different? First, demographics play a role. A website is likely to attract visitors from all over the globe, and a visitor in one part of the world will differ from a visitor in another part of the world. Age and sex will also be important factors. Beyond demographics, not every visitor will have the same purpose in visiting the website. They may be looking for different things or have different agendas on the website. Visitors will also come from a variety of sources, and visitors from one source will not always have the same characteristics as visitors from another source. Additionally, not all of your visitors will have the same level of knowledge of the subject of your website. All of these things make each visitor unique, and they all have an impact on the communication between the website and the user. 2.3. Clarity Communicating through a website is easy. Every website communicates in a number of different ways, even unintentionally. Communicating with clarity, on the other hand, is much more of a challenge. Because of the short amount of time that a new visitor is likely to spend on a website before leaving, there is a strong need for the website to quickly and clearly communicate. In order for a message to be clear, there must be a clear purpose and priority of the website that is understandable to the visitor; there must not be too much noise or clutter; and the message must be communicated in a way that it can be understood by the visitor. Blogs can sometimes be difficult for new visitors to quickly understand the purpose of. Macalicious uses a small box at the top of the page to quickly communicate the website’s purpose and background so that new visitors can immediately know something about it.

2.4. Keeping Communication Brief, But Complete Because of the need for clarity and the benefits of communicating quickly, there are advantages to keeping messages as short and concise as possible. A brief, clear message will generally be most effective for communicating quickly online. Of course, there are exceptions to this, such as situations where in-depth articles are used to provide detailed information to visitors who are interested in such information. Keeping a message brief and complete is a major challenge. One of the reasons taglines are so effective is that they can communicate something significant about the company or the website in a brief statement that, ideally, leaves a memorable impression on the visitor. Shuteye uses three simple short questions at the top of its home page to help identify visitors who could benefit from its offerings. If a visitor answers “Yes” to these questions, he or she immediately has a reason to look into the report offered by Shuteye. The communication at the top of the page is brief but highly effective for filtering potential customers.

2.5. Having Personality Online communication is unlike forms of communication that allow face-to-face interaction between two people. In online communication, the human visitor receives a message from a website, not directly from a person. However, the most effective communication generally occurs on websites that show some kind of personality in that communication. The website is a representation of the company or the person behind it, and showing that in the communication is important. Digital Mash, the portfolio website of designer Rob Morris, shows some personality with the tagline “Hero for Hire.” While there are tons of designer portfolio websites out there, Rob’s stands out in part because this statement shows some personality.

2.6. Not Overpowering the Communication with the Design The design and appearance of a website should be used strategically to enhance the message of the website, but it can also become an overpowering element that hinders communication. The content of the website is of primary importance, while the appearance of the website should be used to make the visit more pleasant, memorable and easier. The design of a website should not become a priority over the content, or else the website will suffer in usability. Pixelhaven’s minimalist design allows the company’s message to take center stage, rather than compete and potentially interfere with the message.

2.7. Gaining the Trust of Visitors Depending on your type of website or the purpose of your communication, one of the biggest challenges may be simply gaining the trust of visitors. One example would be a sales page. When a page communicates something to visitors in an attempt to convince them to buy something, there is a natural resistance to trust. Overcoming this is a major challenge. SEO Group uses testimonials from satisfied clients at the top of its page to help build trust.

2.8. Getting and Keeping Attention If you have an audience with a very short attention span and that is quick to close the browser or visit another website, getting and keeping its attention is a necessary prerequisite to effective communication. This also goes back to the issue of having a clear and concise message that communicates to visitors before they get confused or bored with the website. If visitors arrive at a website and cannot easily understand its purpose or what it offers them, they’re likely to move elsewhere. 3. What Should Be Communicated When creating a website, what things should you focus on in terms of communication? Knowing what should be communicated is a key step that cannot be overlooked. While the answer to this question will vary from one website to the next, the basics are discussed below. 3.1. Purpose of the Company or Website The most important message that must be communicated by every website is its purpose. Some visitors will likely already be familiar with the website or the company behind it, but many may not. As visitors arrive at the website, they should be able to quickly and accurately understand why the website exists and what is offered, and from this they should be able to determine if it is something that interests them. When visitors arrive at a website that does not clearly communicate its purpose or what it does, it almost always results in a frustrating visit, which leads to a website not achieving maximum effectiveness for its owner. AnswerJam communicates its purpose by answering the question “What is answerJam?” on the home page.

3.2. What is Offered? In addition to simply understanding the purpose of the website, visitors should also be able to quickly learn what the company or website offers them. Of course, this will vary from one website to another. E-commerce websites need to clearly communicate to visitors the types of products that can be purchased. Service companies should clearly communicate the services that are available to visitors. Websites that are content-rich, such as blogs, should communicate to new visitors what type of content is available to visitors and subscribers. Elegant Themes offers premium WordPress themes for an annual membership fee. The website uses a light blue box to quickly and clearly communicate the details of what is offered to visitors.

3.3. How Can Visitors Benefit? Simply listing services or products that are available may not be enough. In most cases, the website should communicate to visitors how these products and services can specifically benefit them and why they would be better off with them. Wipee List is a free online service that allows you to make and keep track of your own to-do list. Wipee List communicates to visitors that it can help them easily get in control of their tasks. This benefit is emphasized over the actual features of the service.

3.4. What Action Can Visitors Take? If a website does an effective job of clearly communicating its purpose, including what is offered and how it can benefit visitors, some of those visitors will want to take action. But is it clear what type of action they should take and how they can do so? Of course, e-commerce websites should make it easy for visitors to take action by buying items. Service companies should make it clear how visitors can take the next step towards using their services. Can visitors place an order online? Should they fill out a contact form to have someone get in touch with them? Should they call the company by phone? Only Human is a community where people can share a story to help others or post a question and ask for help from other users. The two basic actions of sharing a story and asking for advice are made very clear by simple navigation in the header that leads to these two actions.

Tips for Effective Communication: Now that we’ve looked at how websites communicate with visitors, some typical challenges and what should be communicated, here are some tips that can be put into practice to help with the process of developing websites that communicate effectively. 4.1. Prioritize The most important step to developing a website that features clear communication is prioritizing your messages and knowing exactly what should be communicated to visitors. If you’re not able to easily state the main point, purpose or message of your website, it’s unlikely that visitors will be able to understand that message accurately. Most websites, especially larger ones, have multiple messages that are communicated throughout their pages. In these cases, it’s important to determine a priority so that the most important messages are given more prominence. LightCMS has prioritized the simplicity and ease of use of its product. The home page, “Features” page and “Why LightCMS” page all prominently display a message that emphasizes this point.

4.2. Determine What Visitors Should Know About the Company or Website Every company and website has something that it specifically wants visitors to learn about it. It’s critical that this is identified, otherwise it will be impossible to communicate it effectively to visitors. Ideally, the website would be used as a tool to brand the company, so the messages that are being communicated should fit the overall branding efforts and strengthen those efforts. Checkout offers point-of-sale software for Macs. It has determined what is most important for visitors to know about the software and makes it clear with the simple statement, “Get a Mac. Start a Store.”

4.3. Keep it Simple Communicating effectively is much easier when the messages are simple and when excess can be eliminated. Any way that online communication can be simplified (without losing anything important) will make it easier for you and your visitors. In some cases, this may mean cutting down on communicating too many different things and just focusing on the most important aspects. By reducing the amount of information that is communicated, each message or piece of information will have more of an impact. Umbrella Today? is an outstanding example of keeping it simple. While there are plenty of options for checking the weather online, Umbrella Today is aimed at those who simply want to know if they’ll need an umbrella. Enter your zip code and you’ll get an answer.

While most websites will not be able to practically achieve this level of simplicity, it is a good example of what can be achieved when excess communication is cut out. 4.4. Keep it Relevant to Your Target Audience Because your visitors are likely to be diverse, it’s important to consider your target market and audience when developing the website. Who is the most critical audience for your company and website? The website should be designed and developed so that it can communicate specifically with these visitors. Additional efforts can be taken to communicate with other audiences as well, but the target audience should be prioritized; and if sacrifices are made, they should be made in other areas. FreeAgent provides online accounting for freelancers and small businesses. Its target audience is not large companies that are looking for a more complex accounting system. The customers it is targeting are not likely to be experts in accounting, and they’ll probably be interested in simplicity in an accounting system. FreeAgent effectively keeps its message relevant to this target audience by stating that it is “Accounting for the rest of us.” If a visitor has been frustrated by other more complex accounting systems, they’re likely to immediately feel that FreeAgent was made with them in mind.

4.5. Make the Message Impossible to Miss The most effective way to ensure that visitors receive the most important messages of a website is by making them nearly impossible to miss. This can be done in a few different ways, but using large text, colored text or some other design technique to make the message stand out are common. Other techniques include automatically loading audio, video and pop-ups, each of which brings its own usability issues and concerns. Treemo Labs uses a large bold font to immediately communicate what services it offers.

4.6. Style Text Messages can easily be made to stand out by using bold text, colored text or larger font sizes. These things are all visual clues to visitors that something is important and prioritized. Of course, the more that is added to a website, the less impact that piece of text will have. For example, if a page is styled in a very basic manner, with only one line that stands out in large bold text, this line will be extremely noticeable and likely have a significant impact. On the other hand, if a page using bold or colored text in several different places and various font sizes all over the place, the result is that nothing will really stand out because there is not enough uniformity. Another option for styling text is demonstrated by Auditude. It uses a simple change in background color to create a box that separates a particular section of text. As a result, that section of text stands out.

4.7. Use Headers and Sub-Headers On pages that consist of a significant amount of text, breaking it up and identifying the main points with headers and sub-headers can be very effective. Headers not only help to make the text more readable by creating white space and using bold font to add variety to the page, but they also communicate a structure of the content to visitors and can summarize the primary messages of the content. 4.8. Make Everything Count, or Get Rid of It When it comes to communication online, it’s very easy to complicate a message by adding more than is necessary. The best solution is to use only what has an impact. Make everything count, or just get rid of it. If text or an image doesn’t really serve a purpose, it’s only complicating things by cluttering the most important messages. In this situation, you’re better off without it, and the result will be a simpler, clearer message. The website for Silverback contains no unnecessary text. Above the fold, visitors see a list of what Silverback does, and further down the page are some more details on the service, but only essential information is included.

Goals for Communication When Developing a Website As you’re designing and developing websites, here are some goals to keep in mind that should help you stay focused on creating ones that communicate effectively. 5.1. Clarity One of the major goals of communication for website designers, developers and owners should be to present a clear message through the website. Regardless of what methods are used to achieve this clarity, the message must not be difficult for visitors to recognize or understand. By the time visitors leave the website, they should have received and understood the primary message. Tickerville is a blog and a community for traders. The website has a welcome message that clearly states its purpose. When visitors arrive on the website and are greeted by this statement of purpose, they know immediately if they fit into the target audience. If they do, they’re much more likely to feel at home on the website because they know it is for them.

5.2. Communication that Truly Helps the Business and Visitors While clarity is critical, clarity alone does little good for the business if the right message is not conveyed. Of course, the website will be most effective for the business and most useful to visitors if the messages being communicated are the most appropriate and significant ones. LongTermClients offers business greeting cards, but that is not quite clear simply from the name LongTermClients. Below the title of the website, it says “business greeting cards,” which makes it much easier for visitors to know what the website is all about, and which should also improve the results of the website for the company.

5.3. Consistency of Message Particularly with websites, consistency must be addressed. While the website’s home page may do an effective job of clearly communicating with visitors, many visitors will be entering the website through other pages. Are those secondary pages equally effective in communicating the same message? Secondary pages likely include additional information and messages for visitors, but the website should work as a whole to create a unified, consistent message. 5.4. Design that Enhances the Message The appearance and style of the website should fit and complement the communication that is taking place, not interfere with it. A great-looking website is a wonderful thing, but it should never exist at the expense of its content or communication. 5.5. Communication that Relates to the Target Audience In order for the website to maximize effectiveness, the communication must be relevant to the target audience of the website. If the website targets a specific audience, but the communication isn’t catered to them, the content will be ineffective. Make it a priority to meet your visitors at their level, whatever that level may be. Last.fm uses a subtle but effective twist to the standard search box. Rather than simply saying “Search,” it asks the visitor “What music do you like?” Because its target audience consists of music lovers of all kinds, this simple question above the search box encourages visitors to enter a response of their own. Once they search for something that they like, they may find something that keeps them on the website for a while.

5.6. Use of Website Structure to Build on Communication Part of building a website that communicates effectively is developing a clear website structure and navigation. A highly usable website with an effective structure can help further improve communication by making it clear to visitors what is available on the website and where they can go to find what they are looking for. Help make it easier for visitors to find what they want, and you’ll improve the overall communication that takes place. Gallery website Pattern Tap uses effective categorization to create structure and to make it super easy for visitors to find what interests them.

Results of Good Communication Websites that are able to achieve effective communication with visitors benefit in several different ways. Likewise, websites that do not communicate effectively usually struggle in these areas. 6.1. Visitors who Understand the Purpose of a Website A website that communicates effectively will benefit immensely if visitors are able to understand what the website is all about; and the experience will also be more pleasant for and useful to them. It’s hard to build a successful website that doesn’t start with a solid foundation of effective communication. 365 Days of Astronomy uses a spot in its sidebar right below the logo and branding area to briefly explain the purpose of the website and what it offers to visitors.

6.2. Improved Branding Another significant result of effective communication is improved branding. If the message or purpose of the website is communicated effectively to visitors, it will leave an impression on them that will help form their image of the company. Branding is important online and off, and the messages being sent are a major factor. 6.3. Reduced Bounce Rates Websites that communicate effectively will be more user-friendly and more helpful to visitors. Fewer visitors typically leave such websites quickly as a result of not being able to find what they are looking for. Instead, they’re likely to remain on the website for a longer period of time and view a higher number of pages. Because of effective communication, visitors find the right content easily. 6.4. Less Frustration for Visitors We’ve all had the unpleasant experience of being on a website that simply doesn’t communicate well with visitors. Maybe the purpose of the website was unclear, or maybe you weren’t sure how to find what you were looking for. Websites that fail to communicate effectively frustrate many visitors, which is obviously not a good way to build a successful website. 6.5. More Sales, Leads, Subscribers, etc. Websites have all kinds of different goals; but regardless of what the specific goals of your website are, the website is more likely to achieve them with effective communication. Whether you’re selling products, promoting a service, building a blog readership, developing a social network or simply providing information, communication is essential to success. The website of Mia & Maggie uses color to make the text “Free shipping” stand out. By drawing more attention to that statement, the company will likely receive more orders from people who want to take advantage of the offer. Keeping that text white would likely not produce the same results.

6.6. Less Unnecessary Inquiries If visitors can’t find what they’re looking for on your website or if they’re not sure what is offered, you’re likely to receive emails or contact form submissions that could be avoided with better communication. Receiving inquiries is certainly not a bad thing, but when you’re answering questions that are either already answered on the website or are asked repeatedly but not answered on the website, a breakdown in communication has occurred somewhere. Websites that do a good job of communicating with visitors may receive some of these kinds of inquiries from visitors who don’t make any effort to find the information, but generally they will receive less unnecessary inquiries because visitors will be able to find what they are looking for without needing to ask for help. About the Author Steven Snell is a Web designer and blogger. He actively maintains his own blog at Vandelay Design, where he frequently publishes articles about design, collections of resources and inspirational galleries. You can also follow him on Twitter. (al)

Download Free Valentine Love Icon Set

Tue, 03 Feb 2009 01:49:00 -0700

DryIcons is wishing you a lovable Valentine’s Day filled with candy, wine and music. These icons were designed to fit the romantic feel of the holiday. The “Valentine Love” free icon set comes with 12 high quality web icons in 32-bit transparency PNG and 32×32px, 48×48px and 128×128px size. February is about love and renewal, so don’t hesitate to let the breeze in, and may your heart be always full of love.