Over the last 2 years I have become more of a supporter of layout then design.  Yes, layout is an element of design, but in the web design process they have their own areas and purposes.  This post takes a peak at the use of wireframes to help determine a websites layout and also the factors we consider in a web design layout.  It’s a great step for the web designer, production team and the client.

Web Design Layout
Simply put, layout is where things go.  When I start looking at layout needs and options I consider the following in this order:

1. The user.  What do they need to see, read and do.  Usability is a big factor in good layout for me.

2. The target market as a whole.  There are certain expectations a user might have of a small business website compared to a social media website.  These differences determine the navigation, placement and number of “areas” or aspects in the layout.

3. The website owner/company.  In building CMS integrated websites for 8 years, we consider the types of information, the amount of information and the placement of that information.  The areas of the layout will offer up some static areas of content or functions and others will be dynamic or manageable with the CMS. You must give your client the right tools to offer up their message, communication or features.

Wireframes: The blueprint of the layout
Instead of just jumping to a full blown web design, taking the time to create a wireframe to plan the sites layout, usability and features is a great starting point to your visual design process.  It also allows you to worth with your client on these aspects and start understanding the users possible experience.  Q & A about CMS features, user needs and structure all can be determined with a wireframe.

In writing this post and doing a bit of research I also ran across these helpful posts on wireframes:

• The What & Why of Wireframes
• Improving Your Process With Wireframes

The wireframe serves as a great plan, where the design elements are the polish and can include colors, graphics, gradients, photos, buttons, icons and more.  As a designer, it also provides a great in between step for getting your design approved and embraced. You have outlined and provide some foundation to the client, so the first design concept is less of a surprise and of a continuation and enhancement of the wireframe.

A Wireframe Example
Here is a project we are starting work on and shows our wireframe concept and then the first design mock version of the website.  Many web designers will just start adding their design elements right over the exact grid and wireframe once that has been approved.  Some prefer to start on paper sketching as well.  There is no right or wrong way.

As you can see we also provided some notation on the areas.  This is up to you to provide this detail or just keep it to content blocks and usability features.

Next is the web design concept.  Keep in mind that this is a rough version one, the finished product will take on more polish and elements.  But it serves the purpose for a visual example.

I hope this helps you understand the web design process a bit better and the value of wireframes in the layout and design steps.  Feel free to either comment as a client or web designer on how a wireframe has helped your process or maybe you realize it’s time to start using one.

While there is no specific rule of thumb in web design for when you should redesign your website, there are many factors that signal it is time to revamp things. I addressed this topic in our August e-letter and decided to post it to our blog as well.

Are you in need of a website redesign? Here are some points that might be telling you it’s time.

+ Time
If you want to consider timeframe as one rule, an industry average is every 2 to 4 years. Design evolves, your competitors improve their website, your brand grows and you need to keep things fresh. If you haven’t touched the visual interface of your site in 5 years, please seek help!

+ Functionality & Features
Many companies are looking to add features and better functions to their website. This is a perfect time to give the site a fresh coat of paint as well as roll out new tools. It might be the need to move to a content management system or to integrate specific functions like e-commerce or user profile accounts. Whatever the technical need is, a redesign can be more than just a visual touch-up.

+ Usability Issues
Some sites lack an easy to use navigation structure or have simply become larger than they were designed for. A redesign can incorporate an improved structure, utilize drop down navigation and other elements to make the site easier to use and convert more business. I’m always amazed, but there are still so many sites out there with random navigation features on every page. Yikes!

+ Search Engine Optimization
If you are lacking traffic from Google and Yahoo, then a redesign combined with proper coding and content structure can help. A site designed the right way and coded the right way can attract search engine traffic the right way.

+ Drab, Boring, Unprofessional
Sure this one is obvious. Just plain looking better is a great reason. Many websites are too basic as they were built to get something “up and out there”, have gone untouched for years and they have become old news. A redesign can freshen up your look, brand you apart from your competitors and show your dedication to future success and more. There are so many incredible web design and layout techniques we can employ in today’s world of web design to make you stand out!

The best part is while just one reason above may be driving your website redesign needs, you can address multiple deficiencies or challenges during your redesign. This can allow you to get more value and bang for the buck. If you are wanting a few more signals on when to redesign this post has 11 Signs on time for a website redesign.

I was so busy tending to a few web projects and tomorrow’s Five e-letter that I didn’t bother checking out our Woopra account to see how the daily traffic was flowing.

It seems I was missing out on some big things as the Five website made the front page of CSS Vault today, one of the most respected CSS Gallery websites out there. Nothing like a surge in traffic (over 350 users) and some street cred among peers.

The various CSS Gallery sites are definite inspiration to us in our design work and we have been honored to be displayed in many of them since launching the new Five website in February. Here are a few of the others we have appeared in:

• CSS Mania
• CSS Based
• CSS Star
• CSS Ultra
• Most Inspired
• CSS 2.0
• Best CSS Gallery
• Ala Brasil

Thanks to all of those great web design galleries for showcasing us, we love the attention and hopefully we’ll get some client work onto those same great sites. On another note, we’re busy in our own kitchen cooking up some gallery type web food with a Minnesota flair. More to come on that soon …

For me there is nothing better than hitting up some of the great CSS gallery websites as well as the different CSS and web resources out there. I’m one of those in a constant push to find new techniques, angles, connections and develop new lines of thinking.

That said, I’m not a radical or into confusing a user for the sake of “cool”. I am however after the almighty goal of creating easy to use web interfaces and designs that make an impression so my client can win business by being remembered (branding ya say!).

So today I came across a new resource when viewing the updated screenshots on CSS Mania. Take a peak at Noupe if you like posts/articles with tutorials, links and examples galore.

Here are 3 articles that I thought rocked. Glad I found another source of creative knowledge, from another source of inspiration.

• As a fan of CSS, how about 50+ Creative Examples & Tutorials in CSS, there are some great links to some great info
• If you are a fan of backgrounds and want a good collection of latest, greatest, coolest and crazy … then these 63 website backgrounds and tutorials will satisfy you. bonus: Char at Keystrokes highlighted 13 texture resources that come in handy for fresh backgrounds too.
• Want more than 63 of something? How about 70 impresive website headers.

Have a great weekend.

Two months ago when the name Five Technology was agreed upon we then had to give birth to a logo. I enlisted the help of Sarah Lavin, a freelance designer who I was referred to by our first client, Eventive Meetings. I was able to get a glimpse of Sarah’s skills and process from Eventive and knew she was a good fit for bringing our logo to life.

Planning & Discovery
Since I’m a creative guy myself I put together some samples of logo’s and design elements that inspire me. I also included some rough mocks of the web interface we were working on (which completely changed after our logo came alive). Sarah and I talked on the phone for about an hour and then she said she would have some structural concepts to me in a week. It’s important to get the structure down on a logo before you get carried away with colors and other details. After just a few days my inbox had the logo concepts below.

We liked the strong and solid feel that the far right concept gave us. It embodied the trust and strength we wanted to convey to our market.

Colors & Variations
Next came laying out some color options and tweaking the layout. I won’t make you look at the 12 to 15 different structural and color combinations that we made Sarah pull together for us, but the three below are good example some of the avenues we explored.

We toyed with the structure of the “tucked” Technology and also playing off the leg of the V into an exclamation point. In the end, the further versions were just options we said “No” to and the original structure won out. I have witnessed this extra step of creation with clients before and commented to Sarah I wouldn’t do that … but I did.

The Final Logo Result
Below is the winner as you already noticed from our website or blog header. It was a great experience and one that was truly productive thanks to Sarah’s expertise and guidance. If you are considering a logo design or a redesign, make sure you can see an example of a similar process from your contracted designer. Logo design is not just a one and done “here you go”, but a process of planning, creativity and options. A good logo designer helps you throw the right stuff at the wall and then helps you see what best sticks.

A good logo designer helps you throw the right elements at the wall and then enables you see what sticks for the right reasons.