Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 06 2013

04:44

30+ Yummy Dessert and Candy Website Designs

There’s nothing like looking at pictures of candy or desserts to get the mouth watering. For designers, viewing creative designs can have a very similar affect! Sometimes just even the sight of a unique font or clever use of texture can cause a creative mind to start “watering” with ideas.

The following list of websites are all dessert, bakery, or candy websites – and all are designs that have more than a few inspiring aspects. A few are amazingly easy to navigate along with a clever design. Others have a beautiful home page, while some are creatively interactive. A few contain photography too brilliant to pass up. Some of the best below will get both your saliva and creative juices flowing, so you may want to have your favorite treat to munch on as well as a pen and paper handy for phenomenal design ideas that appear due to inspiration.

Be sure to share which are your favorites or even those you think are not worthy of inclusion in this collection. If you have a favorite dessert or candy website design that’s not included in this list, tell us about it!

Wonka: Feed Your Imagination

Hershey’s Almond Joy and Mounds

Hershey’s Bliss

Dylan’s Candy Bar

Sweet Street Desserts

The Dessert Lady

Haagen Dazs

Necco

Smarties

Just Desserts

Desserts by Lori

Chocolate Covered Katie

Ooh La La Sweets

Crave The Dessert Bar

Cold Stone Creamery

Pepperidge Farm Cookies

Hammond’s Candies

SugarPova

Zingerman’s Candy

Nothing Bundt Cakes

Susie’s Cakes

CakeSweetCake

Famous Cookies

Candy Bouquet

Pies-n-Thighs

Sugar Pop’s

Flix Candy

Hoosier Mama Pie Company

Pie Corps Sweet and Savory

Caveman Cookies

Bouchon Bakery

Pie Sisters

Otterbein’s Bakery

Paradise Bakery: Giant Cookie

Emporium Pies

One Tough Cookie

Crown Candy Kitchen

November 08 2013

13:19

25 Incredible Examples of Flat Design

It almost seems that this year flat designs have taken over the world of graphic design by force, but especially in the arena of mobile apps with the first industry-shaking flat design being for the iPhone5. Reality is that flat design has been around longer than the emergence of the iPhone5, but of course it was Apple that helped to bring such cross-industry awareness to the design style.

You ask almost anyone who owns an iPhone5 or who has read about the design in the news, and they’ll describe flat designs as, well, flat. In the design world, flat indicates a design style that avoids 3D effects, animation, and other bling-bling. Most flat designs also include lots of illustration, bold use of colors, and fairly minimal layouts. Just as with any style in graphic design, however, most flat designs do not include all of these aspects. A design can be usually agreed upon as flat if it includes more of these minimal aspects and less of the “extras”.

As mentioned beforehand, you can find flat designs in almost every area of graphic design. The list below includes websites, icons, and mobile apps that most would agree fall under the “flat design” category. Most very clearly follow the guidelines, if you will, for flat, but please feel free to share in the comments below if you have found a better example.

Websites

The following flat website designs use several flat aspects in a large part of the design scheme. A few do include a bit of animation, but were so minimal that they still fall under the flat design category.

Operativnik Website Design by Felix Baky

Bedford by Samuel James Oxley

Sacha Greif

Fostr

Neueyorke

Tivix

Bob Galmarini

Mike McQuade

Enso

Taasky

Layer

Icons

Flat icons are becoming much more abundant and easy to find as popularity in this design style has grown. Let us know if you have some of your own to share!

Flatilicious – 48 Free Flat Icons

99 Designs Icons by Northwood

Flat Icons Pack by Martz90

Circle Icons Pack by Martz90

Apps

In the app world, flat has almost seemed to become synonymous with everything “hip”. Google and Apple both seem to have taken a liking to the style, as well as the following apps and designers below.

TypeGrid by Ye Joo Park

Postcard iPhone App by Yasser Achachi

TV iPad App by Michal Parulski

Flight Search App iOS by Yasser Achachi

Flat Mobile App Music Player by Yasser Achachi

Samsung Smart Home App Concept by Ali Rahmoun

Canopy.co

Learnist

Workout Trainer

Color Zen

Which of the flat designs above do you think represent this style the best? Were there any designs above that you think should not have been included in the list?

November 01 2013

13:41

Free Resources for Creating a Flat Design

Flat designs are taking over quite quickly it seems. I doubt anyone could argue against it being the latest and greatest for (fairly) new trends on the web, in mobile devices, and even in print. The simple description for a flat style of design is one that lacks 3D effects, such as bevels or drop shadows.

The stylistic details of a flat design can vary somewhat, just as with most design styles. Usually, though, a flat design is quite minimalist with primary-ish colors and lots of “white space”. The font is usually thin without too much flare. Boxes and buttons are, of course, without strokes or 3D effects. Some flat designs do contain shadows, but these are usually flat-ish as well.

Whether you are new to flat design or simply need some fresh, new resources for your next project, most should be able to find a few items below to help. The list below is divided into 5 categories: UI kits, icons, templates, WordPress themes, and tutorials. The best part? All are free. The ones that specifically mention “free for commercial use” are noted as well. Have fun browsing and be sure to let us know of any other amazingly free flat resources.

UI Kits

A UI kit is a user interface collection that comes with all the parts and pieces you need to design your own website. Usually they are PSD but sometimes will come with other components as well. While you can use the color scheme in the file, you can create your own color scheme. They also come with patterns, brushes, and much more. Hence, UI kits save a web designer a lot of time, improving workflow and decreasing time spent on projects.

DesignModo Flat UI

This free (commercial and personal) flat UI kit from DesignModo comes with all of the basics you’ll need to create a flat user interface – buttons, menu, input, tags, switches, icons, color swatches, glyphs, and much more.

