College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often need to include reams of information in a way that makes everything easy to find. It’s a huge challenge.

And the truth is: most college and university websites are horribly designed. Either they look like they were designed fifteen years ago and then forgotten about, or they’re so overloaded with information that it’s almost impossible to find what you’re looking for.

But not every college or university website is horrible. There are some excellent sites out there, and below are some of them. If you know others, please share them in the comments to this post!

General Colleges & Universities

Appalachian State University
Appalachian State University has a simple color scheme and makes great use of icons in their header.

Ball State University
Ball State University uses a sophisticated color scheme and typography combined with plenty of negative space.

Bates College
The bold header and grid-based layout work well on the Bates College site.

Bennington College
Bennington College uses a unique layout and design.

Berea College
Berea College uses a clean layout, and the cutout in the navigation bar for the logo really sets it apart.

Case Western Reserve University
Case Western Reserve University uses a unique layout and color options.

Champlain College
Champlain College uses a sophisticated, muted color scheme and excellent typography.

Colby-Sawyer College
Colby-Sawyer College has a simple layout with plenty of negative space.

William & Mary
The bold header image and excellent typography set the William & Mary site apart.

The College of Wooster
The College of Wooster uses an interactive, animated header.

Denison University
Denison’s website makes great use of negative space and a simple layout.

Dickinson College
Dickinson College’s site has a great color scheme and a subtle background image.

Elon University
Elon University’s site includes a lot of details that make the site look really polished.

Hamilton College
Hamilton uses a simple color scheme and straight-forward navigation.

Hampshire College
Hampshire College uses a unique, sophisticated color scheme and typography.

Lenoir-Rhyne University
Lenoir-Rhyne University has a clean layout and bold header slideshow.

Marlboro College
Marlboro College makes good use of a simple layout and color scheme.

Middlebury College
Middlebury College has a completely unique layout with excellent typography.

Minot State University
Minot State University uses plenty of negative space and clean typography.

Nebraska Wesleyan University
Nebraska Wesleyan has one of the best-looking college sites out there, with a fantastic background image and excellent typography.

Northland College
Northland College uses unique typography and grunge elements to stand out.

Oglethorpe University
Oglethorpe University uses a modern color scheme and typography.

Ohio Wesleyan University
Ohio Wesleyan uses a bold color scheme and graphics.

Simmons College
Simmons College uses a clean, grid-based layout and sophisticated color scheme.

Sweet Briar College
Sweet Briar College steps outside of the norm for a college website and uses a more relaxed, feminine design (appropriate for a women’s college).

Syracuse University
Syracuse University has a fantastic grid layout and modern color scheme.

Thomas Edison State College
Thomas Edison State College has a great illustration in their header and a sophisticated color scheme.

Tufts University
Tufts has a unique layout and excellent typography.

The University of Alabama
The University of Alabama uses a grid layout and plenty of negative space.

University of Connecticut
The University of Connecticut’s site has a simple layout and navigation.

University of Maine Farmington
The University of Maine Farmington’s website uses a basic grid layout and great typography.

University of Miami
The University of Miami uses a muted color scheme and simple, horizontal navigation.

University of Minnesota Morris
The University of Minnesota Morris’s site incorporates a number of small details that give the site its polished look.

University of Nebraska-Lincoln
A simple color scheme and clean, grid-based layout give the University of Nebraska-Lincoln’s website a polished and sophisticated look.

University of Portland
The University of Portland uses a simple layout and color scheme with plenty of negative space.

University of Rochester
The large background image and non-standard navigation set the University of Rochester’s website apart.

University of the Sciences in Philadelphia
The University of Sciences in Philadelphia uses a fantastic bright color scheme and clean typography.

Ursuline College
Ursuline College has a simple layout, good typography, and lots of negative space.

Vancouver Island University
Vancouver Island University uses a grid layout and fantastic, monochromatic color scheme.

Wake Forest University
Wake Forest University’s site has clean typography and a simple layout.

Wesleyan University
Wesleyan University uses a grid layout and sophisticated color scheme.

Westmont
Westmont utilizes a slideshow header and great color scheme.

