Let’s face it: the classic blog post is boring. Barring the text and images, each one generally has the exact same layout. We see little originality from one post to the next. Of course, consistency and branding are extremely important to consider when designing a website or blog, but what about individuality? Does a blog post about kittens deserve the same layout as one about CSS hacks?

Too Easy?

Because installing a WordPress theme is so easy, anyone can have a blog up and running in minutes. While this is great, and we now have a wealth of blogs on countless topics, perhaps it’s too easy? Just thinking about the endless hours of effort that a print designer puts into creating the custom layout of a magazine article makes one respect the finished product so much more. A few individuals out there, though, are really breaking the mold of the blogosphere.

These guys aren’t using standard WordPress themes or cutting corners to make their lives easier. Rather, they are challenging themselves and producing some fantastic content. Pushing yourself to create original layouts and designs customized to the content of each post is a fascinating and entertaining way to build a blog.

But why has this trend of melding blog post and magazine article, the “blogazine,” not caught on with the masses?

The <cringe> Trend</cringe> with a difference

Hearing the word “trend” makes us designers shudder because we picture overused glossy buttons, drop-shadows and reflections.

But the blogazine trend could be unlike other trends for a few special reasons

Designing a creative layout for each new blog post, based on the content itself, requires skill, patience, dedication to the content and, most of all, effort on the part of the designer!

Let’s now look at three people who exhibit all four qualities:

The Pioneers

Jason Santa Maria

is one of the early innovators of this style of blogging and has been creating custom blog post designs since June 2008. With a background in print design, Jason had a vision to create a blog more in the style of a magazine, rather than obey the established rules of blog design.

While, yes, this is a redesign of sorts, I’m considering much more a rethinking.

~ Jason Santa Maria

Jason’s blog posts are fascinating and cover a wide range of topics, including design, typography, books, photography and film. The differences in the designs are sometimes just subtle changes in background or typography, but each conveys an entirely distinct message that it couldn’t if it was uniform with the rest.

Sometimes the changes are radical, but every one still has an element of “Jason-ness.” The header and footer are usually consistent, but even without them, you can still tell a Jason Santa Maria post from a quick glace.

We’ve made so many advancements in how we publish content that we haven’t looked back to what it is we’re actually creating. Many of us see the clear separation between things like print design and web design, but I’ve really been questioning the reality of why things are this way.

~ Jason Santa Maria

We Web designers don’t want to be regarded as lazy. Do we?

We have some of the most creative and inspiring designers in our profession, so why don’t we show our true potential in our blog articles?

Dustin Curtis

Dustin got a lot of publicity with his open letter to American Airlines, in which he suggests a dramatic redesign and rethinking of its online customer experience. The articles on Dustin’s blog are incredibly fascinating, and this user experience designer has clearly put serious thought into each one.

I got the chance to speak with Dustin about his work:

Q: What prompted you to create a “blogazine” instead of a traditional blog?

I’m never satisfied with my work. Invariably, two weeks after finishing a design, I feel like I can do better. When I originally tried to design my blog, I kept finishing a design, hating it and starting over. This happened ten or twelve times until I finally gave up. Eventually, I realized that each post could stand on its own and be its own design that fit the content. Despite the holdbacks of HTML and CSS, it has worked much better than I had even anticipated.

Q: Does having a blogazine really boost your creativity when it comes to creating a post?

The blogazine style does seem to boost creativity, and by a huge amount. I feel an intense amount of freedom when I’m not constrained by the box of a pre-formed design. I can open Photoshop and use it as a word processor with design functionality. The design really does complement — and become — the content, because they are built simultaneously, without regard for any of the other stuff on the website.

Q: Where do you get your inspiration for your blog articles?

I get inspiration from everywhere. I’m fascinated by medicine and the human brain. So many of my articles center on interesting things that I’ve learned while studying neuroscience. Sometimes I’ll start with a single word, like “sleep,” and develop it into a whole article as I research the fringes of the field. There’s really no set source of inspiration.

Q: Advantages?

The main advantage is one I didn’t anticipate. Doing a blogazine article requires a lot more work than a traditional blog post, and that has kept me on my toes; because such a large investment is required, I publish only what I feel are my best articles.

This seems to keep the quality fairly high. I start four or five articles for every one I publish. If I had a normal blog, that wouldn’t be the case — the other four articles would be published too, even though they wouldn’t be as good as the ones I do end up publishing.

