Vandelay Design Blog » Galleries

Showcase of Excerpts in Blog Design

Vandelay Website Design — Thu, 19 Nov 2009 02:56:38 +0000

Many blogs are using excerpts to display content on the front page. The use of excerpts gives designers a little bit more freedom and some opportunity to create an attractive and unique front page. In this post we’ll showcase for blog front pages that are using excerpts.

Work Awesome

Design Critique

Strip Turnhout

Kaligram

Development Seed Blog

The Swish Life

Jord & Chan

Line25

UX Booth

Spyre Studios

Design Feedr

The Visual Click

Mark Forrester

Brad Ruggles

Twirk Ethic

West Coast Poppin

The Photo Argus

Krftd

Officeal

Freelance Switch

Powerful CMS

Dale Anthony

Devot:ee

Vectips

10Steps.SG

Blog.SpoonGraphics

X3 Studios Blog

The Art of Nonconformity

Istok Pavlovic

Blue Dots Design

Design Reviver

Unblogged

Well Medicated

Creative Tempest

Kineda

Francesca Battistelli

Colorburned

GoMediaZine

Ecoki

For more blog design inspiration see our gallery site Blog Design Heroes.

Looking to Hire a Designer or Developer?

Post a free job listing to the DesignM.ag job board for freelance, part-time or full-time positions. Your listing will be seen by thousands of talented designers and developers. - Post a job for free.

35 Excellent Ecommerce User Interface Designs

Vandelay Website Design — Mon, 16 Nov 2009 21:44:24 +0000

While user experience is important on all types of websites, it is especially critical for ecommerce websites where visitors will be making purchases. A poor user experience will result in visitors having difficulty finding what they want, frustration during shopping, and many lost sales. In this post we will showcase the design of 35 e-commerce websites for your own UI design inspiration. The sites that are showcased in this post have also been featured at CartFrenzy, our gallery of the best ecommerce web design.

Russell & MacKenna

Jaqk Cellars

BCBGMAXAZRIA

Victoria’s Secret

Inkd

TOOBYDOO

Pottery Barn Kids

Innovative Baby

Baby & Child

Williams-Sonoma

The Company Store

Abercrombie & Fitch

Maui Divers Jewelry

For more design inspiration see CartFrenzy, our gallery of ecommerce web design, plus the following posts from our archives.

Looking to Hire a Designer or Developer?

40 Beautifully-Designed Navigation Menus

Vandelay Website Design — Thu, 12 Nov 2009 02:18:39 +0000

Navigation menus are, of course, important for usability purposes and creating a user-friendly website, but they also provide opportunities to add some visual appeal to the design. In this post we’ll showcase 40 examples of attractive navigation menus, including a variety of different types and styles.

For more on navigation menus please see:

Mission Community Church

Sushi & Robots

Wonderbra Ultimate Strapless

Organic Supermarket

Pasadena Symphony and Pops

West Coast Poppin

Veer

The Invoice Machine

Tennessee Vacation

Ekklesia 360

Show & Tell Consignment Sale

Inner Metro Green

Apple Reviews

For more design inspiration please see:

Looking to Hire a Designer or Developer?

Examples of Excellent Blog Post Formatting and Styling

Vandelay Website Design — Wed, 04 Nov 2009 22:43:23 +0000

While front pages are usually the part of blogs that get showcased, blog design includes a lot of other details that can add to the overall look and appearance of the blog, not to mention usability. The pages of individual blog posts provide opportunities for design and styling in a number of different areas.

In this post we’ll look at a few aspects of blog posts and showcase some design elements that are used to make the post more helpful, inviting, or attractive.

Intro Areas:

At the start of posts, some blogs include additional elements or design techniques to improve the post in one way or another.

ANidea

ANidea’s appraoch is pretty unique. Each post has a lead image that appears above the right sidebar, and just below that is a list of related posts.

Blogfullbliss

Blogfullbliss uses a lead image at the top right of each post.

Ecoki

Ecoki uses a thumbnail just to the left of the post title, followed by the author name, date of publication, and categories.

Tutorial9

Tutorial9 posts start with a lead graphic and links for social media voting/sharing.

Web Design Ledger

Above each post on Web Design Ledger is a lead image. Between the image and the post title is a comment count, date of publication and category link.

The Art of Nonconformity

New visitors to the Art of Nonconformity will be greeted with a brief intro to the site that includes links to get more information about the site or to subscribe.

Creative Tempest

Above posts on the Creative Tempest is a large lead image.

Design Reviver

Design Reviver also includes a large lead image above the post title.

Sub-Headers:

Readability is obviously important to any blog in order to build an audience and encourage repeat visits. One of the best ways to improve readability in posts is to make use of sub-headers, and to have them styled effectively.

ANidea

ANidea uses all uppercase letters on its sub-headers to make them stand out and break up the rest of the text.

Viget Inspire

Viget Inspire also uses uppercase styling, and if you click through to this post you will see that their use of sub-headers and bold text helps to make the post scannable.

Reality Equation

Reality Equation has a colorful theme, and the purple sub-headers fit well with the approach of the design and they look nice.

CSS Globe

CSS Globe doesn’t use different colors for sub-headers, but changing the font family and the size of text makes it an effective approach.

UX Booth

UX Booth uses different colors for h3 and h4 tags, which helps to visualize the flow or outline of the post.

End of Post Area/Promotion:

At the end of posts and before the comments, many blogs are including things like buttons and links for social media voting, and calls to action that will encourage readers to subscribe.

Web Designer Wall

Web Designer Wall includes some hand-drawn design elements in this area to go along with links to popular social media sites and a link to the previous post.

Webdesigner Depot

Webdesigner Depot includes an area for promoting submissions and votes at a number of social media sites, plus an icon and link to the feed.

Ecoki

Ecoki provides links to a few related posts and some icons with links to subscribe, share on Twitter and email to a friend.

GoMediaZine

GoMediaZine has a dark, textured area with social media icons and links, as well as related posts and subscription options.

We Are not Freelancers

We Are not Freelancers continues the hand-drawn approach to its design by using a hand-drawn heart, “Promote Me” text, and an RSS icon.

Colorburned

Colorburned includes an area for social media promotion, followed by a list of related posts with thumbnails for each post.

Well Medicated

Well Mediacated has an area for encouraging social media votes and an “about the author” section.

Blog.SpoonGraphics

Blog.SpoonGraphics uses the doodle icons for social media (these icons were created and distributed by Chris Spooner).

AppStorm

AppStorm uses a box that contains two simple lists for related posts and popular posts.

Macalicious

Macalicious has a related post list followed by 3 purple buttons for voting, bookmarking and subscribing.

Bluemag.es

Bluemag uses several icons for social media votes and sharing, as well as a list of related links.

Foodess

Foodess uses a list of similar recipes, and a few small links for social media.

Carbon Sugar

Carbon Sugar includes two large areas for voting and for subscribing.

UX Booth

UX Booth uses an attractive area with encouragement for social media votes.

About the Author:

Including author information on posts is also very common, especially on multi-author blogs. We’ll see a few different approaches to this here.

Viget Extend

Viget Extend show the author name and photo at the top of the post, rather than showing a brief bio at the end of the post as is more common.

Outlaw Design Blog

Outlaw Design Blog includes an author bio box at the end of posts with links to the author site and to Twitter.

Line25

Line25 includes a brief author bio with a photo at the end of posts.

Tutorial9

At the end of posts on Tutorial9 there is an “about the author” section with a brief bio, photo and a link to the author’s site. The bio also includes a subtle background image that helps to make it an attractive area of the post.

PSDTUTS

PSDTUTS includes the author area after a brief post intro at the top of articles.

What’s Your Opinion?

From a reader’s perspective, which elements do you feel are important to have on blog posts, and which design approaches do you prefer?

For more design inspiration see:

Looking to Hire a Designer or Developer?

25 Beautifully Colorful Websites – Part V

Vandelay Website Design — Mon, 02 Nov 2009 21:14:13 +0000

Color schemes have a huge impact on the end result of a design. In this post we’ll feature 25 websites that use bright and vibrant color schemes very effectively. This is the fifth post that has been published in this series. You can see the previous four here.

Gary’s Real Life

Yodaa

Chris Jennings

Sacramento Jazz Festival

Ryan Keiser

Juan Diego Velasco

Bellyshades

Flex360

The Alamo Basement

Villa Hope Adoption Agency

RCI UK

Vacation Rental Station

Knoxville

For more design inspiration see:

Looking to Hire a Designer or Developer?

25 Well Designed Sports E-Commerce Sites

Vandelay Website Design — Wed, 21 Oct 2009 23:22:01 +0000

Since I launched CartFrenzy a few months ago I have enjoyed seeing a lot of great e-commerce websites from designers all over the world. Many e-commerce sites aren’t much to look at, but there are plenty that feature attractive designs. In this post we’ll feature 25 sports-related e-commerce sites.