Modern Touch UI Kit

PixelKit offers this flat UI kit. It comes with a very unique, slick look and feel and the free version is for both personal and commercial use.

Flat Design UI Components

A beautiful UI kit, this one from GraphicBurger comes in a well-organized PSD file. The color scheme is nice for when you need a darker look for a website or application.

Free Flat UI Kit

This amazing free kit includes flat icons, buttons, and more in a blue/white color scheme. Just be sure to contact the developer, Enes Denis, about commercial use.

Featherweight UI

Designed by Sarah Hunt of sarahjustine.com, this kit is completely free for both personal and commercial use. It is both vector-based and retina ready, and the font works both online and offline.

Flat UI Kit

Freepik.com created this aweome free UI kit for Webdesigner Depot. Enter your email address to download it for both commercial or personal use.

Icons

Flat icons are, as mentioned already, are those that have no 3D pop. They are simply flat. Most come in the normal, flat style of primary-like colors. However, you can find a few that are line style and others that are even a bit uniquely colored, for a flat design. Icons are another great way to save time in both web and print design.

Metro UI Icon Set

This fantastic set comes with 725 flat icons that also come with a reflective quality if you decide to go less flat in style. The designer, dAKirby309, has generously make them free for use as long as you credit him in your project.

180 FREE Flat Icons

On a mission to providing Open Source resources for the WordPress world, WordPress Design Awards created this icon set for anyone to use in commercial or personal projects.

Free Flat Icons

This collection does not contain very many icons, but they are very unique. These are free for both personal and commercial use and are perfect for adding a unique touch to any flat design.

Free Flat Icons by Studio 4

In this free collection, you will find 47 icons designed with flat colors and style. The details are phenomenal!

100 Free Vector Icons

This set of line icons work great for a flat design. The precision in the icons are superb, and the best part is that they are completely free.

90 Royalty-free Flat Icons

With round and square icons, social media icons, common objects icons, and more, this royalty-free icon pack is amazing!

Templates

For those with even less time, templates are a great way to quickly throw up a website in a matter of minutes. Unlike a UI kit in which you have to arrange every element onto a page, a template already comes with elements laid out. All you have to do is add content.

Free Flat HTML5 Website Template

This free template comes with a call-to-action section, header and footer, portfolio area, and menu. With it all located in a single HTML5 file, you can easily edit it for your own use.

Free Flat Design PSD Template

A very minimal, flat design, this template for a website is called Illustrate. A WordPress theme is also available in this design.

Free Flat Website Template

The colors in this flat template are very calming, making it a great website template to use for a company that wishes to instill trust in clients.

iPhone Flat Design UI Templates

This collection of iPhone templates come with different pages in a free sample project download. A sidebar, settings screen, activity feed, user profile, and login screens are all included. Each of the screens come with 2-4 design styles.

WordPress Themes

For those creating a WordPress website, there are a few new themes out there that fall under the flat category. All of the following themes, except the first one, are Open Source themes just like WordPress, so no need to worry about hidden prices or commercial-use.

Photo Free Responsive Gallery WordPress Theme

This absolutetly free theme is very minimal and flat in its design. It would be perfect for anyone needing a basic portfolio website.

Surfarama

Each of the content boxes in this Open Source theme can include an image to enhance the home page. You can even color code the categories, upload your logo, etc without coding.

StrapVert

This is a great flat theme for easily showcasing images with blocks of text. The theme now comes with the option to turn off either the featured section, just the top section, or just the secondary section off.

Attitude

This incredible Open Source WordPress theme is retina ready, responsive, and very clean. The other big bonus to this theme is that it is also available with 5 different translation options.

Iconic One

This WordPress theme is not only flat, clean, and simple but also it is responsive, has a page speed score of 95+, and implements SEO. It also uses Live customizer so that custom changes are easy to make.

Twenty Thirteen

This theme looks good on any device and comes in a blog format. The flat style gives it simplicity and the color scheme is a nice burnt look.

Tutorials

If you are just beginning or even if you have some areas in flat design you’d like to improve upon, the following tutorials are excellent. All give detailed instructions on how to create flat designs or flat elements in a design.

How to Create a Website in Flat Design Style

This 17 minute tutorial from Designmodo uses their free UI pack listed in the UI kits above. Learn how to create a flat website in Adobe Photoshop using an interface kit.

Flat Long Shadows

This step-by-step tutorial is from Awwwards and includes resources and examples as well. Easy to follow along, this is probably one of the best tutorials on flat shadow design on the web.

Make My Design Flat

This is not necessarily a tutorial but best fits under the “Tutorial” category simply because after using it several times, you will probably will learn how to change code around for flat designs. Using this tool, you can convert any button into a flat design. Simply upload your code to receive the “flat” version that you can then copy and paste or use as a guideline for your own flat code.

Flat Design Tutorial (part 2)

This video tutorial thoroughly walks you through how to create a flat design. The designer gets a little detailed on downloading the resources he uses, but once he gets to the designing part, he does a great job of making it easy to learn flat designing.

Mastering Flat Design

You’ll have to sign up on TutsPlus to see this full series, but it is very much worth it. TutsPlus provides a comprehensive video course on flat design comprised of over 2 hours worth of videos.

Remember to share in the comments below if you have a flat design resource you’d like to share with the rest of us!

October 22 2013

16:43

30 Fresh Websites with Modern, Clean Design

So much is possible these days in web design with CSS3, jQuery 2.0, etc, which is why so many websites include animated imagery. You can design a website with all of the bells and whistles and it can still be mobile-friendly, most of the time.