Q: Disadvantages?

The biggest disadvantage is that CSS and HTML are terrible technologies that weren’t designed for page layout. They were designed for structured content presentation, like for a newspaper, where all the elements throughout the website are the same and are re-used. But I’m trying to make a magazine, where the content and presentation are inextricably mixed and unique. The way presentation CSS is supposed to be decoupled from the content HTML is totally counter to the mission I am trying to accomplish, and it makes coding the articles frustrating, messy and time-consuming.

My solution to this problem has basically been to ignore convention and use inline styling for most of the presentation code and extract the website-wide presentation layer into a separate CSS document. This takes forever and is not ideal. To put it lightly, I’ve developed a love-hate relationship with CSS.

Gregory Wood

is a web designer at Erskine Design and has created his website as an experiment in art direction. Not allowing himself to use the same old templates, Greg has created a fascinating website, with custom designs for each blog post.

Here’s what Greg had to say when I spoke with him:

Q: What prompted you to create a blogazine instead of a traditional blog?

Well, I’ve had a blog for ages and have always been bad at keeping it regularly updated, until I custom-designed a few of the posts sometime last year. I generally hate writing about Web-related stuff (I find it all a little boring), and I love designing, so I wrote about what I wanted (music and zombies) and designed each post around the content, although still housed in my old blog layout. The reception to the posts was really nice, and I enjoyed creating them, so for my latest website I set out to cater to that same audience and keep myself happily occupied at the same time.

Q: Does having a blogazine really boost your creativity when it comes to creating a post?

I wouldn’t say it boosts my creativity – the website is more of an outlet for it. Despite spending all week being creative at Erskine Design, it’s still quite liberating to design whatever you want, however you want, with no external influence.

Q: Where do you get your inspiration for your blog articles?

Usually I think of my best ideas when cycling or sitting on a tram or bus. It’s been a big thing on the Web over the years, where you get your inspiration from, and I’ve never really understood it. I think that looking at other people’s work all the time for inspiration is massively constricting. I find staring out a window for a while usually helps.

Q: Advantages?

The obvious advantage is that it looks better. But the content is infinitely more captivating as well. I’m not a great writer, and I probably write a lot of bullshit, but because it’s all nicely designed, readers are drawn in and end up reading more than one post. It’s also very fun to create and helps me grow as a designer.

Q: Disadvantages?

I guess some would say the time factor is a disadvantage, but if you love doing something, spending a lot of time doing it is justified. I can’t think of any disadvantages.

The Microblogging Revolution

Twitter, Posterous, Flickr, Facebook, the iPhone and countless other services make it incredibly easy for us to instantly post short musings, photos, video, thoughts and creations, which in turn has created a big gap between the micro post and the macro post.

Time for the ‘Macro’ post to shine

Longer blog posts with valuable content might not get the recognition they deserve, because the 140-character mindset turns people off of reading several pages of text. One way to combat this and make your content more appealing is by creatively altering the layout, using the blogazine technique.

Bridging the gap

We don’t know exactly where the world of blogging is headed in the next few years, but the increase in micro-blogging will definitely be a strong influence. Shorter attention spans call for drastic changes to the length of blog posts. Blogazines could cater to a generation accustomed to the longer articles of newspapers and magazines, becoming a bridge between the traditional article and the TwitPic.

Advantages

Forces you to think more creatively
Slipping into the habit of typing up your thoughts and clicking “Post,” without thinking about the layout of each article, is easy. By taking a little extra time for the art of blogging, your creativity will increase with your efforts.

Something different and exciting for your readers
If your copy of .Net or Computer Arts printed every article with the same layout, every month, would you still subscribe? Your readers would more likely return for new articles if they anticipate something new and rewarding.

Reduces the number of short simple posts
Your blog posts will have much more weight if you take the time to create a full article, rather than knock of a rushed post.

Makes ‘wordy’ posts more readable
If all you have is text, text, text, then people will be less likely to read it. Put a little effort into styling the content, and your post will become much more readable.

Disadvantages

It takes serious effort
Hand-crafting each blog post won’t be easy, but the rewards will be well worth it.

You need CSS and HTML experience
Anyone can download a WordPress theme and merrily post an article. But building a custom layout requires some experience with CSS and HTML.