University of Aberdeen
The University of Aberdeen has a fantastic grid layout.

Bournemouth University
Bournemouth University uses bright accent colors and tabbed navigation.

University of Bradford
The University of Bradford uses bright accent colors and a grid layout to stand out.

University of Chester
The University of Chester uses an obvious grid layout, an animated header, and simple navigation.

Edge Hill University
Edge Hill University has a header slideshow, minimalist color palette, and lots of negative space.

University of Hull
The University of Hull has a unique layout, simple navigation, and great accessibility features.

Kingston University London
The Kingston University London’s website uses bright accent colors and simple navigation.

University of Leeds
The University of Leeds has a simple layout, minimalist aesthetic, and good typography. They also make excellent use of icons to simplify navigation.

University of Oxford
Oxford uses a simple color scheme and clean layout and makes good use of negative space.

University of Southampton
The University of Southampton has a bold header and simple color scheme.

Community Colleges

Salt Lake Community College
Salt Lake Community College uses photorealistic and grunge elements, combined with a unique layout.

Passaic County Community College
Passaic County Community college uses an obvious grid layout and a great color scheme.

Anoka-Ramsey Community College
Anoka-Ramsey Community College has a unique color scheme and a good use of negative space.

Columbia State Community College
Columbia State Community College has a simple layout and color scheme with clean typography.

Fashion Institute of Design & Merchandising
FIDM uses an excellent bright color scheme and a prominent slideshow.

Jamestown Community College
Jamestown Community College’s site has a simple layout and navigation.

Joliet Junior College
Joliet Junior College has a simple layout with a good use of icons.

Hagerstown Community College
Hagerstown Community College has a good color scheme, clean typography, and simple navigation.

Lone Star College System
Lone Star College System makes good use of transparency.

Washtenaw Community College
Washtenaw Community College has great hand-drawn elements, and a unique layout and color scheme.

Northland Community & Technical College
Northland Community & Technical College has a sophisticated layout and color scheme.

Northwest Iowa Community College
The Northest Iowa Community College site uses a mix of collage, photorealistic, and hand-drawn elements.

Art and Design Colleges & Universities

The Art Institute of Boston
The Art Institute of Boston combines a simple layout with bold header graphics.

Kansas City Art Institute
The Kansas City Art Institute uses bright colors, a collage-style background, and loose grid layout.

Memphis College of Art
The Memphis College of Art site uses bright bright pink accents combined with a simple design and clean typography.

Minneapolis College of Art & Design
The patterned background, animated header, and clean typography set the site of the Minneapolis College of Art and Design apart.

Moore College of Art & Design
Bold graphics and a textured background makes the Moore College of Art & Design site stand out.

The Ontario College of Art & Design
The Ontario College of Art & Design uses a grid layout and modern orange and white color scheme.

Pennsylvania College of Art & Design
The Pennsylvania College of Art & Design uses a modern color scheme and bold header.

California College of the Arts
The California College of Arts uses a unique color scheme and animated header.

University College Falmouth
University College Falmouth’s site has bright accent colors, lots of negative space, and simple layout and navigation.

Maryland Institute College of Art
MICA uses a grid layout, muted color scheme, and excellent typography.

SCAD
SCAD’s minimalist light-on-dark design sets it apart.

Corcoran College of Art & Design
Corcoran’s mix of minimalist grid design and bold colors is fantastic.

Emily Carr University of Art & Design
Emily Carr University of Art & Design has a wonderful minimalist layout and clean typography mixed with bold accent colors.

Oregon College of Art & Craft
Bold background, great typography, excellent navigation.

Ringling College of Art & Design
The grid layout and bold background give the website of Ringling College of Art & Design a unique look.

Other Institutions, Colleges & Universities

Asian University for Women
The Asian University for Women’s site has an excellent gold and maroon color scheme and plenty of negative space.

California Institute of Integral Studies
The bold typography and great color scheme of the California Institute of Integral Studies sets it apart.

Rochester Institute of Technology
The orange and cream color scheme, simple navigation and clean typography make the Rochester Institute of Technology’s site unique.