However, my favorite designs still tend to be the ones that have a clean, modern look to them. Clean design doesn’t necessarily mean minimalist, although many are to a certain degree. A clean website often has simple navigation and well-organized elements on a page. The content is easy to read, find, and browse. Some clean websites include minimal animation. Many have a single page design, while many more include several pages, all with a clean look and feel.

What do I define as both clean and modern? By modern, I included the latest trends of this year. Parallax scrollling, full-page images, retro illustrations, and creative typography are all modern trends you’ll find in the collection below.

Very often, a clean design is used by design agencies, freelancers, photographers, artists, bloggers, and other creatives with limited content. The amazing feat is when a website with tons of content is cleanly designed. The list of modern, clean website designs include those with brief content and a few of the awe-inspiring ones with a plethora of content organized incredibly well. Keep in mind that for many of these, you will need to visit the site to get the full affect.

Playful – New Finnish Design

Marmoset

Zinio

Layer

Creative Mornings

PRSM

Refryed

Ditto

Kiawah Island Real Estate

Spacho

National Traveller

The Amazings

Seattle Cider Company

Nowhere Famous

Break It Down

Mulberry

Molly & Me Pecans

Vox Media

Toast

Kaus

Pigeon

HypeJar

Doylestown Ride

Kluge

Lore

Jim’s Scarf Project

Nuvo Magazine

Green Plant Swap

Run the Gap

Whoa Nelly Catering

July 23 2013

03:40

Comment Systems and Options for WordPress Users

There are a lot of different factors that help to make a blog successful, and reader engagement is one of those factors. A blog that has a high level of reader engagement is likely to receive a lot of quality comments from readers, and a blog that gets a lot of comments is likely to benefit from that high level of engagement.

The commenting functionality was a key issue in the rise to popularity for blogging several years ago. Visitors who were accustomed to reading static pages with no option to leave their own feedback typically appreciated the opportunity to interact with the blogger and other readers. Over the past few years it seems like more of this discussion has shifted to sites like Twitter and Facebook as many blogs have seen a decrease in comment activity. However, the opportunity is still there for blogs to benefit greatly from an active comment area.

In this article we’ll take a look at the different commenting options that are available to bloggers who are using self-hosted WordPress to power their blogs. Most of these options are also available for other blogging platforms as well.

Native WordPress Comments

WordPress includes the necessary functionality to support reader comments, and no third-party plugin or app is needed. If you’re using a free theme or a premium theme, chances are that the comment functionality will work just fine without the need for any of the third-party apps or plugins that we’ll be looking at later. However, that doesn’t mean that there are not features that can benefit both you and your readers through the use of these other options.

Regardless of what theme you are using, you can probably implement any of the third-party options relatively easily. If you’re creating your own custom theme from scratch, using a third-party option may be able to save you some time, as you won’t have to dedicate the same effort to design and code the comments area.

There are a few significant benefits to sticking with the native WordPress comments functionality. First, it gives you more design freedom since most of the third-party options give you very little control over the look and feel of your comments. If you are aiming to create a comments area that involve a unique look or will make a strong visual statement, sticking with the native WordPress comments functionality is likely your best bet.

Second, there are loads of great WordPress plugins available that involve the comments area, and most of them will only work if you are using the native comments functionality. For example, CommentLuv is a very popular plugin that will automatically add a link to the commenters most recent blog post, which encourages comments.

Third, many bloggers who have used third-party options and have wanted to switch back to the native comments have experienced problems, and in some cases lost all of the comments collected through that third-party app/plugin.

Fourth, the native comments tend to load faster than any of the third-party options. While this will make a small difference in page load time, it can still be a factor.

DISQUS

DISQUS

DISQUS is probably the most popular of the commenting systems, and it comes with a number of features that make it an excellent choice. For starters, designers will appreciate that DISQUS makes it easy to add a mobile-friendly comments section to a blog, and it can be used with responsive layouts.

DISQUS offers threaded real-time comments so commenters can reply directly to others and the conversations are easy to follow. Comments can also be voted up or down by readers.

At the bottom of the comment area DISQUS will also show links to a few related posts with a comment from a reader, which is great for helping to promote other content on your blog and encouraging more pageviews.

In addition to comments, DISQUS will also track and show reactions to your posts that have been tweeted.

Intense Debate

Intense Debate

Intense Debate is developed by Automattic, the people behind WordPress.  Like DISQUS, Intense Debate also offers real-time comments. Those who have Intense Debate accounts can accumulate reputation points, which can help their comments to show up above other comments with lower scores.

Increased discussion is encouraged through the option to subscribe to replies and the option to reply to comments by email.

Intense Debate also offers a few widgets that can be used on your blog to display recent comments, comment stats, most popular posts, and more.

As far as social integration is concerned, commenters can opt to send a simultaneous tweet when posting a comment.

Livefyre

Livefyre

Livefyre hasn’t been around as long as DISQUS and Intense Debate, but it has developed a strong user base. Livefyre’s main features involve integrating your blog and social media to benefit from the popularity of sites like Twitter and Facebook.

The SocialSync feature pulls in comments/posts from Twitter and Facebook, and you can reply and interact with these comments just like you could with standard blog comments.

Livefyre also includes a friend tagging feature so you can easily invite Twitter and Facebook friends to participate in the conversation. Commenters can also share their comments on Twitter, Facebook, and LinkedIn.

Another interesting feature is media embedding. Comments can include things like YouTube videos, photos from Instagram, slide decks from SlideShare, and more.

Facebook

Facebook Comments

As you have probably noticed, all of the third-party options that we have looked at include some sort of functionality to integrate social media into your comments area. Well, another option is to use Facebook’s comments option.