Inconsistency
The layout of your blog will change dramatically from post to post and, if not done right, may strike your readers as being awkwardly inconsistent. Just look at Jason Santa Maria’s work. Every post is radically different for a reason, but a consistent vein runs through the posts.

No print layout experience
Because this style borrows many elements from print design, anyone who has worked only in Web design may find it difficult to change their way of thinking. Rules of typography and white space, for example, may throw you off. But practice makes perfect, and an endless supply of inspiration can be found in creative magazines.

So, is the blogazine route for you?

Obviously this style isn’t suitable for every website. It wouldn’t be practical for blogs that pump out three or four articles a day, but certain types of websites could benefit from it especially.

Portfolios

We have a habit of following trends very easily, especially in our portfolios. Instead of following the tired old practice of positioning screenshots of your work in a nice grid one after the other, why not use the blogazine technique and design a fresh page for each project according to the subject, client and color scheme?

Online Shops

Many online shops suffer from a certain blandness, following the pattern of: thumbnail grid, name, short description and then pagination. This layout may be good for usability, but there is a middle ground between scannability and visual appeal. The design changes do not have to be dramatic. In fact, drastically changing the layout would not be advisable for online stores.

CSS Galleries

A new CSS gallery seems to pop up every day, making it increasingly difficult to distinguish between all of them. While some of the higher-profile examples like SiteInspire are fantastic for gaining inspiration, the constant influx of CSS galleries makes the inclusion of your own design in one of them somewhat less of an achievement. It would be interesting to see a really high-class CSS gallery adopt the blogazine technique, with a custom page made for each worthy website, using large high-quality images instead of the typical screenshots.

The websites in a CSS gallery are not all about the same topic and do not have the same style or same content, so why should they receive the same treatment and same type of screenshot? Merely for consistency? Think about a painting that is worthy of being displayed in an art gallery. Should it be given the same treatment, cut to the same size, positioned the same way? Why do we treat gallery-worthy websites this way, then?

Quiet Blogs

Bloggers often lack the motivation to keep their blog running. Many of them feel they have to keep it fresh by updating it every day, and failing to meet their own expectations results in both frustration and a neglected blog.
Updating a blog daily isn’t ideal, and more often than not…

Seven half-hearted articles a week does not equal one very polished, interesting article.

RSS readers are jam-packed with articles every day, and chances are, the articles that don’t get your full attention will get lost in the crowd. Keep your short musings and thoughts for Posterous and Twitter, and spend some real time hand-crafting well-thought-out articles. You’ll satisfy both yourself and your readers.

If you look at examples from Jason, Dustin or Greg, They do not blog that often: sometimes once a week, sometimes once a month. But the quality is always stellar.

Conclusion

You have endless possibilities to be more creative with your blog. Why stay tied down to one theme and one layout when you can experiment with your skills and push your creativity to its limit with a blogazine? With the Internet suffocating with blogs, people have developed incredibly short attention spans, and they probably won’t stop for your content if you have “just another blog.”

Why not throw away the blogging rule book and make your articles stand out from the crowd?

Further reading

• Jason Santa Maria talks about his rethinking
• Jack Cheng’s blogazine
• WordPress Art Direction Plugin
• ‘You’re killing Me Zappos’ by Metalabdesign
• WordPress Post Styling Plugin
• The Life of Dustin Curtis
• WordPress Designate Plugin
• Jason Santa Maria: The Influence of Print Design
• Shaun Inman’s Photostream

(al)

© Paddy Donnelly for Smashing Magazine, 2009. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: blogs, trends

Wet Paint!

Smashing Magazine’s redesign was done by Liam McKay and his design agency, WeFunction. We also tweaked a couple of things in the design. Footer and sidebar illustrations were designed by Pasquale D’Silva. Smashing Magazine may look a bit different at first glance, but keeping the general structure intact was very important to us. After all, we don’t want to confuse our readers; rather, we want their experience to improve.

So, minor details aside, what exactly has changed on Smashing Magazine? Here’s a summary:

• You can now visit pages of our regular authors (e.g. Kayla Knight). There, you’ll find information about them, see an overview of their posts on Smashing Magazine and follow their Twitter stream. You can also visit a page that lists all of our regular authors.
• You can now rate articles on Smashing Magazine (in the comments area of each post). The highest-rated and most-commented articles are displayed on the post’s category page (e.g. Graphics). And you can find an overview of our categories on the All Categories page.
• You can now leave threaded replies to comments. Pages that have a huge number of comments are now paginated.
• User-submitted design news now appears in the widget on the right side. This news is pulled from our sister website, Noupe. Everyone can submit news, which lands in the moderation queue and is manually approved by our moderators.
• This sidebar widget also features recent jobs and the latest Smashing Forum entries.
• We have re-organized our tags, removed duplicates and replaced some of them with more meaningful labels. You can now use our Tag Explorer (the “Popular tags” link at the top of the page) to navigate Smashing Magazine.

And Then There Is The Network

If you’ve already had a look at the new front page, you would have found some changes there, too: not just recent Smashing Magazine posts, but contributions from other design magazines. That’s because we’ve teamed up with 18 other magazines to house a productive and comprehensive meeting place for designers and developers, showcasing truly the best content around. Among those joining the game are Webdesigner Depot, Noupe, SixRevisions, UX Booth, Hongkiat, ThinkVitamin, Web Designer Wall, Designm.ag, Boagworld and Speckyboy. We call it the Smashing Network.

• The idea behind the network is to promote high-quality content on the Web design scene and to make it worthwhile for publishers to produce useful and interesting design-related articles. We want our community to benefit from these articles and support the publishers with direct traffic from the Smashing Magazine.
• Our main RSS feed (the one you are subscribed to) will not automatically contain excerpts of posts from our network members. We will have a separate SM network feed for that.

In fact, every network member has its very own channel on Smashing Magazine, with recent posts and Twitter updates. All content is manually approved and promoted on the network — no automation at all. So, you can be sure you’ll get only the best articles.

Needless to say, we will still be publishing our own insightful articles, which you can always find on our front page. The last article always appears at the top, with older posts clearly highlighted in a black box among the other SM network posts.

We are aware that this huge change will lead to misunderstandings and may cause problems at first. But we are certain it was the right decision and that everyone will benefit from it. If you prefer the old version of Smashing Magazine (the one without the posts from our network), you can use Smashing Magazine’s channel page, which is exactly the same as our front page before the redesign. Or just stick to our main RSS feed, which contains only Smashing Magazine posts.

Want To Join The Network?

The main requirement for membership in our content network is that you regularly publish high-quality content on your blog or magazine. You don’t have to be popular or have a lot of traffic; you could be just starting out. You can apply for membership by sending an email to network@smashingmagazine.com. We will be reviewing membership periodically, so please be patient and stay tuned for updates.

What Do You Think?

This redesign is work in progress. Your opinion is very important to us. The design definitely could use some changes and we are willing to improve it with your help. Of course, we may have missed something. Have you found any mistakes, bugs, errors or problems yet? What do you think of the whole thing? We are open to your suggestions, ideas and criticism. Please let us know what you think in the comments to this post!

(sl), (vf), (al)

© Smashing Editorial for Smashing Magazine, 2009. |
Permalink |
110 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: redesign, smashing

 

The development of iPhone applications has recently become a hot topic in the design community; everybody tries to come up with some creative idea, port it into a stylish iPhone-alike application and sell it to thousands of users through the iPhone app store. However, many of these applications are poorly designed and therefore miss the chance of providing users with a truly useful product that users would find worth recommending to friends and colleagues.

We want to take a closer look at the design of iPhone applications and showcase some good and bad examples, best practices as well as useful ideas and recommendations for your next iPhone app design. This article is a first post of a new series related to the design of iPhone applications. Please let us know if you are interested in the follow-ups to this article in the poll and in the comments below. How should it look like? What should we improve? Please also feel free to suggest more iPhone app design mistakes in the comments to this post!

Are iPhone apps really not good enough?

“It’s only 99 cents. Who cares if it sucks? I’m still trying it.” How many times have you said something like that to yourself before downloading the next promising iPhone app? How many screen-fulls of those apps do you have on your iPhone? 4? 6? 10? And how many of them do you actually use?

On average, only 3% of people who have downloaded an app use it after 30 days. Why? Because the majority of iPhone apps don’t make any sense to users. The situation is similar to that of PC software a couple of decades ago. Have we not learned from our mistakes?

iPhone applications nowadays are designed by developers who seem to care only about their app’s implementation. When an app goes live, its beautiful code or visual design often fail to address real customers’ needs. The result: thousands of useless applications in the App Store that people download and use once and then never again. These applications often don’t make sense to customers because of a poor interaction design.

Free applications usage over time: Percentage of users returning versus number of days since first used. On second day, 20% returning users; on the 30th day, only 3%. By Pinch Media. Larger image.

Paid applications usage over time: Percentage of users returning versus number of days since first used. It’s not really different from the graph above. Paid applications generally retain their users longer than free applications, although the drop-off is still pretty steep. By Pinch Media. Larger image.

Users stop using the average applications pretty quickly. Long-term audiences are generally 1% of total downloads. By Pinch Media. Larger image.

Hilarious 500 million downloads breakdown, by Gizmodo. Larger version (Copyright: Gizmodo)

It shouldn’t be this way. Developers should be writing applications that people love so much that they would pay $9.99 or even $99.99 for each of them. There’s no programming technique that teaches you how to do this. But there is something else, and it’s called interactive design.

Five Most Frequent iPhone Design Mistakes

Many applications share the same design problems that prevent customers from fully enjoying them. Recently, I conducted a review of 100 apps from the App Store and identified the five most frequent iPhone design and usability mistakes, which are:

1. Over-blown visuals.
2. Neglecting technological limitations, such as slow Internet connection, slow processors and single-threaded OS architectures.
3. Confusing navigation (flow, layout and taxonomy).
4. Confusing the iPhone with a computer. Neglecting to use new iPhone interactions (fingers instead of the mouse; multi-touch gestures; turn, tilt and rotate) and technological features such as phone functions, built-in GPS and accelerometer.
5. Disregard of context. A lack of understanding of how, when, where and why the mobile device is being used.

Let’s start with the first one in this article and proceed with the next ones in the follow-ups to this article.

Mistake #1. Over-Blown Visuals

Probably the oldest, yet extremely popular design problem is overdesign. Designers of iPhone applications often tend to disregard common design and usability conventions by offering users slick and shiny user interface designs that go way beyond their standard look and also way beyond their claimed functionality.

Why make things look, feel and work complicated and why do designers like to re-invent the wheel? The answer is simple: they want the application to be different; look different and stand out from the crowd. Unfortunately, a different look isn’t necessarily helpful for application’s usability and functionality.

So how does an over-design in iPhone applications look like? To better understand it, let’s look at an example:

Motion X GPS settings.

What do you think is wrong with the design in this first screenshot? Some of you may say, “Well, nothing is really wrong with it. It’s beautiful.” I agree, it’s pretty slick. But, there’s a catch: while beautiful, it is also inconsistent with other apps. It’s different. Let’s compare this screen to the settings screens of other iPhone applications:

Motion X GPS settings screen, compared to the settings screens of other apps. (Click to enlarge.)

Noticed the difference? Being inconsistent with other products makes yours worse for two reasons:

1. Going against convention makes your application less intuitive. Over-styled controls look different and require users to re-learn how they work.
2. It’s a waste of time and money. The resources you have spent to make your app look different, but not necessarily better, could have been used much more effectively.

Breaking Convention Makes Your App Less Intuitive

The more familiar the parts of your app are, the more intuitive the app will be for whoever uses it. If we recognize the parts, we will be able to learn how to use the whole faster. It’s like reading: knowing the alphabet and meanings of words allows us to “decode” books we haven’t seen before.

Here’s an example from the real world. Try to make the stop sign more “beautiful” and people will inevitably start dying:

“Sign B, 2, ‘STOP,’ shall be used to notify drivers that, at the intersection where the sign is placed, they shall stop before entering the intersection and give way to vehicles on the road they are approaching.” Article 10 of 2006 road signs convention.

In his paper Intuitive Equals Familiar (Communications of the ACM. 37:9, September 1994, page 17), Jeff Raskin, an American human-computer interface expert best known for starting the Macintosh project for Apple Computer in the late 1970s, writes:

“The impression that the phrase ‘this interface feature is intuitive’ leaves is that the interface works the way the user does, that normal human ‘intuition’ suffices to use it, that neither training nor rational thought is necessary, and that it will feel ‘natural.’”

However,

“… it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned. In short, “intuitive” in this context is an almost exact synonym of ‘familiar.’”

Drastically re-designing every user interface element will make your application less intuitive, which will lead to more user mistakes and a longer learning curve. Eventually, you will lose customers because of it.

What About Branding?

Is there place for branding in applications that are strictly following general design guidelines and usability conventions? Definitely! It is possible to strike a balance between having a unique look but not over-designing. Here’s one example:

Let’s take a look at an example of overdesigning by Bloomberg. Here, we have an over-designed text input field at the top. You can barely recognize this as a field when you first look at it. The version on the right hand side is much better. A standard input field makes the screen’s purpose much clearer, while remaining consistent with the application’s style and branding.

Larger version.

Here is another example by iFitness. Users are supposed to enter their weight day by day on this screen. But you have to flip through the months and days with a horizontal swipe to find the right one, and then you have to enter your weight digit by digit using five separate scroll fields. And then you have to press the very modest “Record” button, which you miss at first anyway and only find the hard way: after you have lost data. Much better:

Larger version.

99.9% of users will want to enter today’s weight. This redesigned interface has one-quarter of the controls. The screen space that has been saved can now be used to present useful information, such as weight statistics. Date and time can be recorded automatically, and the selection of the metric or imperial system of measurement, which is not terribly important, has been demoted to a settings screen.

The Yellow Pages app uses tabs, which work well on the Web, but standard toggle controls are more familiar to iPhone users.

Larger version.

Waste of Time and Money

Apple has already done an excellent job of creating standardized controls. Losing some of that functionality is almost guaranteed if you try to reinvent the wheel.

Back to our earlier example:

If we take a closer look, we’ll see that one-third of the screen space we would have had is now lost because of over-designing.

iPhone OS 3.0 introduced accessibility features. One of the modes is White on Black. Here’s what happens to our controls after inverting colors:

Color, shape and text survived color inversion. However, 2/3 of original meaning is lost. Now there is only text.

In sum, this redesign has given us twice as many UI elements, taking up twice as much real estate. The catch is, even if you haven’t made the controls worse, you still haven’t added much value and you have lost time and money in the process.

That Time and Money Could Have Been Spent On…

Design is all about solving problems. Sometimes, when people don’t know exactly what problem they are solving, they wander in the design process, and the result is over-designed. To avoid that, you must have a clear picture of the problem you need to solve.

One of the best ways to get that picture is to talk to your users (both current and potential). Only when you know your customers’ needs will you be able to build an application they’ll love.

Don’t overdesign. Be sure your house has a solid foundation before you decorate it. You will be rewarded with more loyal customers and higher download rates surprisingly quickly.

(Hopefully) coming soon: #2 iPhone’s Technological Limitations. What Apple hasn’t told you.

Would you like to read a follow-up to this article?

Please let us know if you are interested in the follow-ups for this article in this poll and in the comments below. Did you like this post? What would you like to change? What should we improve? Please also feel free to suggest more iPhone app design mistakes in the comments to this post!

Would you like to read the follow-up to this article?(surveys)

About the author

Alexander Komarov is a Russian designer who has been working in the field of Web- and Mobile Interaction- design and user experience for over 7 years. He runs a nimble interaction design studio that specializes in iPhone interfaces and behavior. He helps iPhone app developers break through the wall that separates them from their customers and stand out in the competitive world of 320 by 480 pixels. You can follow Alex on Twitter.

© Alexander Komarov for Smashing Magazine, 2009. |
Permalink |
16 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: design, iphone

Unless you know about a site called The CSS Gallery List

Overview of what they do

To sum it up, The CSS Gallery List submits your site to a large number of some of the biggest CSS galleries on the internet. At the time of this writing, The CSS Gallery List includes 78 featured CSS galleries. Do you have any idea how long it would take you to submit your site to that many galleries? I dont know exactly, but it would be more time then I care to spend.

The best part of their service? It only cost $15 bucks!!! It is a steal of deal in my opinion and well worth the money.

My experience with them

Upon launching the redesign of Outlaw Design Blog I had the The CSS Gallery List submit my site to the featured list of galleries. I couldn’t be happier with their work. Within just a few days I was receiving emails from a number of major CSS galleries saying that my site had been accepted and posted. Im sure that there are still many CSS galleries that have longer waiting times that will be sending me emails shortly.

Your experiences

Have any of you used The CSS Gallery List? If so, what was your experience like? Did you find it worth the money? If you know about The CSS Gallery List, but haven’t used them, why not? What is keeping your from using them?