Conclusion

While the vast majority of college and university websites out there are in need of serious overhaul, there are some fine examples of sites if you look hard enough. If designing a site for a college or university, remember that simplicity and negative space are both important, regardless of the amount of information a site needs to contain.

We are always looking for inspiration, specially when it comes to web design. We just can’t get tired of browsing around websites to check out layouts, colors, typography, styles and everything else that a cool site can offer. With this selection, I will show you 50 inspiring portfolio designs. Some of them you probably already know, others are new – some are minimalist, others are colorful and full of elements. The idea here is to show different ways to show your work online. As we can find lots of interesting portfolios out there, making a selection is a bit tough, so let me know if you want to see more of them…I’m pretty sure that we have enough material for 4 or 5 collections! And don’t forget to leave a comment with your portfolio.

Portfolio – Clarideaz

Notorious Design

wedesignwise

lairdesign

Sarah Longnecker

Creative State

colagene

Matt Hamm

lecaid

Rikcat Industries

alexswanson.net

Second And Park

designme

Josh Puckett – 55eleven

spoongraphics

Creative State

ian devlin

Drumroll

Sean M Everett

Phureal

Justin M. Maller

enila.fr

chris woods

Marc Anton Dahmen

Rob Young

Les Illustrations de Lapin

madelikeme

David Hellmann

adaptd

eddidit

bcandullo

Vincent Mazza

xgraphica

Adhemas Batista

crisvector.com

digitalmash

ftdesigner

Work at Play

mediaflex

thetoke

Kay Times Two

STPo

cameronmoll

simply creative

HALO Creative Agency

moonbeam illustrations

Suki

art4web

Synch Media

Riot Industries

Despite any financial recession and economic stress, online purchasing continues to grow. Expansion of the market and evolving technology that simplifies our daily lives help to set the pace of e-commerce design. Customers want the shopping process to be quick and easy, and merchants want to increase sales by making their stores attractive and popular. Thus, e-commerce design tends to combine a look and usability that is at once unique and eye-catching. In this post, we showcase 35 attractive online store designs.

One of the trends we observed from this collection is a minimalist design style. Small details and accents (e.g. unobtrusive background patterns, icons, pictograms and typography) reflect a brand’s spirit and match the character of its products. Some websites, though, are unconventional, rich in visual effects. Please note that the selection of stores featured in this showcase was based more on design aesthetics than usability. But we made sure that the websites included here provide at least an easy shopping experience, even for foreign visitors.

Showcase of Beautiful Online Store Designs

Blik
Blik manufactures whimsical removable graphics to spice up the walls of your home. Even though the “About” info gets a bit lost in the large product preview in the center, getting an idea of what Blik is all about doesn’t take longer than a couple of seconds. Aside from the stylish look, the easy shopping experience is what makes this design exquisite: all products are categorized by tags, the thumbnails are big, product descriptions are detailed and supported by decal outlines, and quick tips are placed here and there for maximum assurance. Vintage-looking faded colors and rotating logo add considerably to the elegance.

Fred Perry
Fred Perry’s e-commerce store has a contemporary and elegant look, conveying key features of the brand very well. The stylish grayscale color scheme, along with sparse text in Helvetica font, make an impact. The design naturally combines Flash and JavaScript. The mini-cart window, the readable layout of the shopping cart and checkout pages, the usable navigation and informative product descriptions all up to a slick and friendly shopping experience.

Nectar
The website for clothing and accessories boutique Nectar was designed by Sunrise Design studio. The website’s structure allows you to browse goods and make purchases with ease. A muted palette and slipshod watercolor strokes in the background give the layout a positive feel. By the way, if you visit the designers’ portfolio page, you’ll see that painted styles must be their passion.

Tommy Hilfiger
Another giant brand: Tommy Hilfiger. This design relies on simplicity, a comfortable shopping experience and its corporate identity.

Seibei
Now, that’s a design you will not forget! The site has a very simple, even minimal navigation combined with a striking “cartoonish” design. Product pages are clean and straightforward. Nice and unique design solution.