There are some significant pros and cons to using Facebook comments. First, on the positive side, it is a great way to increase your blog’s exposure on Facebook and to increase traffic from Facebook as comments will be shown on your blog posts and also on Facebook.

On the negative side, comments are not actually hosted in your database. Also, visitors will need to have a Facebook account in order to be able to leave a comment. While most visitors will have Facebook accounts, it can feel alienating to those who don’t.

Conclusion

Like many other things in life, there is no choice that is right or wrong for everyone and for every situation. I encourage you to read the information available from each option when you are looking for a comments system, and make the best choice for your own situation. If you do a few Google searches you will find blog posts from people who love each one of these options, and you’ll also find posts from people who despise them. I’d also encourage you to read some of these reviews and posts because there may be something said that specifically applies to your own situation that can help with your decision.

For my projects I typically use the standard WordPress comment functionality as it works well and allows more freedom in terms of design and the use of other comment-related plugins. When I don’t use the standard WordPress comments I typically go with DISQUS, and from my experience it has been a good solution, and it’s the one I prefer over the other third-party options.

October 12 2011

04:28

A Collection of Inspiring Blog Designs


  

Since their inception, blogs have often had some of the most innovative, beautiful and creative designs in the web design community. This is perhaps because bloggers are naturally expressive individuals who enjoy visual and written expression.

Whatever the reason, blogs are always a great source of inspiration if you’re working on a new website design. But what exactly makes a blog design successful? Personally I believe that truly great blog design lies in balance. Successful blog designs must balance the various elements such as typography, color, graphics and layout in unison. No one element should damage another, and where relevant these elements should come together in order to promote the content and user experience.

Today we bring you 30 incredibly inspiring blog designs. These blogs are quite simply examples of great design. We haven’t filled this list with blogs promoting overly flashy graphics or distracting visual elements. Rather, these sites each show great visual balance, poise and unique style. I encourage you to read the descriptions for each design and go and explore some of the awesome features and subtle details discussed yourself.

The Blogs

Illustrators Lounge
Illustrators Lounge uses a great monotone color-scheme that puts an emphasis on content. The charcoal covered layout is simple and clean, yet includes subtle touches of grunge, such as the watercolor splatters in the header background. The site utilizes @font-face in order to integrate some visually appealing typography in the post titles and date areas. Despite the limited color-scheme the site uses light and shadow to direct the readers eye – dark solid areas draw the eye, whilst white space is used for padding and balance.

Illustrators Lounge blog design

Jon Phillips
A perfect example of a wonderfully simple, elegant blog. This site proves that simple doesn’t mean boring. The design itself seems effortlessly simple and clean, but is full of subtle designer touches to make it stand out. Notable examples of this include the watermarked background reading ‘blog’, the faint pattern/light effect in the top left corner of the page, the @font-face integration, and the underline/drop shadow css effect on the active menu state. In short, this website makes content king through a simplistic layout, yet provides plenty of ‘visual dazzle’ through the small touches.

Jon Phillips blog design

Darwin Foodies
This blog displays it’s posts in a really creative way. The thumbnail style post previews fit perfectly with the site’s theme, as they are easy to scan, similar to a menu. This food blog utilizes enticing pictures to draw in the reader, as well as some great hover effects (the bold rollover ‘read this review’ really catches the eye). The menu is simple and effective, with a classic active menu state clearly depicting the current page.

Darwin Foodies blog design

The Brief
The Brief is a great travel blog with a highly unique design. The site’s content is split into clear categories, which are then organized via a series of colorful tags (e.g.: ‘sleep’, ‘see’ ‘do’). These categories names are more intriguing than most blogs and really help draw in the reader, through the emotive connotations. The typography is clean and elegant, using plenty of kerning for a classic look. The multicolored layout is held together well by the most prominent blue/gray combination.

The Brief blog design

Freelance Five
FreelanceFive is bold, clean and simple. The combination of very dark gray, orange and white is classic and effective. The content is well padded and feels very well balanced, avoiding the cramped feeling a lot of blogs have. As the brightest color, orange is used to draw attention, particularly on calls to action (e.g.: ‘be interviewed)’. The site has stuck to the basics, removing any clutter and focusing on key content only. This makes it a pleasure to browse, and you never feel lost. The tagline ‘Inspiring freelancer interviews – five questions at a time’ is succinct and informative, and provides a great welcome for new readers.

Freelance Five blog design

Jayme Stone
A highly creative blog, the header design of this site is incredibly eye catching. The handdrawn style instantly sets a homey, artistic feel for the blog, and the sketchy typographic menu just begs to be explored. The post content is somewhat cleaner in it’s presentation, yet still includes subtle artistic touches such as the typography and faint watercolor smudges behind the post dates. The black on white design provides plenty of contrast, which is used to help distinguish content areas.

Jayme Stone blog design

Queer Lisboa
This film festival site uses a reasonably standard layout, but is made much more interesting through it’s vibrant color-scheme and abstract diagonal lines. The header has a somewhat retro feel to it, using simplistic illustrations and patterns to add a creative touch. The content is expertly laid out, giving the site a really airy, well padded feel, whilst still dealing with quite a high volume of content. The visual hierarchy is very effective, drawing the eye down the page, from the logo, to the menu, to the post/section headings.

Queer Lisboa blog design

Simple Bits
SimpleBits has been a forerunner in the web design scene for years now, and they’ve always inspired simple, clean designs. Their latest iteration is no different, and is simplicity encapsulated. The design is largely based on great typography and visual spacing, yet this is beautifully framed by a subtle grungy background. The limited use of color is used to highlight links, whilst the menu consists of just four basic items. A wonderfully balanced website consisting of earthy hues and elegant fonts.

