Hello and Welcome! to the second issue of the MetaSpring Blog Carnival! This month’s topic focuses on Web Design, for which we received many great submissions, so a special thanks to everyone who participated!!

Here at MetaSpring, we pride ourselves on being well versed in all things internet, but web design is our bread and butter. While web designers are often comprised of many quirky traits and characteristics, one thing is for sure: they know how to communicate extremely well. Whether it be through their designs, a Twitter dialogue, or an email, valuable information is constantly being passed from designer-to-designer. In that spirit, may we present to you the wisdom of our peers.

What Makes Your Website Stand Out?

Fellow SEO experts, Jacob Brown Designs of Novi, Michigan brought us this great guide on the basic principles of web design: design, SEO and marketing. Whatever your business be on the internet, it’s likely that you’d like your website to stand out in terms of creativity and originality and these helpful tips can help you design just that with characteristics that actively work for you. Read the post…

Realizations of Rounded Rectangles

This post comes from Keith Lang and UI&us and focuses on the rounded corners that are woven into our everyday life. Where did they come from? Why are they here? What can we learn from their permanence? Keith and his team write about User Interface Design, User Experience design, and the cognitive psychology behind design in general - so their answers to the questions above have ramifications for web design and beyond. Read the post…

Choosing the Right Colors for Your Website

In many design attempts, color selection is often overlooked for the sake of a certain style or design concept which often to colors that might not be entirely representative of the concept of the site. Robert Bravery of Integral Web Solutions in South Africa helps you discover the right colors to set the mood in your next project. Read the post…

Build: Single Handedly the Best Web Design Conference of 2009

To add to our international flair, we welcome Paddy Donnelly all the way from Belgium (originally hails from Ireland).

Paddy made the trip to Northern Ireland for Buildconf on November 5th, which he called, “one of the most prestigious and kick ass conferences of the year”. In this fantastically creative and originally styled blog post, Paddy recounts the talks of the six conference speakers Tim Van Damme, Andy Budd, Mark Boulton, Ryan Sims, Wilson Miner, and Eric Meyer. Topics covered include font embedding, seductive design, freelancing, pixel perfection and developing a hybrid between design and development. With the savvy inclusion of Twitter reactions, this post gives a thorough analysis of the conference for those who weren’t lucky enough to see it in person (us!). Thanks Paddy. Read the post…

5 Essential Document Templates for Freelance Designers

This post comes from our friend, Lee Munroe. He, and the aforementioned Paddy Donnelly, won the W3 Award last year for their work together on Big Word Project - many belated congratulations gentlemen.

Its not uncommon for designers to develop a keen sense of communication through many rounds of correspondence with their clients. Lee Munroe is a well-known freelance designer who, in order to facilitate better client discussions at an efficient pace, compiled these five, ready to use document templates. Read the post…

Profitable Website Ideas – In Just One Click?

Brian Terry sends this post to us to help those seeking profitable websites. If you have an idea for a revenue generating site, make sure you cross reference it with this seven point checklist. Read the post…

How to Create the Best Landing Pages for Google Adwords

Our friends at Digital Products Review offer their assistance in using Google Adwords. As we have experienced with a number of clients, Adwords is a powerful tool when implemented intelligently. Creating properly titled ads marketed to proper keywords can generate real results for your business. This post looks past the initial ad telling us, “The success and failure of your Google Adwords campaign depends completely on the success and failure of your landing pages”. Make sure your landing pages are properly formatted and designed for click-through success. Read the post…

10 Key Tasks For Your Next Web Site

Wondering where to start your next design project? This post from Smiley Cat Web Design establishes 10 goals any designer can set forth before them at the starting line. As you navigate through the checklist, personalize each point to your project at the fundamental level. Read the post…

Next Month’s Issue: Web Development

This wraps up the second edition of our MetaSpring Blog Carnival - be sure to check out next month’s issue Web Development. If you’ve written or know of a great development-related post, please send it our way! Submissions will be accepted through December 20th.

If there is a specific theme that you’d like to see covered, email us with your request at media@metaspring.com.

Wireframes.

For some designers, they are as essential as oxygen; for others, they’re something to look forward to - you know, when there’s more time; and then there are those who’ve never even heard of ‘em.  Well, if you fall into the either of the last two groups, take a nice, long, deep breath. … Felt good right? Yeah, wireframes are kind of like that. Simply put, wireframes are:

• An extremely basic representation of a website’s interface and the components that comprise it
• Usually in black and white, or otherwise monochromatic, to preserve visual simplicity
• As plain or complex as you need them to be to get the point across
• An excellent talking point for clients as you segue into design mocks

If you haven’t adopted wireframes into your process yet - don’t worry, you’re definitely not alone.  A great many designers out there (myself included, until very recently) have not yet discovered the extreme utility of such a simple technique.

The Design Process

In a typical design process, wireframes would come right after, or sometimes in place of, the sketching phase.  While many pencil and paper purists claim a good sketch is the only place to start, going straight to the diagramming software might be the most efficient use of your time - especially if your following relatively standard UI design patterns.

For example, if your laying out the interface for a feature rich application, the controls and information displayed will naturally tend to break down into a basic grid, with clusters of related information. And that might be your wireframe, you could stop there!

Simplifying the design elements can help to put the entire user process into perspective, allowing you to capture a clear overview of how a user will move through and interact with the website.  At this point, you may find it helpful to whip up some wireframes of similar or competitive websites, allowing you to compare design patterns and analyze the strengths and weaknesses of both layouts.

Not only does this level of simplicity make it easier for developers to understand how users should interact within the system, but it gives your client a clear outline of their site that can quickly and easily be revised in an iterative manner as you receive feedback or as new features require. Wireframes can also make it easier for your clients to get an idea of how the final design will look and allow them to provide feedback ahead of time, saving you loads of work making minor adjustments or revamping for major changes.

The Benefits

• Streamline your process
• Improve client relationships
• Promote designer-developer interaction
• Increase overall usability

Everyone can understand wireframes.  With very little explanation needed, you can kick off an invaluable dialog about how certain features should work, where the user would think to go next, how much content can safely fit on the page, etc.  Sometimes clients, developers, and even fellow designers don’t operate within quite the same vocabulary that you do, wireframes avoid linguistic confusion and instead, simply express the concept in the most palpable fashion - visually.

Wireframes, as part of the initial discovery phase of a project, can get your clients involved from the very inception.  As a two way communication tool, wireframes can facilitate a better understanding between you and your clients.  When they participate in the development and feel connected to development of the project, it is much easier to build trust in your work and keep the lines of communication open.

The scalability of wireframes is also ideal for client presentations (more on that later) because you can quickly (and easily) make simple changes to the UI.  This can be crucial when working with a client to optimize for usability. Being able to sit down with a client and actively modify a wireframe while they submit feedback, can be immensely helpful for both you and your clients.  And if you’re presenting a printed version (remember paper?) of the wireframes, those big gray boxes are just perfect for making revision notes, aren’t they?

Tools of the Trade

Wireframes often start as a simple sketch but can quickly transfer to a digital medium.  Fortunately, there is a vast array of software options designed specifically for diagramming and wireframing.  Or, if you prefer to stick with the software you already know, Adobe Illustrator might be your tool of choice.  While some of the software options out there may feature an abundance of pre-packaged components, like HTML form elements, graphs, etc., for most designs the simplicity and flexibility available in Adobe Illustrator is more than enough to create wireframes quickly and easily.

Here are just a handful of resources to help expand your understanding of wireframing and how it can help your design and communication process

Website Wireframes on Wikipedia

Using wireframes to streamline your development process

Tips for a better wireframe

Building a website wireframe in Illustrator

Do you use wireframing as part of your communication and design process?

Here’s what some denizens of the twitterverse had to say:

@lisakathryn We could not build sites without wireframes. They reduce confusion w/ client & developers! My fav part of the process!

@mikecterrara I love the wireframe stage in design sessions..forces me to open my time capsule and grab a pen

@dscoleman Wireframe heaven with Omnigraffle + Konigi addons. I’ll always draw first but these tools are great help.

@deryck_neuseed For wireframing I use a 8.5 x 11 notepad, I always draw before touch Photoshop.

Does your creative firm offer wireframing as part of their process?  Will you ask them to in the future?

Recently in the web design industry, the use of “real world” textures and materials has become a major trend. As the average user’s internet connection continues to gets faster, it becomes more and more feasible for designers to incorporate a greater amount of imagery into their work. For this reason, we’re seeing a lot more textural imagery - for example: woods, metals, concrete, and fabrics, being used as backgrounds and for other primary imagery.

When used with care and attention to detail, these types of natural textures can add a lot of depth and character to the visuals of a site. Unfortunately, in many cases, these textures are incorporated without considering how the rest of the design would be affected. In these cases the textures can feel forced or tacked on, as if they were added as an after thought, simply to appeal to the trend.

At this point, we’d like to present a few examples of textural and material imagery done right for your inspiration, as well as a downloadable care package full of free textures to add to your bag of tricks.

Kyle Haskins

In this portfolio site, we see a pleasant, subtle use of wood texture to create a dark and smokey ambiance.

Agami Creative

Agami employs a gorgeous, watercolor-esque background. You can tell a lot of work went into this design, both in thinking through the concept, and in the pristine execution.

Bern Unlimited

This design uses torn cardboard to create a unique effect, even allowing the navigation to follow the shape of the torn edge. The content area, unfortunately, does not follow as creative an approach, resulting in feelings of unbalance and incompleteness in many areas.

Translating the creativity that we put into the homepage, headers, and footers, to the rest of a site’s content is a challenge that designers should bear in mind, especially when the design will be implemented through a CMS, ecommerce system, or other template based web application.

Design Commission

This very clean and modern layout, with a neutral gray concrete background, offers an interesting contrast in style between the grunge elements and the crisp, minimal content area.

Design*Sponge

This design really plays off of the fabric and scrap-booking concepts with a creative use of textures and real world objects. It can be a bit overwhelming in certain areas, but overall it’s an inspiring example of how these very natural textures and worldly objects can be used to create a coherent impression.

Now for the free stuff…

And now, MetaSpring is pleased to offer our first designer’s care package - a set of various textures, hand-picked from an obliging, local abandoned lumber mill.

If you like what you see, please subscribe to our blog or check back soon, as we plan on offering up many more of these packages. Enjoy!