Bellyshades
The design of German club-wear and accessories store Bellyshades stands out for sure. The vibrant acid colors, insane typography and animals that stand in for shopping carts will leave you anything but cold.

Ten Little Monkeys
This design has a very strong visual appeal; vibrant colors work well on the dark background, the navigation is colorful yet intuitive (notice how the section for girls and boys are distinguished). Also, the choice of typography is appropriate for the shop’s main objective: selling branded children’s fashion and gifts.

DogCollars.ca
Here’s another beautiful e-commerce website: DogCollars.ca. It’s a simple HTML website with a neat grid-based layout, a warm chocolate color and big high-quality thumbnails. The design is minimalist but not plain, and it delivers a satisfying shopping experience.

’47
Premium sports apparel brand ’47 has an interesting history: “This is a classic story. It’s the American dream come to life…” Thus, the company emphasizes the individuality of its brand in its store design and associates that brand with a community. The website combines jQuery and Flash, which slows the loading speed, but given its objective, this is not critical. Creative visualization and a well-implemented shopping mechanism make for a wonderful e-commerce design.

Storyville Coffee Company
Creating an e-commerce Flash platform, let alone a good one, is challenging. In addition to the Converse store profiled above, our showcase includes another fully Flash-based online store: Storyville Coffee Company. This one sports a pleasant coffee theme (appropriately enough), an original table-like product viewing area and an easy shopping process.

Narwhal Co.
Accessories made from recycled ties? Yes! Narwhal Co. produces original jazzy merchandise from recycled ties, including wallets, wrist wear, covers and cases.  The tie theme in the website’s header and footer, the stylish icons and the inventive product slideshow on the main page give this design a special flavor.

The Famous 4th Street Cookie
Beautiful typography and high-quality images make this a tasty design.

Via Snella
The website of Swedish male fashion brand Via Snella is clean both in design and usability. The store itself is not very big, so the product gallery is not cluttered with the superfluous navigation bars, announcements and slideshows that are typical of large comprehensive online stores. Instead, the background of the fancy product thumbnail grid is made up of a classic black and white scheme, along with austere typography and plenty of white space.

Twelve South
Twelve South creates accessories exclusively for Apple computers. No wonder Apple’s style can be felt both visually and in the functionality, which is a compliment enough to Twelve South’s store design.

Godiva
High-quality food photography against a light minimalist background is quite effective for Godiva Chocolatier’s store design. Seeing those yummies on the main page is all it takes to hook you. Tons of products are available here, but the sophisticated navigation system and clean layout make shopping a comfortable experience. The shopping cart and checkout pages adhere to principal usability standards.

Marc Hansen’s Comic Book
An original, striking and beautiful design that perfectly sets the atmosphere and communicate the style of the designer and his main product – a comic book.

Vanilla Vanity
Now, that’s a weird web design. The products offered in the shop are just as weird, by the way. An original, unique design which deserves a spot in this showcase.

Atom Bicycles
A very simple, clean and stylish design with unusual navigation and good-looking product pages.

Converse
One would expect a great design from top-class brand Converse. Our expectations are met. Despite being entirely Flash-based, Converse’s online store is quick to load and easy to navigate. We see no heavy graphics or fancy Flash transitions here. Converse’s brand is communicated well by means of simple effects, including concrete and jeans textures, hand-drawn product selection frames and grungy graphics. The buying process is similar to the famous sneakers themselves: comfortable and painless.

Steve & Co.
Aside from its refined and clean appearance, the website for leather accessories store Steve & Co. is remarkably usable. For instance, the whole shopping process requires little jumping around: you can browse and preview products, add them to the cart and review purchases without reloading the page.

iWorkwear.nl
This design has plenty of white space, making the black and yellow scheme especially appealing. There is no visual appeal, but the site works very nicely and it is very user-friendly. Even if you don’t speak Dutch, getting your bearings on iWorkwear.nl is easy because of the intuitive placement and highlighting of elements. A transparent table of brands sold in the right sidebar helps us easily find clothing without having to use the main navigation panel, which is in Dutch.