Simple Bits blog design

Mad About Makeup
Made About Makeup have used a really creative design for their blog. Everything about the design screams style and fashion. The charcoal background design is full of subtle marks and shapes, and provides a great frame for the central layout. The prominent product reviews area uses an animated jquery content slider, and is evocative of high-end fashion ads. The design uses plenty of subtle design touches such as ripped paper edges, wrap around heading areas and text drop shadows. Overall the pink, black and gray design works really well, with a large amount of content being displayed in a restrained, professional fashion.

Mad About Makeup blog design

Pelican Fly
One of those sites where it pays to delve into the subpages. Each page of this blog is like a work of art. The elegant typography and experimental HTML5/CSS3 features make it a joy to browse. The art is really in the details, and once you begin to notice the hover effects, indentations of content and text presentation you’ll really be inspired by this design. Not to be justified by a simple screenshot, click through and explore!

Pelican Fly blog design

Table 37
Another clean and simple blog design with a lot to offer. The light gray backgrounds of this site mean that the darker typography and bright logo area really pop. The use of subtle shadows helps distinguish content areas and adds depth – particularly in the header area. Content is well padded and presented, and the stripped down approach makes the site highly usable. The content is the most prominent feature of this site, and as such you can’t help but explore the blog posts on offer.

Table37 blog design

Gourmade at Home
A really light design that fits well with the foody theme. The simple illustration in the header instantly established a theme for the site, and the green color-scheme feels cohesive and relevant. As with a lot of food blogs this one is quite image heavy (after all – we apparently eat with our eyes). The post titles, sidebar headings and date areas utilize @font-face to integrate some awesome typography, and the bold orange hover effect is really eye catching.

Gourmade at Home blog design

Rogue-Dolls
Rogue-Dolls uses a really creative header as the key to their design. The charming illustration featuring multi-colored rain, combined with the umbrella logo sets the mood for a creative, unique blogger. The post layout itself is fairly basic, yet utilizes a nice heading area wrap around effective to add depth. The blue/green color-scheme fits well with the concept of rain depicted in the header, and is surprisingly impactful upon the mood of the posts and the reader.

Little Miss Heirlooms
A lovely blog design, featuring some of the nicest watercolor background effects seen around. The muted, watercolor color palette feels very homemade and artistic, and fits well with the vintage, creative theme. The featured posts area is engaging and breaks up the header/post area well. This site is yet another great example of @font-face integration, and the post titles and sidebar headings look beautiful.

Little Miss Sheirlooms blog design

Granville Island Works
Granville Island Works uses a very retro design, featuring western style typography, and an attractive fabric style page background. The welcome area creatively overlaps a two column layout, and the hand-drawn illustration fits perfectly with the site. The color palette is limited, and constrained to earthy tones (reds, browns, creams etc…).

Granville Island Works blog design

Art Equals Work
A very atmospheric, dreamy blog design. The light blue color scheme gives the impression of a skyline backdrop for the content, and the lack of harsh colors or strong contrast makes the site very easy on the eyes. Despite having multiple columns the central column containing the blog posts is clearly the most prominent, and the post titles help establish a clear visual hierarchy for the website. The subtle lighting and illustrations in the background are the key to what makes this layout so visually interesting, and the content seems to revolve around this foundation.

Art Equals Work blog design

Brice Lechatellier
One of the most richly colored blog designs we’ve come across, this site is simply beautiful. The subtle transitions in background colors create a really engaging lighting effect, whilst the colorful content typography adds to this multi-colored treat. The navigation is simple and clear, and the indented active state makes browsing the site extremely easy. The logo is very faint, a mere indent in the top left corner of the page, yet it serves to represent an elegant, understated brand.

Brice Lechatellier blog design

Riyuu
A soft, girlish website that captures the personality of the blogger perfectly. The fun illustrations add a lot of creativity to the page, and the various colors comprising the design are cohesive and well selected. A clear visual hierarchy is established as the eye is drawn down the page from the logo to the various blog post titles.

Riyuu blog design

Spyre Studios
Spyre Studios is a really clean, well designed blog that makes excellent use of padding and a limited color palette. The limited colors of the site ensure that the content is the focus, something which is further emphasized through the use of large typography (see the blog post titles). They also have a great area in their footer which conveniently displays their latest freebies and community news.

Spyre Studios blog design

The Netsetter
The Netsetter is now obsolete (although it’s moved to a blog column at Work Awesome), yet in it’s day was a well loved blog with an awesome design. The clean, bold, red design helps establish the site as a brand, whilst some very large typography makes the posts engaging and eye catching. The site is incredibly pleasant to browse, and it’s very easy to find the content that you’re after. The top featured post area is particularly eye catching and really helps draw you into the inner content pages of the site.

The Netsetter blog design

The CP Diary
A very emotional blog, as Jesse writes about her experiences living with cerebral palsy. The blog itself is beautiful, and the welcome area is not only emotionally engaging, but visually engaging. The artful typography used for the headings and subtle lighting effects throughout the site really set this blog apart and make it something truly special.

Nanyate
Nanyate is a wonderfully creative blog, with a great illustrative background design. The vector background sets the mood for the rest of the site, wherein the blog posts appear to be underwater. The colors are bold, but limited, and work well together. The menu is very simple and makes the site easy to browse. Each blog post uses a bright red call to action button (‘Read More’), which helps draw readers in.

Nanyate blog design

Web is Love
A very understated, charming design. The paper textures that comprise the background add a nice artistic feel to this blog, as does the earthy color-scheme. The content has plenty of padding and is pleasant to browse through. I recommend that while you explore the site you check out their free font ‘Napa’ as it’s awesome!

Web is Love blog design