There were so many reasons but the major one was, while moving to a new server, I lost the database of this site!! yeah, lazy me. I planned a redesign then and some other plans.. and everything of that took me so long to decide, never leaving me enough to complete everything at once.

Someone said: it’s nice to have “good enough” is better than best. And finally, the site is back.

I have some new themes coming up, redesign of this site, more content and so on. Let us go one step at a time. Expect new updates in coming days.

Their previous look was fine, but this new one is definitely a straight-shooter. Great job, guys.

Designing a website has never been easier. If you asked a web designer who been long enough in the industry, they could tell you there’s actually not much resources, articles nor communication channels regarding web design/develop in the older days, let alone high quality free tutorials.

If you intend to create your own personal websites or perhaps redesign your blog theme, it’s not something too hard already. Thanks to generous designers and contributors, the net is full of great tutorials with step by step guides helping you building web interfaces and navigation. And with this blog post, we’ve probably just scratched the surface of what’s out there. We’ve previously showcased you 40 great Web Interface Design, and today we want to show you another 31 Practical Interface Design Photoshop tutorials. Full list after jump.

Headers and Navigation

Creating effective navigation for websites are essentially important as they determine how visitors surf and navigate your website. We’ve hand-picked some really sleek and simple navigation tutorials for the showcase. Making tweaks and changes will come pretty easy once you’ve mastered these tutorials.

1. Retro Dark Blue Header Design

   How to create a dark blue header with a retro spin on it.

   

2. Wii Web Header

   How to design the Wii header found at Nintendo.com.

   

3. Colorful Design Studio Header

   How to create a colorful design studio header layout.

   

4. Metallic Header Design

   

5. Nature Theme Header

   

6. Professional Dark Header

   How to create a simple, yet effective navigation for your website.

   

7. High-Detailed Plastic Navigation Bar

   Navigation menus can vary from ordinary text links to the most complicated dropdown menus. This tutorial is describing detailed process of creation of “plastic” navigation bar.

   

8. Curled Corner

   Learn how to create a sleek content box that features a curled corner to give it a more dimensional approach.

   

9. Green Navigation

   How to make a stylish looking green navigation with a shine effect.

   

10. Blue on Black Navigation Bar

    How to combine several layer styles to create a beautiful yet simple navigation bar.

    

11. Clean White Navigation Bar

    Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.

    

12. Modern Web Search Bar

    How to create a modern web search bar with a drop down menu.

    

13. Dark Navigation Box

    How to make a more advanced styled navigation box using some more effects and tools.

    

14. Clean Blue Navigation Box

    How to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.

    

15. Create a Professional Gaming Header

    How to create a professional gaming header design.

    

16. Volkswagen Inspired Navigation

    This tutorial assumes that you know your way around Photoshop enough not to need too much hand-holding. You should know your way around the Layers palette and know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation.

    

17. Design a Unique Bookmark Box

    How to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.

    

Full Layouts

For those who wish to create a website and with no idea at all, here are tutorials that guide you through designing the entire webpage layout, head to toe.

1. The Art Institute Photoshop Template

   Easy steps to create a sleek template.

   

2. Talkmania Arhitecture layout

   

3. Creative Studio Web Page

   

4. Clean black and green webdesign

   

5. Unique Grungy Website Layout

   How to design a cool grungy website layout.

   

6. Clean Business Layout Tutorial

   

7. Web 2.0 Blog Layout

   Several new techniques are covered in this tutorial, such as interesting use of the drop shadow element. We’ll also cover creating a see-through navigation bar, as well as creating our own unique icons for this layout!

   

8. The Ultimate Grunge Design Tutorial

   This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before.

   

9. Real Estate Web Design

   Create a clean and contemporary website design for a real estate related website.

   

10. Agency Layout

    

11. Vibrant Modern Blog Design in Photoshop

    This tutorial will cover the process of designing a vibrant and colourful modern blog layout in Adobe Photoshop.

    

12. Photography portfolio

    Awesome photography portfolio design with a lot of content boxes and an attractive look.

    

13. Konvicted Art

    First photoshop tutorial and we thought it’s great.

    

14. Unique Desktop Layout

    How to make a unique desktop style layer, using common work desk objects.

    

Previous designs of Dental Heroes are also captured here and here. Cory is certainly making the most of the Fresh News theme, and it’s great to be able to see the evolution of the site design over just a few months.