Sony Style USA
Sony Style USA is a pearl in our collection. It would be hard to find a more comprehensive, sophisticated and seamlessly designed e-commerce website. If you are looking to buy a laptop, you can read exhaustive product overviews, compare and browse reviews of similar products and even configure the computer you’ve selected, all without leaving the website. Even with the variety of products, the store is well organized and easy to navigate. The dark and light colors, along with the Flash and jQuery, perfectly fit this online store.

Abel & Cole
The spirit of a small, environmentally friendly neighborhood grocery store is well reflected in this design by means of charming sketches and hand-drawn typography.

Hollister Co.
Hollister Co. sells Southern California-inspired casual wear. The store has a cool vintage style. Products are displayed horizontally; hover over an item to see its price and available colors without leaving the page. How usable! Warm sand colors and sepia-toned beach photos reflect the “SoCal” spirit of the brand. And we sure like those “Dudes” and “Bettys” categories!

Gargyle
Gargyle online warehouse website is simple yet cute. Blue dotted lines and lovely icons wonderfully reflect the old country-club lifestyle that Gargyle that aspires to.

Giraffe
A colorful design for young families and children. The design perfectly sets the atmosphere for the shopping experience. Notice how well PayPal-payment is communicated.

farfetch.com
Well-known fashion boutique farfetch.com has an elegant black-and-white design. Nothing gets in the way of a pleasing shopping experience here. The auto-detection of your location and currency are stylish features.

Winestore
Everything here is about elegance, style and creativity. Vibrant pink against a white background makes for a vivid yet clean website. Beautiful typography and the “bar code” header complement the company’s image well. Pictograms with information about the wines’ color, body and flavor are a smart addition.

Ork Posters!
This one will interest all those who love typography, print design and data visualization. Ork Posters is the brainchild of Jenny Beorkrem, whose original typographic neighborhood posters quickly became a success. The online store is nothing short of a manifesto of typography love.

laPatate
Belgian t-shirt store laPatate has a creative and funny design (the men’s tee samples enjoy the lion’s share of laughs). The website is available in French only, but clear cart icons and a standard check-out page make for an intuitive shopping environment.

Snupped
Snupped is a nice dark-themed store that sells laptop sleeves. You can buy pre-made sleeves or build your own design, configuring the size and choosing from a number of funky patterns. The products are not tagged or grouped into categories, but this is hardly an oversight given the store’s small size.

Cellarthief
Cellarthief is a beautiful online wine store that sells only three wines at a time. The Apple.com-inspired content blocks against the real-looking wood background shows how the classic spirit of the wine industry is fused with modern design values.

Harry Winston
A lot of glamour, shine and luxury is in this one. Harry Winston’s jewelry store features an amazing design with images that mix typography and jewelry.

Olive & Myrtle
Olive & Myrtle produces beautiful sustainably developed goodies. A clear layout, soft natural colors and subtle typography make this website look modern and eco-friendly.

Hokey Croquis

CuCuu
CuCuu is a charming little store that sells bags and accessories made from recycled materials. The design is minimalist and the shopping experience simple.

Teez
Rules and standards are made to be broken from time to time. You don’t have to speak Russian to tell that the design of Ukrainian t-shirt store Teez is far from ordinary. A chaotic mash of text and images is obviously a new trend in Web design. Despite all of this, the shop looks and feels pretty darn awesome. Take a minute to explore the website and you’ll see how easy it is to shop there. Off-the-chart creativity!

Kinki Micks
This small store sells exclusive car wheels and vintage riding accessories. The design has a simple retro style that perfectly fits the company’s profile.

Red Is White
Red Is White’s design is bright, and the shopping process is pretty solid (the power of inspirational Web design in practice!). A carefully arranged grid, unobtrusive colors and a smooth corduroy-looking texture make the website visually eye-catching, yet they do not eclipse the products. The way the t-shirt thumbnails are displayed is quite handy: just roll over an image of a print to see how it looks on a model.

If I had to looking for some attributes to describe the japanese style in web design I’d choose: essential, minimalist, with an intensive use of Adobe Flash, animations and music in background (mainly solo piano, inspired by Ryuichi Sakamoto’s compositions), traditional and modern at the same time. Here is a collection of some beautiful examples of japanese websites for your daily inspiration.

Japan Post Service

Ishiyama Senkoh

Moonlinx

Japan Association Press

Mitsubishi Real Estate Services

Mikihiko Kyobashi

ffffff

RiskyBrand

NTT Docomo

All Japan Kendo Federations

Karimoku

Idemitsu Kosan

DyDo Drink

Fit For My Life

Mitekero

The most important factor for minimal to work well, as it should be with all design styles (but, not always the case), is the content. Without good writing or a strong portfolio, the style has no impact and the web design looks cheap. And that is the key to minimal, in the hands of a skilled web designer, they know that the site design has to accentuate the content, and the content, in return, accentuates the web design.

Creating an effective minimal web design, at first thought, would seem to be the cheaper, easier and quicker option to merely throw up a site That is most definitely not the case. Knowing what elements to strip out of a page while still maintaining usability, is just one of the the many skills you will need to successfully build a minimal web design.
The collection of sites below, are great examples of recent successfully designed minimal websites.

Minimal Personal Blog

Mark Boulton

Inkcover Blog

Alexander Limi

Trent Walton

Siimple

Ultra Minimal

Åh Studio

Julia Rothman

Hello Keepa

Remake

Minimal Personal Portfolio Light

super8 – Portfolio of Andrew Cross

Ignacio Ricci – Designer+Developer

Camtessa Design

Iconwerk

Klim Type Foundry

Lovers Town

Brilliancy

James Chambers

James Joyce

Tudinh Duong

Bunton

Minimal Personal Portfolio Dark

Espen Espelund

GraphicDZNR – Jesse Dodds

Arnaud Alves

Point&Anchor

Sveinn Davíðsson

Jeffrey Docherty

Jason MAYØ

Pierrick Calvez

Minimal Magazine Style

Life of My Story

ONE International

The Post Family

BB – Bisgrafic Blog

Corporate and Commercial Minimal Designs

Bespoke Kitchen Furniture

Bertelli – Biciclette Assemblate

Hair Ott

Miguel Buckenmeyer & Co.

Chaussettes Archiduchesse

HARTEN

Counter-Print.co.uk

Design Companies

Mark Boulton Design

Landor – Strategic Brand Consulting and Design

Paravel

Nordenswan & Siirilä

Zip Design

YCN

Onetwentysix

A Minimal Splash of Color

Fastlikerabbit

The Bigger Design, Inc.

Cubedroute

Second And Park

Minimalism and Flash

JØSHUA SERBÜS – Interactive Designer

Toy NY

Revolver Creative

Branch

Eleven Six

Yacht Associates

OurType Fine Type from Europe

Vincent Lamarche

Basically, I’m working on a project with the marketing team at Quicken Loans and Quizzle to raise $10,000 for ALS in 10 hours by asking everyone we know to donate $1 (or more if you wish).

We’re trying to use what we know (the Internet and social media) to help people with ALS.  You can read the full story here.

So, please consider donating $1 on 10/1/09. Check out www.tweetforals.com to learn more.

Smashing Magazine has been on Twitter for about a year now (@smashingmag), and it turned out to be a great medium to communicate with our audience, build connections, discuss design-related topics and give away some nice prizes. However, even a year later, we still don’t have a Twitter background page and now is a good time to change that. So because we decided to create our own Twitter page, we wanted to first find out how other designers do it and what tips and techniques they use to create a truly outstanding, beautiful Twitter page.

Your profile page is the only place on Twitter where you get opportunity to showcase your visual brand and possibly communicate additional information that can last longer than a tweet. You can customize your profile page by changing background, text and link colors. It’s as simple as changing the skin, but ability to change background image has allowed designers to create really unique profile pages.

Primary focus of this article is to explore various techniques to create unique, memorable and effective Twitter profile pages. However, before proceeding to the list, it is important to briefly discuss the structure of the Twitter profile page.

Twitter Profile Page

Most important thing to note is that the main content block in the layout of a Twitter profile page has the fixed width of 765 pixels, and it is always centered. This is good, because it makes it possible for you to show your background image using the extra space created on the both sides of the block when displayed at higher resolutions.

Other things that you should keep in mind:

• timeline background is always white
• menu bar background is always white
• footer bar background is always white
• logo is always the Twitter logo
• picture can be changed
• you can change text color, link color, sidebar background color and sidebar border color
• you can change background image and background color
• you can also tile background image
• the background image start position is always top left corner

Note that if you are only interested in designing a nice profile page, you can easily do that by incorporating a stunning background image and customizing text, link and sidebar colors accordingly. But if your intentions are to be unique, incorporate brand identity and communicate additional information, then you will need to be little bit more creative with your background image.

Tips & Techniques

Following is a list of profile pages, illustrating various tips & techniques that you can incorporate in your own backgrounds. Please note that most of these profile pages incorporate more than one technique, and you should also consider mixing multiple techniques according to your own requirements.

Merge Background With Timeline / Sidebar

This is probably the least used technique among all tips and techniques discussed here. By merging your background graphics with timeline and/or sidebar, you can create a unique layout with a very distinctive look and form.

@adamplitt

@gaksdesigns

Mix Tiled Pattern With Other Graphics

Twitter allows you to integrate one background image that can be either tiled or not. But you can create unique look for your profile page by creating a background image that has both.

@spurrachel

Reveal More With Your Pictures

Your profile picture (it can be an avatar, logo or photo) is your main identity on Twitter; it will be displayed next to every tweet that you send out to your followers. For instance, you can use a background image that is somehow related to your profile picture and thus convey more information about yourself or your brand. In other words, you can use this classic approach of creating design around your logo or brand identity to communicate information in a more effective way.

@Doubleolee

@mailchimp

Reveal More With The Page Peel Effect

If you have an established visual identity, you can use page peel effect to show users who is actualy behind the Twitter profile. This technique provides you with a freedom to design the rest of the background as you wish, because you may no longer need to worry about integrating brand visuals and its colors.

@sitepointdotcom

@benek

Add Personalized Sidebar To Your Profile

The following profiles illustrate a specific use of the first technique by adding sidebars to the layout. You can add such panels to effectively highlight additional information that you want to communicate.

@aaronmillerillz

@robingood

@sickbrain

Show Yourself

In social media world, you are the brand. With Twitter, being one of the major players in social media, showing yourself on the profile page can be very effective way of strengthening your brand and community around your website.

@problogger

@unmarketing

Use Icons and Logos

Following profiles illustrate simple, yet very effective technique to communicate association with or involvement in certain community, service, skill, etc by showcasing relevant icons or logos.

@lanesa

@rjacquez

Add a Header Bar

Adding a header bar could be used for creating unique look for your profile page, but it can also be used to separate Twitter logo and top menu (which contain links to user’s profile) from the rest of your page.

@thegraphicmac

@elitistsnob

Less is More

Andre Gide once said that “Art is a collaboration between God and the artist, and the less the artist does the better”. Here are few illustrations of how minimalism can be used to its full effect:

@line25blog

@idesignstudios

Accommodate the 1024px Width

If you care how your profile page will appear on 1024px wide screens, you will need to work near the top and left borders of your background image. Here is an example of how a nice visual design can be used properly for various screen resolutions:

@SohTanaka

Here is another interesting technique to ensure that your profile page has a very similar look on both 1024 and 1280px wide resolutions:

@adamplitt

Use Typography

Use of typography in Twitter backgrounds is not very common; however if used creatively, you can create unique, very effective profile pages to communicate additional information.

@dickieadams

@iamFinch

Put Information In a Memorable Way

Composition is the plan, placement or arrangement of the elements. You can arrange elements on your background in a unique and memorable, showcasing information that is important to you and your readers. This techniques allows you to create an environment, show your personality and provide additional information.

@sharebrain

@iamkhayyam

Do Whatever You Want To Do

The more original, creative and distinctive your background image is, the more likely it is to be memorable and strengthen your online presence. Experiment with beautiful, personalized illustrations, background images and typography. Make sure that your background image has a personal voice, doesn’t look generic and has an unusual twist. Your first time visitors will appreciate it.

@ramesstudios

@NIK0_BELLIC

Gallery

Now that we discussed a couple of techniques for the design of Twitter backgrounds, here is a collection of some well-designed profile pages to tame your appetite for Twitter profile page inspiration.

@MdFilmFestival

@fragments77

@happytreefriend

@LoungeKat

@ellingson

@hootsuite

@G_Obieta

@willbryantplz

@gavrog

@grant_clark

@hugeinc

@JJunkins

@Baldy67

@thelaughbutton

@bickov

@jayjdk

@nathanhoad

@robertomas

@mayhemstudios

@ThirstEase

@cameronolivier

@studio3k

@sixreffie

@TheTwiddict

@mountainash

@Hallisar

@mywayhome

@TheArtificer

@webdude75

@colourofair

@jodyphillips

@emilychang

@ijustine

@boagworld

@collis

@chrisspooner

@webb_art

@Hicksdesign

@rww

@ThemeForest

@technikwuerze

@Designfeedr

@Malarkey

@Trenti

@zomigi

@carsonified

@WiliamAu

@wpbeginner

@brandonacox

@inspiredmag

@guardiantech

@DesignerDepot

@carywood

@designia

@_finderskeepers

Tools

• Twitter Background Template: Free Twitter Background template in PSD format from “Fuel Your Creativity”, includes guides that match up with different resolutions from 800×600 to 1900×1200.
• Peekr: A bookmarklet that you can drag to your browser’s toolbar and click on to see a twitter user’s entire background graphic and then click again to get things back to normal.
• Twitter Background Checker: Lets you check how your Twitter profile looks in smaller or higher resolutions.
• ClickableNow: Add Clickable Links to your Twitter background image.

Additional Resources

• Twitter Background Design How-To and Best Practices
• Design a Unique Twitter Background
• 4 Ways to Optimize Your Twitter Background
• Resource Kit To Create, Customize & Find Twitter Backgrounds

Related posts

• Textures In Modern Web Design
• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• 8 Useful Tips To Become Successful With Twitter
• 99 Essential Twitter Tools And Applications
• Birdies: Cute Free Twitter Icons For Your Blog

About the author

Saud Khan is a professional software/web developer and consultant with over 12 years of professional experience. He is also founder of W3Avenue, an online publication providing advice & resources for rapid web development. You can also follow him on Twitter.

When I’m looking at excellent websites for design inspiration, one of my favorite aspects of design to notice is the navigation menu. While I enjoy seeing excellent designs of all types (minimal to artistic to colorful to dark) and various aspects of the site (including headers and footers), a well-designed and well-executed navigation menu can have more impact on my appreciation of a site than any other single piece of the design.

In this post I’d like to take a look at more than 50 stellar examples of navigation menus that positively impact the design of a website. The list includes a great deal of variety. Regardless of what you personally prefer, there should be some inspirational examples in here for you.

Housing Works

30elm

Nuttersmark

Paiko

Good

Soh Tanaka

Matt Dempsey

Web Design Ledger

Bridge55

Rzepak Pure

Fall for Tennessee

Digitalmash

BlackBook Magazine

Thuiven

Valley Creek Church

Branded07

Kyan

Carbonica

Remedy Drive

SpaceCollective

Aten Design Group

Power to the Poster

Lift Interactive

Surfstation

Ad Fed

College Park Church

WWD

Jamie’s Italian

StyleSpion

Grooveeffect

Rockatee

Boxwish

The Resume Girl

Vitor Lourenco

Ashville School

Buffalo

Africa Tour 2008

Designsensory

Jobs on the Wall

Aptana

Stucel

MacAllen Ridge

Create and Live

The 9513

Scott Mallinson

Paolo Boccardi

Interactive

Mint

DrupalCon DC

New Song Church

45royale

Mia & Maggie

I found some cool little vellum envelopes that they fit perfectly in, completing the package. As a primarily web creative director/designer, one of the last little bits of print I get to enjoy these days is business cards – and as far as business cards go, I don’t think anything beats letterpress if you can spare the extra expense.