Vaullt
A great monochrome blog design with a strong logo and featured area. The typography is the crowning achievement of this blog, and it’s applied with expert precision. Every letter spacing, line spacing, color and word placement seems to have been well thought out. The video area also has a great ‘overlay FX’ option, with some snazzy coding going on!

Vaullt blog design

Salvator
Salvator is simply background design done right. The background is so subtle that you hardly notice it, and it doesn’t get in the way of the content. However, it adds a huge amount to the site, providing texture, depth and detail, and is much more effective than a plain background would be. The sketchy photo manipulation in the blog header adds another touch of creativity, and the splashes of red throughout the site help tie everything together nicely. The content feels balanced and well presented, and the typography is really inspiring.

Salvator blog design

NKM Blog
Another great example of subtle background design, NKM utilizes subtle watercolor background details and a faint texture. The header area includes several photos of the blogger, positioned in polaroid fashion, to add a personal touch. The color palette for the site is limited, yet it uses touches of green to draw the eye to important areas (links and calls to action).

NKM Blog blog design

5 Pieces
5 Pieces is a bit of a classic blog, but still has some great design features to inspire us. The high contrast white/yellow on dark blue is really striking and the header graphic blends really well with the main background. The site uses several colors, yet doesn’t feel overwhelming.

5 pieces blog design

Leihu
A deceptively simple blog, this site should really be explored to see what it has to offer. There are tons of great touches to the design, such as a multi-colored menu hover effect, awesome menu active state, really nice image hover effects, and a cool ‘top of page’ slider effect. Overall the design is clean and beautifully designed. The font choices and colors all feel ‘soft’, making the site a really pleasant browsing experience.

Leihu blog design

EEPAP
A really bold and bright blog design, with a vibrant red background. The site has utilized abstract shapes to create a more unique experience for visitors. The green menu feels very interactive, as you’re encouraged to explore the creative icons. The bokeh background effect is a little busy for some, yet does create additional depth for the design.

EEPAP blog design

The Big Noob
The Big Noob is a well known and respected blog, in large part due to it’s innovative design. The site uses some great typography which is laid over a rich blue gradient background. Splashes of lime green are used to accentuate calls to action, whilst white is used for a second accent color. The large welcome area includes a rotating intriguing image aimed to draw people further into the blog.

The Big Noob blog design

(rb)

October 13 2010

21:00

The Ultimate Roundup of Blog Design Tutorials

Creativity has no end to it and especially designing has seen and is seeing a continuous growth in its field. To be creative we need to be updated with the latest updations, and WordPress the most popular blogging platform has seen a rapid development in a quick span of time. Mastering this can become quite a tedious and time consuming process in this case keeping the growing developments in mind.Designing may be quite fun to work with but learning those procedures and technical aspects may give you a tough time. Even the finest details are to be learn and mastered which is not an easy task with developments happening every minute. Tutorials help you in this case where all the help about any task is given in quite an illustrative manner as under the guidance of an expert.

So we present you with some of the tutorials which make make this tedious process easy for you to learn and master in wordpress blog designs.

1.Grunge webdesign

2.Chocolate-pro-wordpress

3.Clean grunge

4.Design grunge

5.Building custom wordpress theme

6.Build wordpress themes

7.Create a wordpress theme from scratch

8.Dark wordpress theme

9.Designing for wordpress

10.Design reviver premium theme

11.Elegant wordpress theme

12.Greenpress

13.Magic night themed webdesign

14.Myblues wordpress

15.Nature inspired painted background

16.Sleek textured Layout

17.Ultimate grunge design

18.Video Blog Web Page

19.Watercolored design

20.Web Layouts

21.Winter wordpress theme

22.wordpress theme

23.Wordpress theme webdesign

24.Old paper layout

25.Photography portfolio

26.Tutzor web 20 style design

27.Vibrant modern blog design in photoshop

28.Black design

29.Unique grunge design

30.Platinum web design

31.Sound system studio weblayout

32.Professional magazine web layout

33.Design agency layout

34.Website design studio

35.Make a green sleek web layout

July 26 2010

05:00

Creating a Stylish Blog Design Layout in Photoshop

One of my current projects is a redesign of my personal blog over at ChrisSpooner.com. The aim is to move away from the current fun and cartoony theme and give it a more sophisticated, minimal and stylish design. I thought this would be the perfect opportunity to create a blog design walkthrough. This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.

View full size concept

View full size concept

The design I’m working on for ChrisSpooner.com features a slightly retro beige and brown colour scheme with a burgundy red as a highlighting link colour. Subtle textures and patterns like the background noise, chiseled lines and inset text effects all help add the visual details to the design. Being a site that holds a fair few YouTube videos, the content area needs to be wide enough to accommodate at least 640px, which leaves just enough space for a thin sidebar to contain category links and a brief overview of the websites I run.
I wanted the footer to be a place where visitors could find a wealth of additional info about me, so it includes a list of latest posts from my design blogs, insights into the music I’m listening to and latest shots from Flickr.

A new document is created in Photoshop. I use dimensions of 1680px width to give a typical widescreen view, a height of 2000px or more to leave space to design the whole page and a resolution of 72ppi. The background is filled with a light colour from my chosen palette, which is a very light beige #f0efe8.

A little texture is added to the background using the Noise filter. Go to Filter > Noise > Add Noise and move the slider to around 2%. Also check the Monochromatic option.

Guides are used to visualise the layout. Create a mask and transform it to the dimensions of 960px, right click on your mask, then select Transform Selection. Alter the width in the Photoshop header bar.