Bonfire Snowboarding Apparel

Sanction Snowboards and Skatboards

Columbia Sportswear

Adidas

New Balance Web Express

Puma

Zumiez

Under Armour

Dick’s Sporting Goods

For more e-commerce design inspiration please see:

Looking to Hire a Designer or Developer?

Design Inspiration: Splatter Effects

Vandelay Website Design — Wed, 07 Oct 2009 22:57:41 +0000

Splatters can be used in web and graphic design to create interesting effects that grab your attention. In this post we’ll showcase many examples from a variety of different types of design. One of the easiest ways to use this type of effect in your work is to take advantage of the Photoshop brushes that are readily available. See 500+ Splatter Brushes for Photoshop.

USMP: Carrera con Futuro

Paint Splatter Tutorial

Please Critique Me

Poster Typography

New Year Wallpaper

James De Angelis

For more design inspiration please see:

Looking to Hire a Designer or Developer?

Showcase of Social Networking Websites

Vandelay Website Design — Mon, 05 Oct 2009 22:24:08 +0000

Social networking and social media sites have been popping up everywhere over the past few years. The design of a networking site is important for a few reasons. First, it needs to appeal to the those users who are in the target audience of the site so that they can relate to it and feel at home. Second, usability is very important for these sites because their success hinges on the ability to get first-time visitors to become regular users and repeat visitors. If a site is poorly designed and makes it difficult to interact, chances are the visitors will not continue to use the site.

In this post we’ll feature a number of well-designed social networking sites.

Style.com Community

Odeo

Us Trendy

Loopt

Experience Project

Twitter

StyleCaster Community

For more design inspiration please see:

Looking to Hire a Designer or Developer?

Best of September 2009 from Our Network of Sites

Vandelay Website Design — Tue, 29 Sep 2009 23:28:15 +0000

Since we have a number of different websites that publish on web design-related topics, I thought it would be beneficial to do a monthly roundup to showcase the best of the month. In this post you’ll find links to a few posts from Vandelay Design and from DesignM.ag, as well as a selection of some of the best items that were published in September at our gallery sites.

From DesignM.ag in September:

There have been 15 posts published at DesignM.ag in September. Here are four of the most popular.

15 Tips for Breaking in as a Part-Time Freelancer

How to Design a One Page Portfolio in Photoshop

Design a Clean Portfolio Site in Photoshop

25 High-Quality Calligraphy Fonts

From Vandelay Design in September:

Since most of you reading this post have also seen the other posts at Vandelay Design from the month I’ll just feature two posts.

60+ Helpful Resources for Portfolio Design

Style Switchers Showcase and Resources

From Folio Focus in September:

Folio Focus, our gallery that showcases portfolio sites, also includes some free resources in addition to providing design inspiration. This month’s resources included some PSD files that can be used for personal or commercial purposes, and a HTML/CSS Template for a one-page portfolio (we worked with Snobby Slice on this template). For the items from the gallery that are showcased below, as well as those that are showcased in this post from the other gallery sites, the text links lead to the source and the images lead to the page on the gallery site.

Free PSD for Portfolio Site

Free HTML/CSS Template for One-Page Portfolio

From Cart Frenzy in September:

CartFrenzy is a showcase of well-designed e-commerce websites. Here are five sites that were featured during September.

From Minimal Exhibit in September:

Minimal Exhibit is a gallery of sites with a minimalist design style.

From Blog Design Heroes in September:

Blog Design Heroes provides design inspiration from well-designed blogs.

From TypeInspire in September:

TypeInspire showcases excellent use of typography and text effects.

Good Idea

NeverSleep/LetsRokk

I Am Only Here to Win

Shake and Pop!

Wash Your Hands

Looking to Hire a Designer or Developer?

25 of the Best Websites of Bands and Musicians

Vandelay Website Design — Wed, 23 Sep 2009 23:49:59 +0000

Websites from various types of entertainment-related industries can often be a source of design inspiration. Bands and musicians need to have a website that is attractive to visitors and provides all of the necessary information that fans will want to find. In this post we’ll feature 25 websites for your design inspiration. Also, please see 35 Inspirational Websites Designs from the Music Industry.

Chris Cornell

Alan Jackson

Darryl Worley

Justin Timberlake

Anthony Hamilton

Francesca Battistelli

Rocket Club

Daughtry

Death Cab for Cutie

Jake Owen

Zac Brown Band

Brad Paisely