A top heading bar is added and filled with a grey-brown (#6a675d). The layer is set to Multiply to allow the noise texture to show through.

A new pattern swatch is created to use as a fill for special elements. Go to File > New and enter dimensions of 5x5px. Using the pencil tool draw a diagonal line across the canvas then go to Edit > Define Pattern.

Switch back to the main document and create a thin selection underneath the header. Grab the fill tool and change the drop down to ‘Pattern’, then fill this selection with the lined Pattern swatch.

My logo file is pasted in and aligned to the centre margin. This particular badge/emblem was created in Adobe Illustrator (see the tutorial). A subtle Drop Shadow is added using the settings 12% opacity, 5px distance and 0px spread & size to seat the badge on the design.

The text tool is used to add a collection of navigation items. These items will be generated as Pages in the final WordPress theme. The Georgia font is used with increased tracking for a touch of style.

The same font is used on the opposite side of the header, but this time small icons are added to give visual clues for the subscription options.

A subtle container is added to the 960px width using two 1px lines. One is filled with a swatch from the colour palette (#dfddd5), and the other line is filled with white. When viewed at 100% it gives the effect of a chiseled line.

A tagline is added underneath the logo to introduce the website. A ‘non web font font’ (Tallys) is used to spice up the design. This will later be replicated using the @font-face CSS rule.

The same chiseled effect is added to the text using the Drop Shadow layer effect by changing the options to Normal blend mode, 100% opacity, white shadow colour at 1px distance and zero in the spread and size fields.

Now the header is complete, the main content is visualised using typical blog elements. The post date, title, category and comments count are all added as a post header. The most important item is the header, so this is given the largest type size. All links are given a contrasting red colour to alllow them to stand out to the viewer.

Videos are popular on my blog, so it’s important to create some kind of styling for them to blend in with the site. The diagonal lines pattern is used to create a background for the embedded video to fill out the whole content width.

Links to previous and next pages are important elements, so they are made large and prominent. Inner Shadow and Drop Shadow layer effects are used to continue the inset appearance used elsewhere in the design.

The same style is also used on the categories list. The list is designed to fill out the width of the sidebar, and is introduced with a header set in the same Tallys font. Displaying the post count is an option in the WordPress list_categories tag, so this will be styled up the match this design concept.

Another important element for my website is to showcase my main blogs. A list is laid out each containing a title accompanied by the website’s favicon and a short description.

The blog design is finished off with a large footer, which is filled with a dark contrasting colour. The layer is set to Multiply to allow the background texture to show through, and the patterned lines added as a border along the top edge to replicate the header.

The footer is used to display all kinds of social information, so the headers and lists are conceptualised in Photoshop. Different colours are required for the dark background, and different fonts are used for the various elements.

Scripts are available to pull in feeds from your Last.fm and Flickr profiles, so these are replicated in Photoshop to test how they would fit into the design. The Tallys font continues the generic heading style throughout the footer, and everything is aligned to the guides and margins.

View full size concept

The final concept gives a clear insight into how the website will look. Next up is to visualise how the inner pages will look, then the next step will involve coding up the design in HTML and converting the design into a fully working WordPress theme. Stay tuned for the next installment.

March 11 2010

19:43

December 15 2009

03:05

25 Beautiful Blog Comment Designs

Comments are a standard feature on blogs, but some blog designers have created a comments area that looks great in addition to offering the needed functionality. In this post we’ll showcase 25 blogs with excellent comment design. For more blog design inspiration please see our gallery site Blog Design Heroes.

eGrace Creative

eGrace Creative

Matt Brett

Matt Brett

Darren Hoyt

Darren Hoyt

Hicks Design

Hicks Design

Chris Wallace

Chris Wallace

Trent Walton

Trent Walton

Pro Blog Design

Pro Blog Design

QN5 Blog

QN5 Blog

Outlaw Design Blog

Outlaw Design Blog

Ordered List

Ordered List

DesignWorkPlan

DesignWorkPlan

UX Booth

UX Booth

Mr. Henry

Mr. Henry

Curious Romain

Curious Romain

justBcoz

justBcoz

StyleSpion

StyleSpion

Tutorial9

Tutorial9

Hell Yeah Dude

Hell Yeah Dude

Rockers Delight

Rockers Delight

ANidea

ANidea

Jonathan Snook

Jonathan Snook

Jeff Croft

Jeff Croft

Freelance Folder

Freelance Folder

Design Disease

Design Disease

Fuel Your Creativity

Fuel Your Creativity

For more design inspiration see:

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.

November 19 2009

02:56

Showcase of Excerpts in Blog Design

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

Work Awesome

Design Critique

Design Critique

Strip Turnhout

Strip Turnhout

Kaligram

Kaligram

Development Seed Blog

Development Seed Blog

The Swish Life

The Swish Life

Jord & Chan

Jord & Chan

Line25

Line25

UX Booth

UX Booth

Spyre Studios

Spyre Studios

Design Feedr

Design Feedr

The Visual Click

The Visual Click

Mark Forrester

Mark Forrester

Brad Ruggles

Brad Ruggles

Twirk Ethic

Twirk Ethic

West Coast Poppin

West Coast Poppin

The Photo Argus

The Photo Argus

Krftd

Krftd

Officeal

Officeal

Freelance Switch

Freelance Switch

Powerful CMS

Powerful CMS

Dale Anthony

Dale Anthony

Devot:ee

Devot:ee

Vectips

Vectips

10Steps.SG

10Steps.SG

Blog.SpoonGraphics

Blog.SpoonGraphics

X3 Studios Blog

X3 Studios Blog

The Art of Nonconformity

The Art of  Nonconformity

Istok Pavlovic

Istok  Pavlovic

Blue Dots Design

Blue Dots Design

Design Reviver

Design Reviver

Unblogged

Unblogged

Well Medicated

Well Medicated

Creative Tempest

Creative  Tempest

Kineda

Kineda

Francesca Battistelli

Francesca  Battistelli

Colorburned

Colorburned

GoMediaZine

GoMediaZine

Ecoki

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.

November 09 2009

01:28

Custom Wordpress blog design checklist and walkthrough

Sure you can sift through 1,000 of free Wordpress templates, but nothing compares to a custom blog design that differentiates your company or matches your existing website.

picture-26111111

Recently a past client of mine recontacted me for a custom Wordpress blog design, as an effort to help promote and expand her online presence as a children’s book author and child development speaker/writer. While designing the blog [view source file] I decided to make a checklist for future custom blog designs of all the various elements to design and consider when dealing with a standard Wordpress template.

While each blog design will vary from project to project, below are the basic areas and elements to consider when designing a custom Wordpress blog, along with images of my client’s new blog.

The header

header

While a header seems like a pretty typical area to always include in a blog design, a few things to include in the header area include:

» Logo/name of the blog
» Tagline
» Navigation
» Subscription and social networking buttons
» Search box

Also when designing elements such as the navigation, consider things such as rollovers and image sprites and how they will look and interact.

Main content area

This area typically requires the most attention, as there are various areas and elements to be considered. To keep things a clearer I broke down the main content area:

Text/copy styles:

» Titles of each post (H1)
» H2, H3, H4, H5, and H6 subtitle styling
» Paragraph text, address and preformatted text
» Quoted text
» Ordered lists
» Unordered lists
» bold, italic, underline and strike-through text
» Hyperlink color/rollover
» Image styling (ie: border color/thickness)

main_1

Post meta data:

» Comments
» ‘Published on’ and/or ‘publish by’
» Excerpt text (ie: Continue reading »)
» Tags
» Categories

main_2

Page/article navigation:

» Excerpt text (ie: Read more »)
» Page navigation links

page_navigation

Page and individual article appearance:

» How many posts will appear per page
» How each post will be divided from the previous and next post

Sidebar(s)

This area will most likely be the most unique from blog to blog. From single sidebars to double sidebars to sidebars with sidebars this is where you can get creative and also add great functionality to a blog. Here are things to consider when designing or choosing sidebar items:

» Social media links
» Subscription links (RSS/Email)
» Info about the blog
» Search functionality
» Categories
» Popular articles
» Most commented articles
» Flickr photo stream
» Recent news
» Twitter update(s)
» Advertisements
» Recent posts
» Blogroll (other blogs you like)
» Links
» Email forms
» Contact information
» Archives

sidebar

Comments

Intrigue visitors to comment by having a well designed comment area. When designing the comments section consider the design and layout for:

» The number of comments on the post
» Gravatars
» Anonymous reader icons
» Data and time of comment
» Hyperlinks within comments
» Persons name/handle
» The authors reply in the comments (make it stand out from the readers)
» How the comments will be separated from the previous and next comments
» What number comment they are reading (ie: 2 of 15)
» Text styling

comments

‘Leave a comment’ form

» Fields you would like the commentor to fill out (ie: name, website, twitter, message)
» Submit button
» Subscribe to comments by RSS
» Notification of comments by email
» Mandatory field indicators (ie: *)
» ‘Remember me’ check boxes
» Comment ‘preview’ button/option
» Bot prevention question field
» Text styling/formatting for user

comment_field

Footer

footer1

The footer is another area that you can get creative with if you like or just leave room for copyright information. Here are some things to consider:

» Copyright info
» Navigation
» Contact info
» Social media links
» Resources
» ‘Back to top’ scrolls
» RSS and email subscribe options
» About info
» Hosting info

Other information to consider

If I’m handing off the PSD file to be coded I also like to include an instructions file that includes information such as:

» Background repeats (ie: repeat-x, repeat-y)
» Posts shown per page
» Line height of text (ie: 1.5em)
» Line height of lists (ie: 1.75em)
» Rollover information for buttons, images and text
» Visited, inactive and active link color
» Lettering spacing (where/when needed)
» Image border thickness (ie: 3px)
» URLs to all links (if your developers are setting that up)
» Any jQuery plugins
» How many posts show show in the sidebars “Top Posts”
» How the ‘Read more’ should be stated (ie: Continue reading this article »)

While the blog is still being developed by WPCoder, you can view the entire image source file until then. Will update with link once theme is up and live.

What other items would you add to the checklist above?

November 04 2009

22:43

Examples of Excellent Blog Post Formatting and Styling

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.

ANidea

Blogfullbliss

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

Blogfullbliss

Ecoki

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

Ecoki

Tutorial9

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

Tutorial9

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.

Web Design Ledger

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.

The Art of Nonconformity

Creative Tempest

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

Creative Tempest

Design Reviver

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

Design Reviver

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.

ANidea

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.

Viget Inspire

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.

Reality Equation

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.

CSS Globe

UX Booth

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

UX Booth

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.

Web Designer Wall

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.

Webdesigner Depot

Ecoki

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

Ecoki

GoMediaZine

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

GoMediaZine

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.

We Are not Freelancers

Colorburned

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

Colorburned

Well Medicated

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

Well Medicated

Blog.SpoonGraphics

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

Blog.SpoonGraphics

AppStorm

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

AppStorm

Macalicious

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

Macalicious

Bluemag.es

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

Bluemag.es

Foodess

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

Foodess

Carbon Sugar

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

Carbon Sugar

UX Booth

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

UX Booth

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.

Viget Extend

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.

Outlaw Design Blog

Line25

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

Line25

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.

Tutorial9

PSDTUTS

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

PSDTUTS

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?

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.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl