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

June 13 2013

06:30

To Hope Beyond Hope: iOS 7 Concepts Jony Ive Should Definitely Draw Inspiration From


  
ios1 Flat and very, very colorful is Apple's new approach to iOS. Reactions are partly flat, partly very colorful, too. "Love it or leave it" seems to be the only option. Yet, iOS 7 is only a beta version, nothing needs to be carved in stone by now, Jony. We have collected numerous different concepts to show you and our readers, how iOS could turn out to become. Some are somewhat resemblant, some are totally different, but all are - much more beautiful! Please, draw some inspiration from these creations, if only a little...

August 28 2012

13:30

Lessons Learned Designing a Windows 8 App

Windows 8, expected to be released in October 2012, is the latest version of Microsoft’s flagship operating system. Its release also marks the first time that Microsoft has significantly evolved its design since 1995. Microsoft’s new, touch-oriented design language opens the door to designers, giving them a chance to reconsider their existing applications.

Christina and I are graduate students in Human Centered Design & Engineering at the University of Washington. In April we were hired as interns by Blink Interactive, a UX research and design agency in Seattle, to become their resident Windows 8 experts. We scoured the Internet for articles and videos, attended Windows 8 developer events, spoke with Microsoft evangelists, and spent a good, long time using Windows 8 on both tablet and desktop computers.

Finally, we conceptualized a Windows 8 version of Rhapsody, an online music provider (and Blink client). Through trial, error, and multiple iterations, we learned how to reconcile the needs of Rhapsody’s users, the scope of their application, and the rather-strict Metro guidelines.

A window to the world

Windows 8 will be installed on a wide variety of devices, from tablets to desktops. Whereas some tablets will only run Windows 8 applications with the Metro UI, others will be able to switch “modes” between the traditional Windows desktop (Aero UI) and the Metro UI. This is the key feature that sets it apart from Android and Apple tablets: Windows 8 enables people to use the same device for watching Youtube videos on the couch as for working on design comps in Photoshop.

Microsoft recently issued a statement saying that it would no longer call its design language Metro. The company has yet to provide vendors with an alternative name. As such, this article refers to Microsoft’s design language as Metro.

User interface

To unify their cross-platform experience Microsoft will employ Metro, a design language they initially developed for the Windows Phone and Xbox. Metro is inspired by the Modernist style of the Bauhaus Design School, Swiss design, the international typographic style, and motion design. Microsoft uses five core principles to define it:

  • Authentically Digital: Metro designs avoid skeuomorphism. Unlike iOS –which encourages the use of realistic on-screen objects –Metro eschews faux textures, shadows, bevels, and/or 3-D looking icons for a more modern look.
  • Pride in Craftsmanship: Metro designers pay close attention to detail and work to ensure their designs are pixel perfect.
  • Be Fast and Fluid: Metro applications feel responsive, using motion and screen transitions to facilitate flow.
  • Do More with Less: Metro applications have limited scope. Their designs avoid unnecessary content and chrome (buttons, functions, and controls).
  • Win as One: Metro designs employ Microsoft-sanctioned patterns to decrease their learning curve.

In addition to these guidelines, Microsoft hopes to create a sense of familiarity between all third party apps by encouraging the use of a pre-defined grid, typography, screen hierarchy, and navigation. The grid – composed of 20×20 pixel squares – dictates how text, images, and tiles are laid out on the screen. Even the standard font, Segoe UI, and the font sizes recommended by Microsoft were chosen to fit in the grid.

That said, though, it’s important to keep in mind that these are suggestions; great Windows 8 applications should respect Metro’s principles, but could deviate from one or two of them altogether.

Information Architecture

Microsoft is a bit more strict when it comes to the screen hierarchy, which is limited to three levels: Hub, Section, and Detail pages.

  1. Hub Pages provide an overview of content and functionality. They link to various sections.
  2. Section Pages showcase the content/functionality comprising a section. Content on section pages page can be displayed in any form, including tiles and lists.
  3. Detail Pages are end nodes in the hierarchy. The content comprising them includes text, pictures, video, or songs.

To navigate between the different screens users can tap on headers or tiles. Tiles are clickable rectangles that can contain a photo, icon, or text. Some[t1] applications also have a nav bar at the top of the screen that remains hidden until the user swipes inward from the upper or lower edge of the screen. The nav bar is used to navigate between completely distinct sections of the app –such as tabs in a web browser. Some applications implement a dropdown menu next to the top level headers that allows the user to access sibling and parent pages.

Learning to speak Metro

Blink partnered with Rhapsody, an international music service provider, to conceptualize a metro-style prototype of their application. Rhapsody provides access to over 14 million songs by thousands of artists, as well as editorial content, and radio. They already have apps for a wide variety of devices, from phones and tablets to in-car entertainment systems, so Windows 8 was a logical addition. Our team’s design goal was to create an experience that would feel familiar to current Rhapsody users, while reflecting Metro and Windows 8 principles and navigation structures.

This proved challenging. The wide scope and deep hierarchy of Rhapsody’s app conflicted with the 3-tiered navigation dictated by Microsoft. In addition, we needed to reconcile the interaction patterns that Rhapsody users are familiar with––such as a persistent player and queue––with Windows 8’s chrome-less design.

We began by itemizing the existing Rhapsody Android app’s features and UI in order to make sure that we accounted for everything.

Information Architecture

The current Rhapsody application has four different sections: Browse, My Music, Radio, and Featured. Each contains enough content to constitute a Metro application all on its own. Our challenge was to unite them.

We began by implementing a navigation bar to provide access to each of the four different sections, as well as the main Hub (home) screen from any page of the application.

After showing our wireframes to Microsoft employees, they advised us to use the initial hub screen to showcase the different sections. This, however, meant adding an additional level of navigation to an already deep hierarchy – deeper the 3 levels dictated by Microsoft. If a user was interested in Scandinavian Pop, for instance, he would have to travel from:

Home → Browse → World → Europe → Scandinavia → Scandinavian Rock/Pop

The challenge was allowing the user to return to the Home screen without having to continue tapping on the Back button. Some applications solve this by placing a Home button in the app bar –although this is generally considered against proper Windows 8 Metro design. Instead, we decided to use a dropdown menu next to the page headers that provides access to the Home page, the four section pages and, if applicable, sibling pages (such as subgenres).

Contrary to Metro style design patterns, we initially used hubs and section pages to break down pages that contained large amounts of content, even when they were not pages at the very top of the hierarchy.

Artist profiles, for instance, were structured as hub pages that showcased the artist’s image, top albums, popular tracks, and similar artists. Each of these groups was linked to a section page that provided the remaining content. When we showed our design to Microsoft designers, they advised us to keep all the content for all the groups on a single, wide page. This was one case in which we decided to go against the advice we received – there were simply too many cases in which the number of albums and similar artists would make the page too wide to browse with ease. Pavarotti, for instance, has over 100 albums. Having a single page would make it difficult to find a specific album, and require semantic zoom to make users aware of the existence of the other sections.

User interface

Windows 8 design guidelines encourage hiding the chrome, or persistent navigational elements of an app. Note that in all of the screenshots we’ve shown up to this point there isn’t any primary or secondary persistent navigation visible. Those navigational elements are available by going back to home or are tucked away in dropdowns from titles. This sounds like a constraint, but it really is a solid principle for mobile and touch applications in general.

However, we still ran up against the “don’t show chrome” principle when it came to the music player. Rhapsody users are accustomed to having the music player visible on every screen.

Initially, we created a sidebar that showed the cover art of the album currently playing, buttons to control the music and the queue. Users could hide and show the sidebar by swiping it on and off the left edge of the screen.

This was a problem, though, because it took up a great deal of real estate on the page and was considered “chrome.” We then considered placing it either in the app bar or in the navigation bar. MSDN suggests placing players in the navigation bar (top of the screen), whilst all other music applications seem to have it in the app bar (bottom of the screen). In the end, we decided to place it in the navigation bar to free up the app bar for other controls.

In addition to the navigation bar player, we also designed a full-screen player and a snap view player. Snap view is similar to “restoring down” an application, and allows users to view two applications at once. The full-screen player opens when the user touched the album cover in the small player, or as a screensaver after the user has not used the device for a few minutes.

When the user opens the application in snap view, they are presented with only the player, since it is not practical to navigate content in such a small view. The snap view player shows the last track played, the one currently playing, and the one coming up.

Start here

Metro is Microsoft’s attempt to create a more cohesive user experience across both its platforms and third party applications. Having a consistent set of affordances and navigation patterns lessens the learning curve and increases the usability of Windows 8 applications.

The challenge for designers is to reconcile the Metro style design guidelines with the specific needs of the application and its users. In addition, the resulting design must be unique: it must convey the company’s brand and its personality.

So how should you get started? First, take a look at the resources below to become familiar with the basics. Then, decide what features and content you want to implement and fit them in Microsoft’s suggested 3-level hierarchy.

Once you know the structure of the app, take a look at the templates provided by Microsoft and use them as starting point. Keep the five Metro principles in mind, but make your app unique by applying your own branding and style, as well as using shapes, colors, and subtle patterns.

The Cocktail Flow app is a perfect example of this – it’s a beautiful, tile-less Metro design. Throughout the process, show your application to your client, users, and if possible Microsoft representatives (at least for now this is a mandatory step to submit your app to the store). Use their feedback to continue iterating on the design until it’s pixel perfect. Good luck!

Resources


The post Lessons Learned Designing a Windows 8 App appeared first on UX Booth.

May 18 2012

16:00

Facebook’s Faceoff with Google+

In the early battle between Facebook vs. MySpace, Facebook dominated by offering a simple user interface to connect with friends. Backed by explosive success, Facebook has maintained a “we know best” attitude about design through continuous iterations. With the rise of Google+, Facebook has been pressured to address usability concerns expressed by its cynical, albeit deeply ingrained, user base.

We put Facebook to the test with a panel of five remote web testers in early August, 2011, and listened to them voice their frustrations aloud as they navigated the site performing several assigned tasks. Although Facebook has taken steps to address some of the usability concerns we exposed, issues still remain.

All testers came from UserTesting’s on-demand panel, had over 100 friends, spent over 30 minutes on Facebook every day, and were Americans between the ages of 20 and 40.

Photo privacy controls

Nine months ago, managing the privacy settings of a Facebook photo album was a nightmare. Users had two options:

First was to click “Edit Photos” within the album. Our tests revealed this was far from intuitive. Users stated they were instead searching for a “lock icon” or an identifier next to the album. What’s more, the “Profile Pictures” album – the default album comprised of photos of a user – didn’t even have an “Edit Photos” option.

Second was to manage album privacy was to go to Privacy Settings → Customize Settings → Edit Album settings. The Privacy Settings page allowed users to set access for all “your photos, statuses, and posts;” however zero testers used default settings. The Edit Album link was buried in between larger buttons and other controls that were in bold font, which users struggled to find.

Privacy settings were not located in the right context when users needed to access them. One tester said it best: “The privacy settings can get really complicated… even if I’ve done one before, it’s been awhile, maybe I’ve forgotten or the way it’s done is changed.”

Facebook's old privacy settings page

Facebook’s old privacy settings page tested poorly.

When Google+ launched, by contrast, it let users easily share each photo or post with whichever “circle” of choice.

Google+'s status update panel

Google+’s status update panel puts the “reach” of your update front and center.

Whether or not the release of Google+ was the catalyst or a coincidence, Facebook redesigned these pages in late August – just 3 weeks after our usability study. Users can now manage album privacy directly from their profile and change album privacy settings directly on their albums page. Further, users can set each status update or album its own privacy setting, inline with each post.

Facebook's new status update panel

Facebook’s new status update panel seems to follow Google+’s approach.

“Smart” friend lists

Google+’s circles were a direct response to Facebook privacy control woes, particularly managing friend lists. “Friend lists” are how you can organize your friends on Facebook. You can grant or limit access to friend lists you create to view albums, status updates, and availability in chat.

We asked users to enable only four of their best friends to see them online without instruction. To do this, they would have had to create a friend list, put these friends in the list, and then limit their availability in chat.

Easier to find

To create a friend list, users could formerly go to go to the Home page, click Friends in the left navigation column, then click Manage Friend List. If users accessed Friends from their profile, they must go to “Edit Friends.” One user did not assume the “Edit Friends” button would lead to a page to create and manage friend lists.

Friend lists are now easier to access on the left navigation bar under Friends.

Facebook’s friend lists were far from friendly.

…In the proper context

After completing the task users were still unsure about their success in creating a friend list. This was because the newly created list did not appear in the drop-down menu when selecting Custom privacy controls.

This has not changed. Furthermore – in chat – when users click “Limit Availability,” they can only see names of friend lists they have created, but are still unable to see who is in these lists or update them from here.

In September, Facebook created “smart lists” to automatically group close friends, family, coworkers, and schoolmates. For many users, these ‘smart lists’ are arbitrary, as sharing decisions are most often based on relationship comfort level –– not organizational ties.

Facebook chat

Coincidentally, our August study ran right after Facebook chat launched. We found that users were confused that friends appeared in their chat bar who were not online. One frustrated tester complained he could not feel certain that he could see all his online friends in the chat sidebar, since Facebook includes offline friends in the mix. When he realized he could not chat with friends who appeared in his chat list, he assumed that chat was broken.

Likewise, one woman was completely confused when she saw her daughter appear in the chat list, realizing this was impossible since she was standing there right next to her.

Users felt that some online friends were “missing” because they could not scroll up or down the list to make sure. Days after the launch, Facebook added a scrollbar. However, offline friends still appear in the list.

After the test, we asked users what features they wanted in chat (UserTesting provides customers four, written, follow-up questions after the video test). Five out of five users wanted the ability to be invisible in chat. The common reason was they did not want to be messaged by certain people at certain times. Interestingly, no one was interested in being “away” – one user commented that Facebook status updates have taken the place of “away messages” (of the AOL era) as an indication of our current state in life.

As there are likely millions of people who have Gmail open in one tab and Facebook in the other, Facebook could take note. (Facebook Chat is more comparable to Gchat than Google Hangouts, which has higher functionality for group chats.)

Where search meets social

Facebook identifies as a social discovery engine, not a search engine. However, as Facebook nears the one billion user mark, it’s become increasingly harder to find the right person, page, or app you’re looking for.

Users were asked to search for friends by current city and for statuses that contained the term “vacation.” Two users expected when they type something in search and press enter, they would go to the search results page. However, Facebook takes users to the first result that comes up. That would be like googling something and automatically being redirected to the first result.

As an example, when one user typed in “vacation” into the Search bar and pressing ENTER, he automatically arrived at the “Pet Society Vacation” app page.

We observed two users try to click the magnifying glass option in vain trying to perform an advanced search.

Little has changed with search since our original Facebook user study. To perform an advanced search, users must type in a term in the search bar, mouse down to “See more results,” then go to the left menu column to add more filters. Meanwhile, Google+ lets users easily search any person, page, and even content and has filters clearly on the results page.

Our suggestion? When users hover over the search magnifying glass, offer a drop-down menu to do an advanced search. This aligns well with what we observed. Further, when you press “Enter” in Search, take users to a search results page. If the first result that shows up in the results preview is what the user wants, the user could click on it – or press the down arrow, then enter – on their keyboard.

Conclusion

Move fast and break things is a great motto, but it just seems like when features of a very successful company lack usability – the general sentiment of the people is, “They don’t care about us.” Users in our original study expressed that Facebook made some things difficult on purpose as if they were being tricked for some ulterior motive.

Facebook has since taken conciliatory steps to address the issues exposed in usability tests, but their reputation as a top-down all-knowing power prevails. If Facebook wants to win the battle with Google+, they should humble their design decisions down to the needs of the user.


The post Facebook’s Faceoff with Google+ appeared first on UX Booth.

March 09 2012

10:00

Successful Redesign Tips From Movie Sequels

Ever wondered how some film series’ original can be so good it builds up a good amount of buzz for continuing films, yet its sequels are just nowhere near as good? Well, this of course can boil down to a number of factors. Sometimes too much time passes between the release of the original and its sequel for audiences to even care, the plot didn’t stack up, actor/actress changes messing up chemistry, etc. The list can go on forever, but there is one bigger question to ask. What do successful sequels do differently?

That is what we are going to be taking a look at, and how these traits of successful movie sequels can be used for your upcoming redesign.

Proper Timing


*Image Credit: Martin Pettitt

The worst thing anyone can do is not properly plan out the time frame from the completion of the original work, to the time when the next chapter in its story is released. This is probably the trickiest part of planning a relaunch of anything. Is it too soon? Has all that can be taken from what is already out there been taken? Will this be too long of a wait? What if the wait is too long and the interest fizzles?

When going about a redesign it’s always important to remember, timing is everything. There is no point in putting time into something unnecessarily just to keep up with rapidly changing trends, but waiting too long can be just as harmful.

Is the Demand There?


*Image Credit: interrobang

This goes hand in hand with proper timing, as long as the people are looking for continuation. For example take a look at two films, one with a strong audience and another with one less than average. It would make sense for the film with the strong audience to release a sequel with proper timing. However for the film seeing less than average public demand, a sequel would only be more of a wasted effort.

Whether it’s your own personal website, or one for a client, the demand of your audience ultimately gives you an indication when it is time for a redesign. If they are continuously happy and impressed with what has been already done, then just leave it alone and work on other things for now. If your website is on the other end of this scenario, then a redesign probably should come as soon as your schedule allows for it. Unlike movies, not having a big buzz around your site could mean that a redesign is a good way of improving on that.

Can the New Script Carry the New Installment?


*Image Credit: eelke dekker

There is nothing more disappointing than going to a see a movie sequel that ends up having a plot that leads to only one question. Why in the world would anyone ever release this to the public, and to make matters worse, think it would be considered good? From beginning to end, it just feels like a poor attempt from the production companies producing it to squeeze a little more money out of the original film.

If you’re going about a redesign, and it is clear that improvements are being made based on what your audience wants, there’s probably going to be a lot of self-inflicted backlash approaching.

Keep Aspects that Work


*Image Credit: practicalowl

Would anyone go see a Pirates of the Caribbean film if Johnny Depp wasn’t playing the great Captain Jack Sparrow, or if the character wasn’t even in it? Those are very slim chances because out of all the great actors and actresses adding great value to their respective roles, Johnny Depp as Captain Jack Sparrow is the cornerstone of this movie franchise and it wouldn’t have the same success without him.

On every website there is something that signals a little bit of significance above everything else, and if taken away, may cause its audience to leave too. When most designers go about a redesign it’s always with the idea of one of the latest trends going on leading the way there. This is, of course a good thing, but there also needs to be a realization of what is currently working and why it needs to stay.

In Conclusion

When extending the life of something by adding another chapter to its saga, whether it be a movie or website, the qualities that create a successful addition are, for the most part, out of the hands of the creative behind it. The majority of the tips mentioned above aren’t a definitive guide to go by that will ensure an automatic success. However, what they do  is provide a way of thinking that can be applied to redesign which can only lead to positive results.

February 05 2012

10:00

3 Glaring Signs That Cry Out for a Website Redesign

The thought of redesigning and revamping a website can be scary for most web designers. The thought of all the work and effort to design their website all over again can be frightening, more so are the countless review cycles, opinions from numerous stakeholders, comments from site visitors, and other factors to consider and this is enough to drive them crazy.

Revamping your site is a mega-headache, redesign is necessary at one point in the web site’s life cycle. You will need to revamp your site at some point in time, and the sooner, the better. You need to know when it is high time to revamp your site by looking into a few signs.

Sign number 1: The Metrics are Down


Have your metrics gone down over the past few months? Then it may be high time to revamp your site. Metrics are the number one indication that you should redesign your web site. Metrics give you an immediate indication that something needs improvement. To better understand your visitors, you need to speak to them using surveys and usability testing. A face to face conversation with your customers allows you to learn more than simple surveys and questionnaires. Conversations will reveal attitudes towards your website, brand, and overall company image.

Sure, there may be other reasons as to why your metrics are down. Be sure to look into them first and fix any problems you can see. Converse with your users, as only through dynamic conversation will you be able to know if your site needs redesigning, and to what extent. But if the sales, traffic and general user participation of the site are still down, it may be that your web design has ‘disconnected’ with your users.

Image by iamwahid

Sign number 2: Change of Brand Image


Changes in your brand image or company image may require changes to be implemented and reflected on your website. Update your logos as soon as possible, to be in tune with the shift of image or branding. Remember that the website is like the face of the company, where people get their first impressions and make assumptions.

Even if you’re not, establish yourself as the industry leader and adopt new technology and introduce innovative aesthetics to the site. Always provide relevant content to your audience.

Sign number 3: Your web site just looks tired.


Websites are like fashion trends–they can get old. What was really cool a few years ago can now look cliché and old. For example, 3D buttons and interfaces were so cool a while back, then beveled and embossed styles were all the rage. Flash intro pages were popular at one time, and most users enjoyed it. But soon web users got tired of it and wanted to skip and go straight to the content. Flash introductions were great then, but now they look old and pointless.

George RR Martin sure writes good books, but his website looks like something from 1995.

Thing is, what was new and innovative a few years ago will start to look tired soon enough. Nowadays,  the shelf life of the site’s aesthetic is only one year. If it has been more than a year since your last revamping, it’s time to do it now.

So if your website looks old and tired, it’s time for a makeover. Aesthetics eventually evolve, and an old design can destroy a company’s whole image. A fresh and new design will refresh your loyal users’ experience, and at the same time attract new ones. Your focus on revamping the site is to keep your brand image fresh.

Other Questions to Ask


From the perspective of the web user or customer, ask yourself the following questions:

  • Does the website give me a favorable user experience?
  • Is the website entertaining and interactive?
  • Can I navigate through most of the web content within three clicks?
  • Can the web users get an idea of the company’s branding and image through the web design aesthetic?
  • What are the drawbacks and weaknesses of the site?
  • Would you return to the website often–and for what reasons?

Provide relevant content on your website. Be sure that when people come to your website, they get what they’ve come for–information, education, and maybe some entertainment and interaction. Avoid unnecessary elements such as flash intros and annoying banner ads. The web site should be easy to navigate with a user-friendly interface.

Educate and entertain to keep your visitors coming back again and again. Always have new and fresh content on your web site. And, provide information with blogs, articles and pictures. Be sure your web site is searchable by increasing your SEO. Nowadays, content is king, so build on relevant content related to the company’s product and industry.

Content is King

Image by enimal

In the end, the web site you made should be something that you’re proud of. It is the online storefront to the company or business. It is where your current and potential customers go to seek information, and engage in a relationship with your business. For you to survive, you must constantly adapt and go with the flow of the most recent technological and aesthetic trends. Invest in being up-to-date rather than being safe all the time. Ride the wave!

January 28 2012

10:00

How to Properly Redesign a Website

Redesigning a website happens very often on the internet today. It can be thanks to the new technologies that appear one after another (and every one of us wants to stay in fashion) or because the rules change from month to month. Whatever the reason is, it is quite important to do it properly and to ensure the new design will bring you more advantages over your competitor than the old version.

We don’t redesign a website only for the sake of spending money. We do it because we feel that the site needs a visual revamp, we feel that our visitors want to see something new from a visual stand point. Considering the redesign is entirely for the users, it’s them we should focus on when we think about creating a new identity for our blog, publication or whatever kind of webpage it is.

The bigger and more important your webpage is, the higher the probability to fail when redesigning it is. Why? Because when you have to take hundreds of thousands or millions of users under consideration, it might be difficult to please all of them – quite frankly, it is impossible to do it. I personally experienced leaving a website I liked only because they changed the design – and I am aware of how the web works. If I left that webpage for good, I am wondering how many other users that don’t have anything to do with design did the same.

In order to increase the probability of your redesign being successful, I have created a list with some tips for you.

Make sure you need to redesign


When you already have users that come back to your site, most of them expect certain things; they know where the navigation is, where to search for content, where to find archives and so on. By redesigning you will most likely change those things.

Image by buritikid

If you are lucky enough and have a responsive community, you can even make a poll and ask them if they think the site needs to be redesigned. If you don’t have such a community, the decision will be up to you and will be more difficult to make unfortunately. Try to ask fellow designers about the particular website and see what they think about it.

Involve your users


The second step in a redesign process is to involve the community base. This can help your new website to look and suit your audience better, because you get feedback from them and use it to inform your designs.

A good tip would be to try and keep the main elements in the same place, or at least to ensure the functionality is similar. Moving the sidebar from left to right is confusing for the first time; the same with the navigation – if you had a dropdown menu before, either go with this type again or simplify the navigation. It’s important to always make sure the user doesn’t find the new website more difficult to navigate  than before. Thus it’s necessary to avoid a total redesign. More important, involve the users in the process.

Image by Dominik Gwarek

Test the website


Testing the website doesn’t only happen behind the closed doors of an agency, but also with the users. Offer them the option of testing the new website – and make it visible. Afterwards, allow them to send you feedback through forms or a survey and always keep track of it. This is another way of involving the users and helps because, I am saying it again, the user is always the focus. You never redesign for yourself, but for them. Allowing them to test the new design before it’s done will also give you the opportunity to adjust it. Expect this to be a difficult process, because you will start with some ideas and will end up with a different site – but make sure your visitors will appreciate it and will come back afterwards.

Don’t change the layout right away


This is a strategy most of the social media sites use. Whenever they change the layout, they either allow you to stay with the old one for a predefined period, or change to the new one and give you the option to go back to the old style. Why do they do this? The answer is simple. Not everybody has the required time to get used to a new layout when the designer wants. Getting used to a new style takes time and if the user doesn’t want to spend that time right away, give him the right to do so.

Allow users to change to the new design (and specify it is still in beta) and give them an option to go back to the old one. Sure, don’t keep this forever, but look at Facebook. They only force everyone to update their layouts to the new ones after one or two months after they make them available for the first time.

Some of the users decided to go for the new “Timeline” of Facebook. I decided to keep the old layout because I liked it. Moreover, I didn’t even think of getting the timeline because Facebook wouldn’t allow me to go back to the previous style. Therefore my Facebook still keeps the old style. But as a matter of fact, Facebook will update my layout to the timeline very soon, when the old style will not be available anymore.

This is an interesting strategy and is very well implemented in social media. Therefore think of implementing it with your site’s redesign.

Allow feedback even after the process is done


You redesigned the website and now it’s on. Users can’t go back to the old one and there is nothing else to do other than accepting it as it is. Fair enough, but allow the users to give feedback.

There are lots of tools you can use for this on the internet and this way you will make sure that if something is wrong, users will point it out to you- this happens mostly if you have a responsive community supporting the website, but it is always worth trying.

If a lot of your users feel the same thing is wrong, make sure to fix it as soon as possible. This way they will feel like they’re a part of the community and, since their opinion is valued and taken into consideration, they will happily continue their stay there.

Make the reasons behind your decision clear


It is always smart to tell your users why you think it is important to redesign a website. Some of them have no idea of design changes, usability or new technologies and I am afraid they don’t even care – they just want to be able to use the website like they were accustomed to. Changing the design will not allow this for a period, until they get used to the new layout, therefore some of them might be against you customizing the style.

Thus, explain to the users why you think it is important to make changes. Use some basic theories and explain that being up to date with new technologies will allow the website to offer even more and will probably even make it load faster. When they hear about speed, most of them will be excited about the new design.

Make a guide for the new layout


If you make major changes to your website, then creating a photo, text or video tutorial about this would be great, interactive and helpful. I am sure the visitors now knowing what to do next will appreciate the tutorial which will allow them to adapt faster to the new design. This gives them the impression that you care about them – which again will make them come back to your page.

Image source

In case you already redesigned your webpage and it kind of failed, there are solutions for you too. This happens if you hear way too many complaints from your community and you don’t want to spend money on a new design again, but want to do something to improve the atmosphere for your users.

It’s about your mistakes


If this happened, then it is probably your mistake as a designer, because you either did something wrong during the development process or you failed or miscommunicated with the users. It is clear that if they are not happy with the new design, there is something wrong and it’s obviously something major that you’ll need to address.

This is the perfect moment to show how close you are to your community. It can be on Twitter, Facebook or even on the site, make sure people find out you want to fix your mistakes. Let them speak and let them tell you what was wrong, this way it will be easier for you too, when you will have to decide on the solution.

Use their feedback


When they send you feedback, make use of it as much as possible. Acknowledge some of the complaints and show the community you are involved and want to change everything for the best. This will, again, make your life easier, because all the feedback you get and discussions you stir with the community will end up with some conclusions, ideas and possibilities. It’s much easier to repair a mistake when you are backed up by your community, then when you are not.

Go back if you need to


There is no shame in acknowledging that your redesign has failed, therefore if the community strongly asks for it, you can go back to the old design. Sure, going back to the old design means you still have to use resources to redesign (that is where you started from in the first place), but at least until you prepare a new strategy the number of visitors will not decrease.

It is really important to keep the community happy and the way of doing it if you are in this situation is to allow them to go back to the old style. Don’t force this into them, it will definitely get confusing for the ones who thought well of the new layout. Just offer the option of choosing their own style. This will, for sure, solve the problem in the short-term and will allow you some time to prepare the new design better.

Always follow opinions


The most important thing whenever you launch a new design is to monitor carefully the community and their behavior. Google Analytics is the best tool you can use, because it is free and gives you an in-depth insight into how the users spend their time on your site. If the number of visitors decreases soon after the launch date, it might be because of the new layout.

"Just my two cents"

Image by claymor

This is the time when you have to start interacting more with the visitors and ask what is wrong. The bottom line is that many users would rather stay on a bad page if the designer is interested and involved with them, than staying on a very good page where the designer doesn’t really care. You have to show your community you care about them.

Another way of keeping track of the opinions is to closely follow social media posts. Most users actually prefer Twitter and Facebook when talking about these kinds of changes, so keep an eye out there too. This is another way to show your users the redesign is for their own good.

Bottom line


The conclusion is that redesigning your website is not as easy as it sounds. Not being able to involve your community in this important decision will most likely turn your project into a failure and will drive the users away. Thus it is smart to keep the community close and use their feedback and opinions – in the end, everything you do is for them – at least consider their opinions. This way you will be closer to success than if you do this the other way around.

January 04 2012

10:00

Review Of New Twitter and Tweetdeck – What’s new?

Recently, Twitter went through a significant upgrade and redesign. This time the update is huge and comprehensive – starting with new mobile apps and ending with a new version of popular tweeting platform Tweetdeck. What has changed? Are there some things you should be aware of? Continue reading and check out a review of the new Twitter web version and the Tweetdeck to find out what’s new.

Twitter

Dainis-Graveris-(1stwebdesigner)-on-Twitter

The Look

You won’t see anything drastic on the new homepage yet there are some adjustments. The new homepage is designed to make it easier to access and scan the relevant information for you. The biggest improvement is the media which is now embedded into the timeline. There’s no need to view photos or videos in new tabs anymore, you can access them straight away ( of course, you still have to click). You can also immediately access your favorite features from the lefthand side.

Twitter-_-Home

The new homepage’s goal is to be consistent between all your devices. Twitter has always been about simplicity and nothing has changed with this version. Although with the right aligned timeline Twitter has has started to resemble other social networks.

The profile view has experienced some changes. The number of lists you’re included on is now gone. In fact, lists have been made more irrelevant with this update. You also get a larger picture thumbnail and the new Me tab allows you to edit your profile straight within the profile page.

Twitter-_-Home-1

@connect

Twitter-_-Interactions

The @connect tab has taken over the previous Activity tab’s duties. It’s the place where you can see who has followed or mentioned you, retweeted or favorited one of your tweets. The tab is splits Interactions and Mentions so you can easily track your Twitter influence. Basically nothing much has changed except the name which I believe does the trick.

Another thing Twitter has introduced in this version is the switch from usernames to real names. Now everything’s backwards – first name you’ll see above the tweet is the real name which is a hyperlink and only then comes the username.

#Discover

Twitter-discover

Discover lets you tap into a stream of useful and entertaining information, customized just for you. Discover is something like the old search function only way more better. What it does is it generated your personalized information and stories based on who you follow, your location, trends and your interactions. Discover tab consists of five sections – stories, activity, who to follow, find friends and browse categories. Interacting has been made extremely easy.

While some of the experienced users often get bored by those following suggestions which aren’t always the best, the #Discover is a superb feature for those who are new to Twitter and don’t quite know where to start off.

Brand Pages

Coca-Cola-(cocacola)-on-Twitter
Twitter has followed the example of Facebook and Google+ and introduces the brand pages feature with this update. Although it’s nothing game changing because most of the companies already have Twitter accounts this feature will allow companies to customize their header to make their pages look more official. Companies will also have the chance promote a tweet which will appear at the top of the timeline. The new pages also let brands separate their replies and mentions. And, of course, they’re free.

Embedding Tweets


The new update also comes with great news for developers. Instead of copying and pasting a code users can now simply embed their tweets with just a couple of clicks. All the usual actions are available and easy to use with the embedded tweets – reply, favorite, retweet.

WordPress bloggers will be able embed Tweets directly into their posts by simply copying the Tweet URL or using a familiar shortcode.

Finally, Twitter has refreshed the design of Follow and Tweet buttons and introduced two more buttons – #hashtag and @mention button. The new #hashtag button tells your visitors there’s an interesting conversation happening on Twitter, and lets them join in with just one click. The @mention button encourages visitors to Tweet to your account, driving public conversation directly from your website.

What’s gone

Most of the negative feedback comes from iPhone users. The option to translate tweets is gone and users can no longer copy and paste from a tweet. There’s also some buzz about saying thank you to multiple people. With the tweeting now happening from a pop up window you no longer reply to several people at once so you just have to type in the user names manually. Which again is a little inconvenient because of the use of real names.

Yet I was unable to find anything significant that the new version lacks so I’d be grateful if you could point these things out for me and other readers.

Overall

Twitter really appears to have hit the bull’s eye with this update. Most of the users seem very fancy about the new changes and reviews are only praising the new features. There are opinions that Twitter has officially gone mainstream but that’s the very same thing you’d do with such an influx of users. The new version really makes engagement and interaction easy. We’ll see the results but for now on it seems rather promising and optimistic.

Additional resources

Tweetdeck

0-new-twitter-tweetdeck-review

The same day Twitter announced it’s new version the most popular tweeting platform Tweetdeck got a new look as well. Tweetdeck was acquired  by Twitter in May 2011 allegedly for around 40 million dollars. Finally, the conversion from beta is complete and we can get our hands on the new platform.

You can get Tweetdeck either as a web application, Chrome plugin or desktop plugin. In this review I’m using the desktop version yet there’s actually no difference. So, what’s new?

The Look

1-new-twitter-tweetdeck-review

The most radical yet not so noticeable is the shift from AIR to a native desktop app. The dashboard is almost identical with the old version however there’s been an irreversible change. The next thing you might spot is the missing orange logo which is replaced by Twitter’s blue bird.

The column navigation has switched to the top of the window and is more handy. Yet there’s a considerable drawback namely the columns aren’t resizable anymore. Actually you couldn’t resize columns in the old version as well but the minimum width for them was lower and more columns would fit the screen.

Unlike the old version the tweeting is now done from a pop up window. Some other minor changes include blue links, switch from usernames to real names, tweets now miss day and date and a smooth search bar at the top right.

1-new-twitter-tweetdeck-review

Overall, the look now seems somehow cleaner and coherent. Browsing experience is made more pleasing and perceptible. Yet there’s a price. And it becomes apparent when it comes to performance and features which is far more important than sleek neat visual look.

Performance & Features

Usually with an upgrade we expect new features and improved performance but it’s quite discussible within this case. So is there something new? The message box is more compact as it merges the messages you have with a person. Also you get a solid info about a user you follow by clicking on his avatar. Yes, that’s about it.

3-new-twitter-tweetdeck-review

But what’s gone? First of all there’s no more support for Foursquare, LinkedIn and Google+ also hasn’t hit the list.

While some of you might be glad that the AIR is gone there are some cons. And the most apparent is the approximate 20 second delay for updating tweets. It may not be so essential for ordinary user but it may create some problems for those who used to use Tweetdeck seriously.

Here are other important drawbacks and missing features:

  • There’s no more option to edit lists and add new people to them.
  • Retweeted tweets doesn’t stand out in any way so it’s harder to spot them.
  • Media from Twitpic, Instagram, Youtube etc doesn’t show in a pop up. Instead you have to view it in browser.
  • @me column shows only mentions without retweets.
  • No drag and drop support for image upload.
  • You can’t translate tweets anymore.
  • No more support for keyboard shortcuts.

Overall

While Tweetdeck can be proud of the fresh beautiful look it just can’t hide and countervail all the missing features. One of the Mashable’s commentators wrote – “Tweetdeck wasn’t just a Twitter client but an overall social media dashboard.” Sadly but it’s kind of truth. Some maintain that this is the Twitter’s strategy to stimulate users to use the native Twitter website and maybe it is so.

However, Tweetdeck was never a business platform. It was created for Twitter power users and I believe it hasn’t changed it’s nature. The new look is definitely a benefit and, well, do we care if Twitter pushes us to use it’s own tools? For the average user it doesn’t make a difference and if the app works and meets all the needs – why not to use it?

December 08 2011

15:09

Clear Indications That It’s Time To Redesign





 



 


Redesign. The word itself can send shudders down the spines of any Web designer and developer. For many designers and website owners, the imminent onslaught of endless review cycles, coupled with an infinite number of “stakeholders” and their inevitable “opinions,” would drive them to shave their heads with a cheese grater if given a choice between the two. Despite these realities, redesigns are a fact of any online property’s life cycle. Here are five key indications that it’s time to redesign your website and of how extensive that redesign needs to be.

Metrics Are Down

The first and most important indicator that your website is in need of a rethink is metrics that are beginning to tank. There certainly could be other reasons for this symptom (such as your product not fitting the market), but once those are eliminated or mitigated, a constant downward trend in conversions, sales, engagement activities and general user participation indicates that the efficacy of your current design has worn off. Many people call it “creative fatigue,” but what this really indicates is a disconnect with your audience. The key to solving this in the redesign is to figure out where in the workflow the design is breaking down and then address those areas as top priorities.

Metrics
The metrics are the most important indicator.

The extent to which you redesign to solve sagging metrics could be limited either to adjusting your conversion funnel, if that’s where the problem resides, or to optimizing the product’s main workflow. It does not necessarily mean having to rethink the entire face that your product presents to the world.

Your Users Tell You It’s Time

Metrics give you immediate insight that something is wrong, but to get to the core of what needs to be addressed in the redesign you need to speak with your customers. Surveys work well, but usability testing is most effective. The fluidity of face-to-face conversation allows you to explore the dynamic threads that surveys restrict. If through these conversations you notice consistent patterns that shed light on the drivers behind your downward-trending metrics (and you will), then it’s time to redesign. In addition, these user conversations will reveal prevalent attitudes towards your brand, which can also be addressed in the redesign. In some instances, negative brand perception should be enough to trigger a redesign — but you’d never know about it unless you talk to your customers.


The final decisions are still up to you. (Image: Kristian Bjornard)

Customer feedback will tell you not only whether to rethink parts of your website, but to what extent. Typically, customer conversations focus on specific elements of your workflow. Those areas are the ones that the redesign should focus on. In most cases, this wouldn’t be the whole website, but if the feedback is broad and far-reaching, then tackling the entire experience may be a priority.

The Tech/UX “Debt” List Is Longer Than Your Forearm

Over the course of building a product or website, an organization begins to accrue tech and UX debt. This debt is made up of all the things you should have done during the initial build but either didn’t get around to or had to cut corners on in order to ship the product on time. Each subsequent iteration inevitably adds more debt to the list, until the list becomes so long that it is almost insurmountable. While there are many ways to tackle tech and UX debt on an incremental level, there comes a point when the website, in essence, becomes “totalled.” Like a car that has sustained damage greater in cost than its value, your website gets to the point where starting over would be cheaper than fixing all of the items on your debt list. This is a perfect time for a redesign.

When the debt list gets this long, taking on “incremental redesigns” is easy, where you knock off bits from the list but not the majority of it. This turns into death by a thousand paper cuts, because as you fix elements on the list, you start to accrue more debt around other features. If the list truly is longer than your forearm, then rethink the website if possible.

It Just “Looks” Old

The website’s aesthetic reflects directly on the perception and trustworthiness of your brand. Even if your design was the hotness when it first launched, aesthetics evolve. An old design will be detrimental to your product, leading to the declining metrics mentioned earlier. How can you tell whether your website’s aesthetic is outdated? Look at your competition. Look at hyped-up newly launched services in other sectors. Compare your aesthetics to those of brands that are performing well. Those factors provide excellent barometers by which to assess the currency of your design. The challenge is to review these other websites objectively. Living with your website day in and day out can amplify the feeling that it’s stale and old. Ensure that your assessment is accurate by reviewing your findings with a cross-section of employees in your company.

Win some, Lose some.
Decide on what to lose and what to add. (Image: Kristian Bjornard)

In this case, the redesign would essentially be a facelift, a superficial upgrade of the presentation layer that doesn’t necessarily address the fundamental workflow or conversion funnel — although those aspects will undoubtedly be affected by this aesthetic upgrade.

It’s Been More Than 12 Months Since Your Last Refresh

Even if none of the above indicators apply to your website, the shelf life of an aesthetic in today’s highly iterative online reality is hardly ever more than 12 months. If it’s been a year or longer since you last redesigned your website, then it’s time to redesign. Not only will it refresh the experience for your loyal customers, it will attract new ones. In addition, it will breathe life into the brand and show your user base, the press, your investors and staff that you’re committed to keeping the experience fresh and top of mind.

Again, the focus here is on an aesthetic improvement that keeps the brand current, not necessarily an overhaul.

In Conclusion

These are five simple indicators that it’s likely time to redesign your website, but the list is certainly not exhaustive. The number of them that apply to your situation will determine whether a redesign is imperative. But each indicator on its own is still a strong reason to kick off the next phase of your website’s life. Maintaining a current and fresh face for the online world will yield dividends in customer acquisition, conversion and retention. Also, your staff will stay immersed in the latest technologies, design trends and presentation-layer wizardry if they know that they’ll soon get to exercise their chops in a redesign.

What indicators have you found work best in your organization to drive a website redesign?

(Cover image: una cierta mirada)

(al)


© Jeff Gothelf for Smashing Magazine, 2011.

November 15 2011

16:32

The Data-Pixel Approach To Improving User Experience





 



 


There are many ways to skin a redesign (I think that’s how the saying goes). On a philosophical level, I agree with those who advocate for realigning, not redesigning, but these are mere words when you’re staring a design problem in the face with no idea where to start. This article came out of my own questions about how to make the realignment philosophy practical and apply it to my day-to-day work — especially when what’s needed is more than a few tweaks to the website here and there.

I propose an approach to redesign through realignment, by using a framework adapted from Edward Tufte’s principles on the visual display of quantitative information.

But first, a little context.

Redesign Through Realignment

Let’s recap the redesign versus realign argument. Here is Cameron Moll in “Good Designers Redesign, Great Designers Realign”:

The desire to redesign is aesthetic-driven, while the desire to realign is purpose-driven. One approach seeks merely to refresh, the other aims to fully reposition and may or may not include a full refresh.

A realignment can include a full refresh, but the starting point is not the visual layer. The starting point is an understanding of the website’s users and their objectives, of market trends and of brand strategy. These are the hard questions that guide a realignment — not a desire to try out some new fonts or see whether a +1 button would look good on the home page.

But surely a visual refresh can be beneficial, too? What’s the danger in giving users something new to look at? In an essay that builds on Cameron’s article, Francisco Inchauste sums up the problem as follows:

Great designers adjust an existing work with little disruption of the foundational design for a goal or purpose. The end result is a modification to the design that improves the user experience. Good designers, on the other hand, recreate existing work focusing on the aesthetic, with a misunderstood notion that it will always improve it. However, they end up disrupting and/or damaging the user’s experience, making no real impact with the effort.

The main problem with big redesigns, therefore, is that, even though objectively the UX might have been improved, users are often left confused about what has happened and are unable to find their way. In most cases, making “steady, relentless, incremental progress” on a website (to borrow a phrase of John Gruber) is much more desirable. With this approach, users are pulled gently into a better experience, as opposed to being thrown into the deep end and forced to sink or swim.

So, if we agree that a realignment is preferable to a redesign (and I’m sure we never will, but let’s assume we do for the sake of this article), a big question remains unanswered: What happens when a realignment requires major changes to the website? What happens when small tweaks aren’t enough, when a website’s UX is so far gone that you’re tempted to scrap everything and start over?

One way to go about it is to use a continual realignment process to redesign the website. Build a vision, and know where you’re going in the long term; but get there incrementally, not with a big-bang release. Remaining rooted in the realignment approach ensures that the focus remains purpose-driven, even if the process results in major visual changes. “That’s fine,” you say, “but how do you do it? Where do you begin with such a project?” Let’s now look at one possible approach to redesigning through realignment.

Edward Tufte And The Data-Ink Ratio

I’ve always been intrigued by Edward Tufte’s principles for visualizing large quantities of data. The Visual Display of Quantitative Information is one of my favorite books of all time. Recently, I’ve been wondering whether its principles could be applied to Web design and, specifically, the realignment process. The deeper I got into it, the more I realized that within Tufte’s principles lies a goldmine for people who make websites.

Tufte Book

One of Tufte’s central principles in The Visual Display of Quantitative Information is what he calls data-ink:

Data-Ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented.

Before we unpack what this means for Web design, it’s important to note that Tufte’s work applies specifically to information graphics and the display of quantitative data, not to the design of graphical user interfaces. However, when carefully interpreted and applied to the field of Web design, the principles are extremely useful.

With that in mind, I propose the concept of data-pixels for the design of user interfaces to mirror Tufte’s data-ink for information graphics. In the context of Web design, we can then think of data-pixels as the simplest and most desirable path that a user can take through a flow (the “non-erasable core of an interface”). It is what would remain in “focus mode” — if nothing else existed on the screen, just the design elements that enable users to get from one screen to the next.

For example, on a payment screen, data-pixels would be the credit-card fields, text labels and “Pay now” button. Nothing else. This is obviously not possible — you need headers, payment summaries, tooltips, trust seals, etc. But the “core data” are the elements of the page that we cannot remove without the user getting stuck with no ability to recover.

From this irreducible point of the design, you can start to add other elements as necessary, and this is what Tufte’s work is all about. Much of what Tufte espouses is finding the right data-ink ratio (or what we’ll call data-pixel ratio) for quantitative data, so that the core data can shine through. He lays out five principles for data-ink. Here is an overview and how these principles can be adapted to redesign through realignment.

Principle 1: Above All Else, Show the Data

Data graphics should draw the viewer’s attention to the sense and substance of the data, not to something else.

– Edward Tufte, The Visual Display of Quantitative Information

During a realignment, we should be guided by the principle that every page should be focused on the core data and the primary task that users need to take in that particular flow. Anything else is noise and should be added only after very careful consideration.

Craig Mod has written a great article titled “The Shape of Our Future Book.” In it, he describes the “quiet confidence” that a Kindle has when it is woken from its sleep state (compared to the iPad in particular), and then he addresses the data-pixel issue as follows:

I think the same concept of “quiet confidence” can be applied to data. Namely, in designing user experiences, we need to produce data that doesn’t draw attention to itself explicitly as data.

This doesn’t mean that design has to be boring or that aesthetics are not important. It means that we need to be mindful that any layer of design we add to the core data has to serve a specific function and cannot distract from the data itself.

Technology in the background
Image credit: Sarah Blake

Principle 2: Erase Non-Data Pixels, Within Reason

While it is true that these boring [pixels] sometimes help set the stage for the data action, it is surprising […] how often the [pixels] themselves can serve as their own stage.

– Edward Tufte, The Visual Display of Quantitative Information

Once the context for the realignment is set by the overarching principle of focusing on core data, it’s time to evaluate the design and start improving the data-pixel ratio.

The first step is to look for ways to erase non-data pixels — the parts of the design that don’t directly apply to the user’s primary task. Look for elements that cannot be connected to guiding a user to the desired outcome, such as:

  • Colors that don’t support the visual hierarchy through contrast;
  • Typefaces that draw attention to themselves for no good reason;
  • Gratuitous imagery (stock photography in particular) that does nothing more than break up the page (consider using white space and proximity grouping to create natural breaks instead);
  • Alignment, sizes and color contrast that draw unwanted attention (for example, indented paragraphs, large social-media icons, a bright ad that doesn’t fit the website’s visual style).

One website that could certainly benefit from the removal of non-data pixels is doHome. Notice the gratuitous reflection of the navigation menu, the unnecessary stock photography, and the fact that so little content on the page tells you what the website is about:

Do.co.za home page

MailChimp does a good job of limiting the non-data pixels on its sign-up page. Clear language indicates what to do; large fields with top-aligned labels ensure that you complete the form quickly; some information is included about the plan you’re signing up for; and the button to sign up is big and high-contrast.

Mail Chimp Sign Up

Squarespace’s sign-up page removes as much non-data pixels as possible to put all the focus on the task at hand. The background disappears as soon as you click the “Sign up” link, and you’re presented with the following zero-distraction form:

Squarespace Sign Up

Google+ is another example of a design that employs minimal non-data pixels. As Oliver Reichenstein says:

It is extremely difficult to keep a complicated user interface so light, white and free of lines, boxes and ornaments. The content hierarchy is always clear, color definitions and consistent and clear without labeling them.

This list isn’t exhaustive, but it illustrates the purpose of the principle: to critically evaluate the visual elements in order to strip out what isn’t necessary.

Principle 3: Erase Redundant Data-Pixels, Within Reason

Gratuitous decoration and reinforcement of the data measures generate much redundant data-[pixels].

– Edward Tufte, The Visual Display of Quantitative Information

“Redundant data-pixels” refer to elements of the design that are repeated without good reason. Some examples:

  • Rows of products in a table with an “Add to cart” button next to each one.
    (Consider using check boxes, with one “Add to cart” button at the bottom.)
  • Animation as a way to draw attention to an element.
    (Consider using high-contrast color and size instead.)
  • “Are you sure you want to do this?” dialogs for simple tasks such as adding a product to a cart.
    (For potentially catastrophic actions, like deleting an account, this type of dialog is, of course, appropriate.)

Below is an example from the offline word, courtesy of Allan Kent. The chart shows the price of parking per hour. Surely a simple sign that reads “R10 per hour” would suffice?

Note the addition of “within reason” to each of the data-pixel principles. Tufte himself acknowledges that redundant pixels are sometimes necessary:

Redundancy, upon occasion, has its uses: giving a context and order to complexity, facilitating comparisons over various parts of the data, perhaps creating an aesthetic balance.

The exception, then, is when, in Tufte’s words again, “redundancy has a distinctly worthy purpose”. A “Pay now” button at the top and bottom of a check-out page could be an example of this. One of the buttons is redundant, yet it introduces efficiency so that users don’t have to scroll up or down to place their order.

The guiding principle here is to strive for a minimalist aesthetic, adding redundant pixels only when they serve a larger purpose (for example, when they’re essential to the brand’s promise or to user efficiency).

Principle 4: Maximize the Data-Pixel Ratio, Within Reason

Every [pixel] on a graphic requires a reason. And nearly always that reason should be that the [pixel] presents new information.

– Edward Tufte, The Visual Display of Quantitative Information

Once you’ve erased as many non-data pixels and redundant data pixels as possible, the next step is to figure out what (if anything) is missing from the design. The goal of this principle is to add more pixels to the design, if necessary.

There should always be a reason for adding elements to a design, and the reason will usually be that those elements provide information and/or functionality that increases usability. Some examples:

  • Breadcrumbs that tell users where they are on the website and give them an easy way to get back to where they came from.
  • An aesthetic layer of color, typography, layout and so on, to ensure consistency between brand perception and the website.
  • Hover states or tooltips to provide appropriate guidance or contextual help to users.

An example of necessary pixels is relevant inline error messages. Consider the sign-up form on Quora below. Very few non-data pixels are on the page. The form’s layout is simple, with no extraneous decoration. But if you try to enter only your first name, the page instantly reminds you that a full name is required:

Quora Registration

One could argue that this isn’t technically part of the “core data” of the design. Quora could have let this slide and either allowed accounts with first names only or sorted it out after users have signed up. But it has decided that data integrity is important from the start, so it has added this real-time check.

A little closer to home, this is what the header of kalahari.com (where I currently work) looked like when I started at the company:

Kalahari old header

Identifying the non-data pixels in this design is easy: very large radii on the rounded corners, color that grabs too much attention, too many unimportant links, etc. After maximizing the data-pixel ratio to put the focus on the core data (which is search), we ended up with this header:

Kalahari new header

Principle 5: Revise and Edit

Probably, indeed, the larger part of the labour of an author in composing his work is critical labour; the labour of sifting, combining, constructing, expunging, correcting, testing: this frightful toil is as much critical as creative.

– T.S. Eliot, Selected Essays, 1917–1932

Tufte quotes T.S. Eliot to describe the relentless effort of editing and revising in graphic design work, and it’s certainly true for Web design.

Once you’ve completed a cycle through these principles, it’s time to go back and start again. Every realignment cycle exposes new opportunities to “above all else, show the data”. UX is a never-ending cycle of improvement, and following a realignment process bakes this constant cycle into the strategy in a very natural way.

Summary

As I mentioned at the beginning of this article, there are many approaches to redesigning a website. The hardest part often is knowing how and where to start. As I’ve shown, Edward Tufte’s timeless principles for the visual display of data can be adjusted and used as a framework to get over that initial hump and serve as a catalyst for a cycle of continual improvement through realignment.

What other models or approaches are there to frame a realignment project? How do you get started?

Front page image source: Elliot Jay Stocks

(al)


© Rian van der Merwe for Smashing Magazine, 2011.

September 03 2011

10:00

Beauty vs. Function: On Redesigning

The thought of producing the best possible design, either from scratch or redesigning something, gives jitters to the heart of many designers. Even professionals in the field can’t quite balance beauty and function.

A few days ago I saw a comment here on 1stwebdesigner that says most of today’s web designing is just like recycling old designs. That several years ago, when CSS was first introduced, people were really ecstatic to see “new” designs which were totally one-of-a-kind. With the rise of CMS like WordPress, Joomla, and others, there are already ready-made themes that, if I may say, are used by thousands of people. Nothing unique, nothing fancy.

I am among those people who buy ready-made themes. Partly because I don’t have the funds to hire a professional designer/developer to make me a website and half the reason is it’s easier that way. I know, hold your pitchforks and listen first!

It’s pretty hard to come by a design that equally serves both beauty and function. This applies to logo, website design, illustrations, posters, and almost anything that has lines, curves, colors, and is artwork.

Let’s agree that there are certain facets of designing that take longer than others. An example is website design, it takes a vast amount of time to produce the optimal result the client wants. There are designers who have really bad experiences dealing with clients because the purpose of the website does not jive with the design the client wants. In which case, the two need to strike a bargain.

Designing for Beauty

Looking at a website, logo, or a poster and telling yourself, “well, it could be better” should always be followed by thinking about the users. Are they already accustomed to the current design, that if a change is made they’ll hate it?

Designing to solely improve the beauty is quite tricky. Trickier than adding functionality or information because a redesign means a change of identity. Now we’ll focus on web design, but keep in mind that this applies to all things that can be designed. In web designing, why do people have to redesign? For two reasons: 1. the existing design sucks, and 2. a fresh look is needed.

Reason one is the most used reason for redesigning, and is somehow less tricky because people will see the improvement and most likely love the new design. Just keep in mind that you are redesigning for ease of access, to make things better than what they used to be.

Reason number two is the trickiest. Redesigning just to keep things fresh is not really a good practice. There is a 50-50 chance that if the previous design is loved by people and a sudden change is introduced, people might hate the change which could result in a drastic decline in readership, like what happened to Digg and the Gawker Network (fairly recent).

Designing for Function

Nothing fancy here, just straight to the point like most news websites. Actually, if you look at news websites you might get dizzy at first because everything appears to be scattered. These websites take quite some time to get accustomed to, but once you know the basic navigation, all is well. A perfect example is Reddit. Over three years ago, when I first arrived on the website, I said to myself, “man, this website’s design blows” but as I spent several minutes and hours there, when I’m already accustomed to things, I’d rather have it stay that way than to have fancy colors and logos and things. Why? Because the purpose is to read, share, and view different media from external sources.

Another perfect example are management systems and eCommerce websites like eBay. I think you already know where I’m headed, designing for function is more about serious business.

The problem with redesigning

The problem with redesigning usually isn’t actually about how hard the existing design is to manipulate, but the problem is “can it still be improved?” Yes, the problem is a question of whether redesigning will improve things.

In art, there is no such thing as a finished piece. Everything is abandoned. No art is finished and perfect. But when is the right time to pull out that brush and stroke the canvas once again? I’m afraid that’s a grey area even for most designers I know. Why redesign? It looks good and it already serves its purpose, doing more may confuse your audience with the sudden change.

As you may have experienced, people have the propensity to reject changes. But there is a way to introduce change without irking people, and that is by gradually changing things, not a full-blast update. Take for example Facebook. For several years the layout has changed incredibly, there were fiascos (like the recent chat box update) and there were several successes, all without alienating the existing users.

But I didn’t answer the question, “why redesign?” You redesign when a function is needed and it changes the layout of the entire design, but only redesign if it will complement the site well. As I have stated in my previous article, the purpose of redesigning is to make things easier for the users.

Why can’t it be both?

photo by: cobrasoft

Like people, artists and their masterpiece are unique creations. These artworks have their own personality, and that their “purpose” may or may not be positively taken by the audience. To the artist his/her creation might be a masterpiece, but is it for other people?

Take for example Digg’s redesign. It was big news a few years back because they lost a big fraction of their users because of the redesign which they thought would be good, but really isn’t for “old timer” Digg users. That is how severe the redesigning process can affect things if it isn’t done right.

One thing to remember

Designing can be two things: for beauty and for function. It’s like saying “beauty and brains,” only it doesn’t work that way. One thing you need to remember when faced with a design project is that you need to figure out what is really needed. Does the material need to call out to people more or is it for a specific function.

One thing to remember: never use the color blue just because it’s your favorite color.

The problem with users

Audience are fickle creatures. Most of the time it only takes one angry reader to cause a large avalanche of people to follow them. We’ve seen this happen on the internet many times now, even outside the field of designing, where someone convinces people that Company X’s service is not good, then the whole internet brigade of justice brings out their pitchforks (or are they internet mobs?).

What do you think?

Have you redesigned a website? What was your experience? We’d love to hear!

April 18 2011

22:35

Redesigning The Mojo Themes Marketplace Experience

Although this site has seen a decrease in writing, I’m still working hard behind the scenes with some great projects and clients.

Introducing The New Mojo Themes Website And Marketplace

What was the overall goal of the redesign and how did you aim to make Mojo Themes stand out?

“There were three major tasks at hand when redesigning and rethinking the Mojo Website and Marketplace experience: Improved usability, simplified marketplace navigation / browsing, and creating a more unique and enjoyable experience that was lacking. At first we found ourselves moving far away from the brand that Mojo Themes had already established with their customers. It took us a few extra weeks of swimming in the wrong direction in order to see where we needed to be and where we needed to take it. With a fresh, lively coat of paint, beautiful typography utilizing webfont Proxima Nova, more engaging headlines and updated copy, dynamic experiences from page to page, improved marketplace browsing and rich interactions. We even gave the “Mojo Monster” a name. Say hello to Captain Horatio.”

Read more about our process, strategy and the full interview over at Fuel Your Creativity.

VISIT THE LIVE SITE

Landing Page

Mojo's Landing Page Mockup

Actual size: http://cl.ly/652r

Log In and Navigation Dropdown Detail

Mojo's Login Dropdown

Actual size: http://cl.ly/4phd

Mojo's Navigation Structure

Actual size: http://cl.ly/4p5g

Marketplace Browsing

Mojo 'sMarketplace Browsing

Actual size: http://cl.ly/4p82

Shopping Cart

Mojo's Checkout Process

Actual size: http://cl.ly/4ozR

Custom Charts

Mojo's How To Sell Chart

Actual size: http://cl.ly/4qKc

Making a Deposit / Profile Balance

Mojo's My Account Page

Actual size: http://cl.ly/4pcw

Blog

Mojo's Blog

Actual size: http://cl.ly/4p9U

Forum

Mojo's Forum

Actual size: http://cl.ly/4qHw

Don’t forget to poke n’ play around with the live site. Also, will be posting and highlighting a few more recently launched websites this week and next, including The Bernard Press Obox Theme and Pulse Enterprise App Website redesign. Keep your eyes open.

06:34

Mojo Themes Redesign – Interview with the designer Brian Hoff

headshotBrian Hoff runs a full time independent studio in Brooklyn, publishes The Design Cubicle, speaks at design conferences and has been featured in several industry publications. It’s fair to say that we at FUEL are big fans. Brian has been busy with Mojo Themes and their recent stellar re-design. I had a chance to pick Brian’s brain about the process:

CE: What was the overall goal of the re-design and how did you aim to make Mojo Themes stand out?

BH: There were three major tasks at hand when redesigning and rethinking the Mojo experience: Improved usability, simplified navigation / browsing experience /marketplace, and creating a better and more enjoyable experience that was lacking.
At first, we found ourselves moving far away from the brand that Mojo-Themes had already established. It took us a few weeks of swimming in the wrong direction in order to see where we needed to head to take the effort a touch further. With a fresh, lively coat of paint, beautified typography using webfonts (Proxima Nova), more engaging headlines and copy, dynamic and unique experiences from page to page, improved marketplace browsing, and rich interactions, including the Mojo Monster.

960_grid_12_col copy_2

CE: Did you start the process with wireframes, moodboards, and loads background research or after the initial talks did you have a pretty clear cut idea in your head on where you wanted to take the design?

BH: Yes. A good portion of any project effort I take on starts off with extremely rough wireframes on paper and progressing into a more detailed mockup of the layout which focuses on tone, hierarchy, typography and flow of the page – so basically no color or texture comes into play in the early stages.

The tones early on consisted of blacks, various shades of grey, and white, which allowed me to map out importance through tone and contrast. The hierarchy and “flow” through emerged through typographic means – size, style (italics, bolds), all-caps. Beyond being a lovely, lovely typeface, Proxima Nova also has a very large family of fonts which helped us further extend the typographic hierarchy a bit more than your average family.

The project started off great, but took a bit of a sideways turn for about 3 weeks until I finally was able to see the direction it needed to head in. I remember calling the Mojo fellas (Brady Nord and JR Farr) explaining to them that I was sorry I wasted 3 extra weeks of their time, but I knew the new vision was something they would equally be excited and proud of. That’s the funny thing about design: it often takes going in the wrong direction for weeks on end to finally find the right path.

Mojo-themes-color7

CE: What was the biggest challenge or hardest thing you had to work through in the design?

BH: The biggest challenge by far was not moving too far away from the “Mojo brand.” This was one of the main reasons we got lost for a few weeks. Although everyone was happy with the visual direction of the site, something didn’t feel quite “Mojo” about it.

There were periods of both myself and the guys over at Mojo saying, “well let’s change this to see if that works,” or “how about we change this color to see if that works better.” I typically find, especially if I’m saying things like this to myself, that it needs to go into an entirely new direction. Luckily, the guys behind the scenes at Mojo Themes were more than understanding and valued the process and much as the end result and were happy to extend the initial timeframe we set out for. Overall I find that great or even better ideas tend to transcend and evolve over rigorous thinking and re-thinking the original thoughts. This is why I tend to stay away from unrealistic deadlines.

CE: The details are what separate the men from the boys. The design has outstanding little details as well as beautiful typography. How much emphasis did you make sure you kept on these attributes?

BH: Thank you. Typography is certainly the backbone of great design and as a bit of a type nerd (and by bit, I mean that’s a bit of an understatement), I tend to focus on the typography from the very early stages of the design. When I have a mood in mind I tend to look for a typeface to match it first in addition to also making sure it fits the medium and function well.

The same goes for the tiny details. They tend to make the work unforgettable and experience more wonderful. Although it’s important to note that one shouldn’t go overboard with detail as well. Figuring out where to deploy the fine details and when to leave the unnecessary behind is key. Another important note in detail is on the development side (something I tend to worry about if I hand off files to other developers), but the people over at Mojo did an impeccable job. The PSD and the fully developed site overlay each other beautifully. Pixel perfection and precision.

CE: This design/implementation of this site comes at a time where there is a huge drive for being standards compliant & using responsible web-design practices. How conscious were you of making sure that this would be able to be carried out throughout the project?

BH: Knowing your medium and understanding the audience a bit plays a huge role in the responsibility of any web designer. All of my work focuses around simple, beautiful things that “work” for their intended use, while also pushing boundaries where possible. Just because something is “standard” or “responsible” doesn’t mean they can’t be approached from a different angle while still remaining “responsible.” The Mojo Themes website was designed around these same principles and processes.

CE: What are the highlights of the new design?

Here’s (pretty much) the full list of what we changed, added and improved upon:

  • Landing page: More emphasis on the themes and seller interaction
  • Dynamic page layouts: Each page has a unique layout to match the content
  • More compelling headlines and copyrighting improvements
  • More Monster: We gave the Mojo Monster (hover over him on the home page) more personality as a friendly guide and companion.
  • Strong Typography: More focus on readability, hierarchy and personality
  • A footer with charm and action. Useful links and a new way to sign up for newsletters.
  • Simplified, restructured and much deserved Forum spring cleansing.
  • More engaging and customizable blog to highlight the various authors that write for the blog
  • More comprehensive Check Out process
  • Fully redesigned Marketplace experience through re-thought category browsing and filtering
  • Powerful and engaging interactive elements
  • More streamlined sign in and sign up experience
  • Achieved an overall mood that kept the to Mojo’s playfulness, yet raised a new standard and polish for all Marketplace companies online to rise to the (nav)bar – this is where the home page’s headline came from. Overall we found that you can be both playful and sophisticated at the same time.

Screen shot 2011-04-17 at 10.38.41 PM

MOJO Themes aims to create an open marketplace for top rated designers/developers to shine in a world where design is going down hill quicker then we know and where someone can find, rate and buy quality themes & templates all in one trusted place.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Mojo Themes Redesign – Interview with the designer Brian Hoff

April 10 2011

10:00

April 07 2011

08:40

A Guide To Seamless Website Redesign

Advertisement in A Guide To Seamless Website Redesign
 in A Guide To Seamless Website Redesign  in A Guide To Seamless Website Redesign  in A Guide To Seamless Website Redesign

An inherent problem with owning a web site is that styles come and go on the internet fast as (or faster than) the real world. A web site can look out-of-date very fast if it is not being constantly maintained. Do you need to refine your online presence? A web site redesign may be just what the doctor ordered.


While it is possible to salvage your old web site, it may be better to keep what worked in the past and start from scratch. You can end up spending more time realigning content or revising old graphics without adding much more value to your web site.

Guide-to-seamless-website-redesign in A Guide To Seamless Website Redesign

This article will cover the different stages of a web site redesign including analysis, research, structure, interaction and atmosphere. While there are other bits a pieces of a redesign that may be left out, we’ve covered the most significant parts. If you take your time while building a web site, you can create something that will last a long time and reduce future costs for you and your clients. You can easily navigate this article using the table of contents found below:

  1. Analysis
  2. Research
  3. Structure
  4. Interaction
  5. Atmosphere
  6. Conclusion
  7. Further Resources

One benefit of the World Wide Web is that almost anyone can take on the role of a Web designer with the wide variety of tools available. One thing to keep in mind is that Web design is a skilled craft and the most important thing is to create a beautiful user-friendly site that will display all of your content. Not every skilled developer is just as skilled at design. Even if you do not have design talent, there is a good amount of planning you can do for your redesign. If you feel more comfortable leaving this to the experts, there are many Web design services available.

“If you only do what you know you can do, you never do very much.”
- Tom Krause

1. Analysis

When building a house you must always first make sure you have a good foundation. In order to determine the current faults in your web sites foundation you have to do a full analysis to make sure nothing is overlooked. Afterall, you wouldn’t want to overlook something twice, right? Once you have covered all of the items listed below you should have a better handle on what needs to be changed to reinforce the focus and goals of your web site.

Leads/Sales. If you are experiencing trouble with your web site such as lack of improvement in your leads/sales, it may be your that site needs an improvement or even a redesign.

Firstly, your web site always needs to be fresh, that means you must frequently update your site with content, images or animation so that the viewer does not have a routine impression. If your main web site has no need to be updated, you may consider adding a blog or news ticket to add fresh variety. Visit web sites that offer the similar services and find out if there are any flaws and missing aspects that you could fill, related to your personal site.

Online Expansion. If your web site is growing and expanding, you need to make sure that it still satisfies your objective. By adding new programs and services to your web site you should consider organizing your information. Adding some audio and video information will bring more authenticity to the site and your business will expand even more without a major redesign. In addition, if you’re changing the focus of your site or the products or services you sell, you’ll want to redesign.

Browser Compatibility. It is advisable to check if your web site is compatible with all modern web browsers. If you happen to browse the web, you can see a lot of web sites that are not compatible to different browsers as each browser reads the web in it’s own way. This is a very important matter because you risk losing a good amount of clients. There are many bells and whistles that can be added to a web site but you have to make sure you are not narrowing your audience by creating something they cannot properly view. Adobe Browserlabs provides Web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. When using that service you must keep in mind that any interactive testing will still have to be completed manually.

Browser-testing in A Guide To Seamless Website Redesign

Web sites display differently depending on the operating system and web browser. The example above shows Firefox 3.0 OS X (left) and Safari 3.0 OS X (right) in Adobe Browserlabs.

Remove Content Clutter. Take a look at your web site and search for unnecessary details that could bore the client. Very often we see the description of some products that may seem appealing at first sight but in the end they lack important information that may persuade us to buy it.

Redesigning your web site is something that you should do quite often in order to make it effective for a long period of time. Updating, always bringing something new to audience, using the latest technology instead of hard-coding, brings you the company you’ve always dreamt of. As Leonardo da Vinci said best “Simplicity is the ultimate sophistication”.

Outdated. If you have had a web site for a few years with minimal content changes and it has not done much for your online presence, you may require a content refresh, some simple search engine optimization (SEO) or a complete redesign. It would be best to start by evaluating your company objectives and how you hope to use your web site to accomplish them. Once you have figured that out you can determine the best route.

User Friendly Interface. When people visit your web site will they be able to find what they’re looking for in less than three clicks? If you answered no to this question your site may not be very user friendly. The purpose of a web site is to find the content your are looking for as fast as possible. The more roadblocks you remove, the better the user experience will be.

Professional Look. While content is king in the web world, majority of modern web users put their trust in your company based on your web sites look. If you can connect to your demographic and display strong branding you are steps ahead of many companies online today.

Online-bank-comparrison in A Guide To Seamless Website Redesign

Based on looks alone, who would you trust your money with? When it comes to key business decisions especially those revolving around money, a professional look can instill trust.

Redesign

After reading the above information if you feel that any of the issues that currently plague your web site are holding you back, a redesign or realignment may help your company move forward. This is your chance to start over! Take this opportunity to update your look, improve your layout, update your navigation and polish your user experience. If you are ready to try something different you can increase brand recognition, traffic and leads.

I will warn you, it is up to you to determine your business needs and apply them based on the recommended instructions below. There are two great articles titled Good Designers Redesign, Great Designers Realign and Redesigning Your Own Site that will give you more in-depth information if you are going to redesign your personal site or choose to realign. This is not a step-by-step guarantee to make your company or clients millions through a redesign. This is however, a great article to help keep you focused and on track with your redesign.

2. Research

Think of this part from the user standpoint. How do you want your visitors to feel when they see your web site? It is good to consider your web site goals so you can prepare for your visitors reaction to the usability of your design. Do you want them to be amazed, informed or curious? Visitor reactions are very important to the success of your web site. It does not matter if your budget is high or low, the fact still remains that research is a key part of building a web site. It is never good to build your car while you drive it. Once you know your likes and dislikes you will have a better handle on the direction of your project. Some ways to understand interaction would be usering a service such as crazyegg that will help you see heatmaps and where users have clicked. This will help you identify if they are looking at and clicking everything you want them to.

  • Successful Web Site Goals
    Before you begin planning out your web site, make sure you have a good idea of what success will look like. Your goals for your web site can lead to very different planning, design, and promotion strategies.
  • CSS Gallery List
    This is a great resources to find all of the web galleries out there. You can browse through the thousands of listings or submit your own web site for free.
  • 25 Incredibly Useful Usability Cheat Sheets & Checklists
    You can find cheat sheets and checklists for forms, blogs and more below, all listed in alphabetical order.

Web Site Goals

The online world is a never ending competition for traffic, conversion and ROI. If you don’t know what your goals are, you cannot create a successful and engaging web site design. What is your call to action? What do you want your visitors to do? While there is no single answer because every business is different, it is good to have an idea of your needs before anything is built.

It would be a good first step to write all of your goals down and then begin to prioritize intro three groups: primary, secondary and support. Primary goals are essential tothe success of your business and they should receive the most attention during the redesign process. Secondary goals may not make or break your business but they are still important to growing your business. They can be considered during this process or taken care of as a second phase of the redesign. Support goals are usually an after though and have never been a priority. You should consider leaving these goals out of the process to help you focus on the more important issues. Too many goals will cloud and confuse the process while dragging out your timelines.

Web-site-feature in A Guide To Seamless Website Redesign

The redesign of TaylorDigital.com was focused on their current clients. They brought the client login, support and blog to the spotlight.

Visitor Reaction

The more attractive your web site is, the better off you will be. In past reports it was said the average attention span for a web user 8 seconds. A recent study conducted by Akamai Technologies reported that number has dropped to 4 seconds. Web users have a short attention span due to the sheer number of accessible content available. If you make your user think too hard to find what they are looking for, that user could potentially never return.

You want to make sure you look around the web and find some new and interesting web sites with friendly interfaces (navigation, look and feel). One great way to find inspiration is to look at Creamy CSS, Best Web Gallery or other web galleries found in the resource section. If you create an appealing design there is a greater chance that users will be more receptive to your message or buy your product/service.

Web-design-inspiration in A Guide To Seamless Website Redesign

With hundreds of web sites to choose from organized by industry and popularity you will have an unlimited supply of references at your finger tips.

Usability

Avoid focusing on the abundance of people on the web as time would be best used focusing on your audience and their needs. There are many different types of people on the internet: children, young adults, adults, seniors, blind users, users with slow internet connections, web gurus, users who are not technically savvy etc. While catering to the needs of your audience can be partially achieved by exceptional markup, design plays a large part as well. There is a great article on the Usability Effect or that can help you find specific usability guidelines for nearly any need. Keep your demographic of users in mind as you move onto the interaction of your site when creation navigation, forms and adding media.

3. Structure

After your research has been completed the next step is to start planning the layout of your web site. Since you are redesigning your web site you probably have an existing structure to work off of. It is always good to look over your information architecture to see what pages have been successful in the past and which have not. You will want to get rid of unnecessary pages, making your web site easier to navigate. No one wants to visit a web site that contains pages with unnecessary or repetitive content. When planning for your new web site structure it is best to start with a sitemap and then follow-up with a wireframe. A complicated or unnecessary structure is a key pitfall when creating web site.

Sitemap

No to be confused with a sitemap page, a planning sitemap is important to keep organized. A web site’s structure should come natural and flow in a way that the user does not have to guess where content should be. Don’t focus too much on the technical part of the site and how it runs. Instead, focus more on what is best for your visitors. A sitemap is drawing out every page on your web site structure in map format. WriteMaps or OmniGraffle are great applications for putting together your sitemap. In this stage you should be sure to note all of the interaction and navigation between pages.

Web-Site-Sitemap in A Guide To Seamless Website Redesign

It doesn’t matter if you sketch a sitemap by hand or create one on a computer, it is always a good idea to create when coming up with your web site structure. The sitemap above was created in WriteMaps and then brought into Adobe Photoshop for final touch-ups.

One thing to keep in mind is that people who surf the web are ruthless when it comes to finding content. If they can find what they need fast they will stay, if they cannot they go back where they came from and find a comparable web site. A sitemap is very important because if it is well structured, your users can find what they need quickly.

Wireframe

While sitemaps deal with the what pages are within your web site, wireframes dig deeper into the content for each page. Think of wireframes as a web page blueprint, you need to have a solid foundation before you start the construction of a house. With wireframes you can fine-tune where you want to place content. This is where you figure out which content is most important and how it will fit with other content. In most cases, companies are forced to complete a redesign because the previous layout (wireframe) no longer makes sense.

In this stage you do not have to worry about specific design elements as much as you need to consider how prominent each piece of content will be. There are key elements that must be included in every web site design and without them you could create a negative brand impression. Make sure your layout has a consistent look and feel as to not confuse the user. Every page needs to be clearly labeled and identified in the navigation so visitors will always know where they are on your site. Once you have decided where elements will be placed you can then focus on how they will interact.

Web-Site-Wireframes in A Guide To Seamless Website Redesign

There are many ways to make a wireframe to help plan your web site. You can sketch them by hand or use Adobe Illustrator as shown in the image above. The darkened black elements are located on every page while the lighter elements change depending on the page.

Designing your new web site based on a grid system can be very helpful. The main idea behind grid systems is to maintain a visual and structural balance. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

4. Interaction

It can be said that every element on a web site interacts with another. A web site in itself is an interactive experience. It can be as slight as a link to another web page, pushing a button, submitting a form, or opening a modal window to enter login details. The most common forms of interaction are navigation, and forms. We will discuss the multiple ways these elements can interact with your visitors to better help you determine your web sites functionality.

  • 40+ Helpful Resources On User Interface Design Patterns
    In this article you see the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns. Use these recommended sources to gain knowledge about a particular UI problem or to gain inspiration and insight on best practices, techniques, and examples of exemplary UI designs.
  • Navigation Menus: Trends and Examples
    This article presents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they’ve been taken.
  • Beautiful Form Design
    Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.
  • Form Design is Good Form
    Forms facilitate users to make purchases, register into communities, exchange information with organizations, etc. These functions are the basic elements of a majority of web sites – money, participation, information.
  • Web Form Design: Modern Solutions and Creative Ideas
    In this article you will find over 40 examples of web forms as well as modern solutions and creative ideas related to web form design. Some of the examples are Flash-based; however, in most cases you can easily create similar designs with pure CSS and (X)HTML.

Navigation

It is important to keep to common guidelines when creation your navigation. You want to make sure you do not confuse your users with a complicated or confusing navigation. Keeping your navigation consistent and making sure it appears on every page will help your users navigate through your content easier. With the evolution of the internet and Web design in general, there are many navigation types & styles. When building your navigation, you should reply on you sitemap that we spoke of previously in this article.

Common Navigation Guidelines

When designing your navigation there are several very common elements that can be used as a base for your navigation design. When your navigation is easily found and digested by your users, the overall site experience benefits.

  1. It is important that you keep your user in-mind when you are creating your navigation. You should make sure that the titles of your navigation links are short and descriptive. Users should understand very quickly where to find content they are looking for.
  2. To help prevent overcrowding keep your main navigation under 5 links. Keep your most important information in the primary navigation and place other content into your secondary navigation.
  3. Make your primary navigation recognizable and bold within your site design. If a user cannot easily spot the navigation you will leave them confused and disoriented.
  4. In the case of users having their graphics/javascript turned off or enabling the use of screen readers, a text alternative available. The use of a text menu at the bottom of your site and alt tags will help these visitors navigate.
  5. Users should always be able to tell what page they are currently on. This can be achieved through breadcrumb navigation or revers the contrast of a navigation element to help it stand out.

Navigation Types

Depending on the amount of content on your web site, some of these types of navigation may not be necessary. When creating a content heavy web site will result in the need for multiple levels of navigation to help a user find content.

Primary navigation is present on every page of a web site and will allow users to go to any of the main sections within a site. These controls should always give users access to top levels of the site. You want this area to contain the most important topics that all other information will fall under (i.e. Home, About, Products/Services and Contact). While there may be other pages on a site, the primary navigation will lead users to the content within.

Apple-primary-navigation in A Guide To Seamless Website Redesign

Apple organizes it’s navigation leading with it’s store then following with product information and support.

Redfenix-primary-navigation in A Guide To Seamless Website Redesign

RedFenix has a very simple menu and includes added direction with a secondary navigation highlighted with images.

Secondary navigation is may not always be present on every page of a web site. These pages should be supplement the top level navigation (i.e. features, gallery, how to, tech specs, buy). While these pages contain important information that you would like to have on every page, they do not need they same visual significance.

Manchester-secondary-navigation in A Guide To Seamless Website Redesign

Manchester City has a lot of club information that they need to present and put the secondary navigation on the sidebar.

Cbs-secondary-navigation in A Guide To Seamless Website Redesign

CBS uses many visual elements of navigation but clearly displays their secondary navigation below their feature photo.

Local navigation is important when you have a lot of lot of content within a particular page making it long (massive amounts of page scrolling require). It can be extremely helpful when a user wants to jump to a particular part of the page.

Local-navigation in A Guide To Seamless Website Redesign

The webdirections event had a series of speakers on a single page listing bio and class information. This caused the page to be very long, requiring local navigation.

Breadcrumb navigation is used to show your path from the homepage to your current destination. This is helpful because even if you landed directly on your destination page, you can easily take one step back by using the breadcrumb. This is commonly used for resources and eCommerce web sites that have multiple items spread across many different categories.

Apple-breadcrumb-navigation in A Guide To Seamless Website Redesign

Apple shows the steps that were taken to get to this page. It spotlights the user has went to the shop, chosen the Mac Pro and started configuration for purchase.

Newegg-breadcrumb-navigation in A Guide To Seamless Website Redesign

Newegg spotlights which department and manufacturer sections this product is located at.

Google-breadcrumb-navigation in A Guide To Seamless Website Redesign

Google lets you know what category and subcategories the article the user is reading are located.

Navigation Styles

There are many different navigation styles available to help you achieve a branded look without compromises. While some styles can break the rules a bit, elements are expected to behave in certain ways with no exceptions. Including mouse over and hover effects will increase your user interaction and satisfaction greatly if done correctly.

Top navigation is by far the most common type of web site navigation. Placing your navigation in the most exposed part of your web site helps keep it easily identifiable and removed from heavy content. Giving your navigation it’s own special place near the top means you will have a wide area of space available for optional large text.

Awordfromhisword-top-navigation in A Guide To Seamless Website Redesign

A Word From His Word has large text with a red mouse over effect accompanied by a flame icon.

Housingworks-top-navigation in A Guide To Seamless Website Redesign

Housing Works uses a utilizes transparency over a large homepage image and white capitalized text for high contrast and exposure.

Sohtanaka-top-navigation in A Guide To Seamless Website Redesign

Soh incorporates the use of a high contrast light blue effect to help identify the page you are on as well as which item you mouse over

List navigation provides a large amount of flexibility for content. Once the primary and secondary are visually separated you can have a large amount of navigation items listed. With certain styles you can expose the secondary navigation on click as like the GoMedia web site (below), making your initial view very clean and tidy.

Gomedia-list-navigation in A Guide To Seamless Website Redesign

GoMedia only shows their primary navigation on load (i.e. about us, work, contact) and the secondary navigation on click. They include less significant items just below their menu without spotlighting them (i.e. arsenal, blog, prooflab)

Marmaladeontoast-list-navigation in A Guide To Seamless Website Redesign

Marmalade has a left navigation highlights the selected item and will highlight any item you mouse over.

Drop-down menus help you keep your layout clean and easy to navigate but grouping all of your primary and secondary navigation elements together. Drop down menus are a great way of showing content without cluttering up a page with choices. Choices are hidden until you need to see them, by hovering or clicking on a link. Read this article on drop-down menus best practices for more information.

Threadless-list-navigation in A Guide To Seamless Website Redesign

Threadless has a a clean drop down menu style that incorporates an arrow and color changes to identify elements and actions.

Elegantthemes-dropdown-navigation in A Guide To Seamless Website Redesign

Elegant Themes uses a pure white drop down over their heavily colored site to provide more contrast for their menu items.

Mediatemple-dropdown-menu in A Guide To Seamless Website Redesign

Media Temple has added the use of icons into their drop down menu to help identify between their various product choices.

Tab navigation is more of a stylistic choice, and many act just like any other top navigation. The benefit here is in the psychological effect tabs have on users (because they’re more reminiscent of navigation in the real world). If done correctly, well designed tab navigation will help create a clean look.

Iconbakery-tabbed-navigation in A Guide To Seamless Website Redesign

Icon Bakery seems to do slight loading when you lick each tab but their web site looks very clean and you are able to switch pages easily.

Freeagentcentral-tabbed-navigation in A Guide To Seamless Website Redesign

Free Agent has nearly seamless transitions when loading between tabs making their user experience excellent. Matching high contrast colors with the content body helps make it very obvious which tab is selected.

Inkd-tabbed-navigation in A Guide To Seamless Website Redesign

Inkd has a very friendly user interface with fast loading pages. This web site has a very pleasing color scheme, presenting a soft, clean feeling.

Forms

Forms are put in front of visitors in many different ways. A user may come across a search form, newsletter sign-up, contact form, login form or registration form. As you can imagine there are many different elements that must be considered to establish a memorable user experience. Web forms are often used to achieve goals such as collecting user information or accessing information you currently have. A successful form will be clear, concise and to-the-point. This will help your user send the information they need, without becoming confused or bored. Form usability is a very complex subject that is beyond the scope of this article. The articles below should give you more information on the subject.

Search Box

If your web site doesn’t currently have a search box and it’s content heavy, add one. Not having this feature on a web site is a key user complaint. If a visitor needs quick access to information, you must meet their needs. On large content rich sites, the search box can be a key lifeline in stopping user frustration and maintaining return visitors. Three things that control all aspects of search are the position, wording and behavior. If you pay attention to those key aspects, you are closer to making your sites content available to new and repeat visitors.

Search Position

When putting together a web site design, some people consider where the search box will be located on the fly. Others pay attention to usability statistics and place their search box in the most common spot. By considering the F-Shaped Reading Pattern you understand why search boxes are commonly located in the top-left or top-right corner and users are trained to find it in this location. When the search box is moved it may take longer for users to find, especially when surrounded by graphics. Placing the search box on every page in a highly visible location and never moved it will insure that all users can fit easily.

Search-position-example in A Guide To Seamless Website Redesign

The Ferrari web site places their search box in the top-right corner of their site and the location never changes no matter which page is being viewed.

Search Wording

What do you put inside the search box? What does the button say? These are very common questions to ask, because not everyone does the same thing when it comes to search box wording. More technical users can navigate easily with an input field and an icon for a button. To develop for the average web user, we recommend that your button text says either “Search” or “Go” instead of just an icon button. You can either leave the search input field blank or add some friendly text that says “enter keyword”,”search articles”, “search site” or even “custom search” and it will be made clear what users are doing with your search box.

Good-search-wording-example in A Guide To Seamless Website Redesign

InCase has a typical search box in the top-right corner of their web site with text within the input field and a button that says “go”.

Bad-search-wording-example in A Guide To Seamless Website Redesign

Design Disease has a non-typical search box located a little further down the page from the top-right corner and an icon for a button although they do a good job of helping the search box stand out with a graphic container that matches their theme.

Search Behavior

You may have noticed that Google recently released a nice feature that helps users formulate queries when they are not sure what to look for. If you have ever been at a loss for words you realize how valuable these auto suggestions can be to users. This is one of many ways you can improve search form behavior.

We find that by providing suggestions up front, we can help people search more efficiently and conveniently. – Google Blog

Google-suggests-example in A Guide To Seamless Website Redesign

Google Suggests is a feature recently implemented by Google to help users be more specific when searching phrases and even give additional ideas on what to search for.

Layout

Once you understand your sites visitors you can make sure your search acts how they would expect it to. If you are starting from scratch there are a few basic items that users expect with search. The searched words should pull up a new page with query results. This page should contain a headline with the words being searched and the results returned. This makes sure that the user knows exactly what they searched for and how many options they need to consider.

Search-layout-example in A Guide To Seamless Website Redesign

Digital Photography School does a great job with their search layout. There is no confusion on what has been searched, how many results are available.

Function

The search feature should be smart enough to recognize common misspellings and let the user know what it thinks they meant to type. This helps the user identify a mistake and quickly search for the correct word. The search feature should also display exact matches for the phrase being searched first, followed by anything else that comes close. Other useful functions include highlighting the phrase searched within the results and supplying options when zero results are found.

Search-highlight-example in A Guide To Seamless Website Redesign

JQuery.info shows how you can use JQuery to highlight text on a search results page. This is also common practice for Google when your search result is a PDF.

5. Atmosphere

Now that all of the research and planning is done, you can get your fingers dirty with the site design. This is the part that will require a good amount of knowledge of color theory, design and composition. If you are not a designer it is strongly recommended you work with someone who can help turn all of your planning and hard work into a beautiful and attractive web site. The atmosphere of your web site will play a large role in how all of your hard work is perceived. It should reflect the main purpose and goals of your web site.

Layout & composition, color, imagery, and typography are aesthetic elements that enhance your web sites look and feel. These elements with communicate ideas and feelings to you potential customers.

  • Grid-Based Design: Six Creative Column Techniques
    Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.
  • Designing With Grid-Based Approach
    Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found – with precise descriptions of what the articles are about.
  • Color Theory Wiki
    A detailed and sometimes historical look at color theory with references for further reading.
  • Brown University Introduction to Color Theory
    Although the site looks terrible and some references are outdated, this is an example of color theory from a credible university course.
  • Liquidsoft’s Color Theory Tutorial
    Color can be more complicated than it needs to be, if you need a brief guide to get your feet we, this article is a good start.
  • Typography Wiki
    A detailed history and explanation of typography as a whole.
  • Typography Essentials – A Getting Started Guide
    Learn more about typography and why it is so important to designers. Typography is part of everyday life, it is all around us.
  • 50 Useful Design Tools For Beautiful Web Typography
    This article covers typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography.
  • A Lesson on Typography Video
    From the Vancouver Film School.An interesting look at typography in 1:47 minutes.
  • Typographic Contrast and Flow
    As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text.
  • Revised Font Stacks
    Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.
  • Web Typography Demo
    Many web pages use images to display text in fonts that are not installed on every platform. However, you can apply a few CSS properties directly to the text elements in your web page to create stunning graphics, navigation menu items, buttons, and other user interface elements.

Layout & Composition

Instead of going into a tangent about Web design and color theory, everyone would be better served by focusing on the principles of layout and composition and then reading The Principles of Beautiful Web Design by Jason Beaird for a more in-depth sampling. It is key to maintain balance and prepare for multiple monitor sizes with fixed, fluid or elastic layouts depending on the need. You can design with grid-based frameworks or use your own methods.

Visual Balance

Maintaining balance whether you’re using a symmetrical or asymmetrical design will create a more visually pleasing web site and increase the the opportunity to capture your visitors attention. The blog Subtraction shown below uses asymmetry or off-center/mismatched elements to achieve a balanced design. By counteracting the weight of the black dog with a gray “X” to the right using a keen eye, the site maintains balance.

Subtraction-blog-asymmetry in A Guide To Seamless Website Redesign

This blog uses well balanced asymmetry in the header graphic design.

Most designers stick to symmetry keeping with matching elements and use such methods as the three buckets method or rule of thirds by maintaining a golden ratio. The three buckets method is that magical combination of threes that pull together as a single element visually yet keep enough separation to evenly distribute content across the page. Using the rule of thirds you can fill two-thirds of your layout and fill the last third with white space. By balancing the page into thirds you can create more energy and interest in the site composition.

Site-symmetry in A Guide To Seamless Website Redesign

This uses the three bucket method in it’s feature rotator with the spotlighted numbers and again in the lower sub feature elements on it’s homepage.

Be Aware of the Viewport

Because web site visitors vary in many ways including their display resolution, we have to take that into account with every site design. You don’t want just design for the smallest screen size but the average web user instead. As of January 2009 the most common display resolution is higher than 1024×768 with 57% of users and 1024×768 coming in a sure second with 36% users. Keeping that information in mind and subtracting the space taken up by the browser interface you have varying 1000×650 viewport where the site will be displayed. You can take control of the viewport flexibility with fixed, fluid or elastic layouts. With these different types of layouts you can make sure the average user sees your site how you intended without leaving anyone else out and possibly giving them more than they bargained for.

Fixed layouts have predetermined dimensions (usually pixels) that define the width of the site. If the fixed layout width is 960 pixels, then no matter how wide the users browser is the site will always be that width and no larger for the sites visitors. With this kind of layout you can insure that the main content area remains the same size and will maintain image positioning within a text area.

Fixed-layout-example in A Guide To Seamless Website Redesign

The CodeIgniter web site uses a fixed width layout of 927 pixels and will not change no matter the users display resolution. The site uses a background tile gradient image to accommodate larger viewport’s.

Fluid or liquid layouts have dimensions that are relative to the size of the users viewport as defined by preset percentages. If the fluid percentage is 90%, then no matter how wide the users browser is the site will always be 90% of the total width and no larger for the sites visitors. With this kind of layout you can insure that the main content area will grow to fill the available area.

Liquid-layout-example in A Guide To Seamless Website Redesign

The Stuff and Nonsense web site uses a fluid layout that makes room for the content below when using viewed by a larger display resolution.

Elastic layouts are a marriage between fixed and fluid layouts. When this is implemented a sites content will shrink or grow depending on the users preference. The entire layout stays proportional to the text size as it is increased.

Elastic-layout-example in A Guide To Seamless Website Redesign

The Clearleft web site uses an elastic layout adjusts the text size for smaller display resolutions. You can really tell by the increased distance between the logo and navigation as well as the different line breaks in the opening paragraphs.

Mood

Before any color, art, images typography can be added you have to first consider the mood that the web site will convey. The web site should give visitors a feel for the style, message, goals and content of the web site on a subconscious level. Mood is something that is felt when you see it, not through any specific combination of things.

A mood board helps establish the branding, design components, typography, imagery, and color palettes that will be incorporated in the design. Much the way an interior designer will initially put together a swatch panel showing the fabrics and colors that will be used in designing a room, the mood board establishes the aesthetic direction of the site up front without negatively impacting the flow or structure of the site. – 404 Creative

Dark-mood-website in A Guide To Seamless Website Redesign

The Hydra Games web site has a mythological, medieval atmosphere in line with the companies logo and games they create. This is due to the black and red color use mixed with the textured background image and other graphics on the site.

Light-mood-website in A Guide To Seamless Website Redesign

In contrast, the Fall for Tennessee web site still maintains an atmosphere but in a different way. Using nature textures mixed with specific colors and images that evoke the feeling of fall.

Color

Color use is a very strong influencer in the overall appearance of your web site. Color theory is used to convey many feelings and have many meanings. Choosing the right colors for your web site can be one of the most difficult tasks at hand. You can’t just line up a list of colors on a dart board and use the first 4-6 you hit. Some colors play well with others and some do not. Multiple articles could be written about color theory alone, for that reason I recommend using the articles listed below.

Get Inspired

Color is used to bring out predetermined branding or create branding guidelines. Every company has a specific demographic they are trying to reach out and speak to. Everyone enjoys looking at something beautiful don’t they? After all, beautiful is relative to a persons point of view. Choose your colors wisely by using a color schemer, keeping up with web site trends, creating your own trends and looking for offline inspiration.

Inspiration-bw-photography in A Guide To Seamless Website RedesignInspiration-design in A Guide To Seamless Website RedesignInspiration-products in A Guide To Seamless Website RedesignInspiration-web-mobile in A Guide To Seamless Website RedesignInspiration-advertisements in A Guide To Seamless Website Redesign

Use the examples above to find your inspiration in photography, design, product, Web and advertising.

Imagery

Using imagery will add value to your site and help speak to your audience. It is important to use imagery that directly supports the message and goals of the site. You can use few graphics, or base your site around them, just be sure that whichever method you choose to utilize imagery that you do not cloud the sites focus or confuse users. Do your best to guide the users eye and be cautious of clutter!

Art-website-example in A Guide To Seamless Website Redesign

Outline2Design uses a combination between photography, icons and graphics. You can see the great use of visual imagery balanced with warm colors and soft tones.

Artwork

A great web site is not required to have a strong message. In fact, you can have a fairly minimal site design and do just fine. That’s not to say that adding art cannot help. You may not be an illustrator or photographer, but that doesn’t mean you can’t find stock resources to help you add expression to your web site. By adding the right combination of art and content that is right for your site, you can capture your visitors to help sell services, products or even convert depending on your sites goals.

Photography

I know that it’s cliche but they say “a picture is worth a thousand words“, just make sure it’s a thousand words you want your site visitors to see. Better yet, make sure those thousand words will help your users become aware of the sites goals. Photography can be used to establish a connection between the web site and its visitors. Personal connections are important, especially when your sites main goal involves offline activities.

Photography-example in A Guide To Seamless Website Redesign

Livestrong does an exceptional job of using photography to depict a happy, healthy lifestyle while challenging you to change the way you live with graphic reinforcement. Skiing anyone?

When using photography on your web site you can use stock photography agencies, free stock photography or take your own. In any case, make sure that the photo quality is high. You may have to tweak the levels & curves or crop creatively. Remember that adding a photo with poor quality to your web site can give a bad first impression to visitors. No one would visit your business if you left your trash at the front door right?

Illustration

Many companies have embraced the use of illustration on their web sites. This includes anything from line sketches to detailed cities. Adding illustrations can guarantee a certain uniqueness that can set you apart from other web sites. Illustration can be used in the background, header, footer, menu and anywhere else you see fit. However you decide to use illustration remember to maintain your site’s mood.

Basic-illustration-example in A Guide To Seamless Website Redesign

The Great Bearded Reef uses basic illustration for the base of its site. The imagery is very playful and uses bright colors for a happy mood.

Detailed-illustration-example in A Guide To Seamless Website Redesign

Platin uses detailed illustration (3D) in combination with motion to get the attention of its visitors.

Iconography

Icons can be a gift and a curse with helping to guide your visitors. I well designed and well placed icon will work as a visual shorthand for visitors that can help understand content without reading it. Think of street signs and how they are used in society. We have become accustomed to associating certain pictures with things and activities. When visiting a foreign country you can do a decent job of guiding yourself with signs along because symbols and icons have become a universal language. A good icon should be understood immediately. If you plan to use icons you can create your own or you can use a stock icons.

Iconography-web-example in A Guide To Seamless Website Redesign

EngineHosting makes use of icons in the home page feature to help guide users to other pages of their site while leaving room for the different plans below.

Typography

Text is synonymous with design, so it’s no surprise that it plays a large role in Web design. When thinking about typography there are many things to be considered. No matter how typography is used, whether in print, television or on the web – designers are forced to adapt to each specific medium.

Optimizing typography is optimizing readability, accessibility, usability, overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? – Information Architects

Typography-example in A Guide To Seamless Website Redesign

.Net magazine uses Helvetica and Arial sans-serif fonts to give their web site a smooth flowing feel.

Today on the web typography is easier to accomplish than years past from a technical perspective. From a design perspective, designing for computer users brings it’s own unique set of challenges. The art of type is a very delicate subject because so much is involved such as web safe fonts, replacement techniques, font embedding and CSS3 advances. We will focus on typography basics because typography is such a deep subject. If you would like to lean more you can use the resources below.

Web Safe Fonts

There are a number of fonts that are considered safe to use on the web. These web safe fonts are common across many different browsers and operating systems. an example of some fonts would be Georgia, Times New Roman, Arial, Verdana and Impact. There are 20+ web safe fonts available out of the many fonts available to designers today. Fonts render differently depending on the browser and operating system. You can see examples of how fonts render to help you choose the right font for your visitors.

Taking these restrictions into account, you can still find many ways to be creative when creating a web site. When you specify which fonts you want to display in your cascading styles sheet by using font stacks. This will allow you to add your preferred set of font names, in order to determine how your text will display. We are able to utilize fonts that are pre-packaged with common software so the users that have them available will have an enhanced typography experience. There three great websites Better CSS Font Stacks, AwayBack, and Guide to Font Stacks that will show you how to utilize stacks for optimal impact.

Default font stacks:

  • Arial, Helvetica, sans-serif
  • Courier New, Courier, monospace
  • Times New Roman, Times, serif
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif

Font-stack-example in A Guide To Seamless Website Redesign

I love typography uses a font stack of Lucida Grande”, Geneva, Helvetica, sans-serif (used for some of the headings and meta information).

Replacement Techniques

A popular way to render fonts on a web site even if the visitor doesn’t have it on their computer is to embed the text into an image. A common way to do this is with Revised Image Replacement where the text still remains in the HTML even when replaced with an image. This is done to keep the web page access able to screen readers and text only modern web browsers. You are able to keep the SEO benefit of having an H1 tag with this technique and you can save time by writing your markup and then styling items instead of having to wedge items into your design. View the CSS tricks test page from their article Nine Techniques for CSS Image Replacement.

Another approach to image replacement is using Scalable Inman Flash Replacement (sIFR) where text is substituted with a flash file containing a font that the viewer may not have. This method is less accessible to screen readers and text only modern web browsers. You can use this for any font type, it is cross-browser compatible and you don’t run into any SEO issues because the original XHTML document remains unchanged. Learn more about sIFR 2.0 and how it can be used effectively.

Font Embedding

Being able to embed fonts is an alternative to replacement techniques. You can embed font files on your site and host them online so that even is a user does not have a particular font installed they can still view text as you intended. Browsers such as Safari 3.1+, Opera 10+, Firefox 3.5+, Chrome 3+, Netscape 4+ and Internet Explorer 4+ support this method. Font embedding comes with its own challenges, especially in Internet Explorer because that browser type uses a proprietary file format Embedded Open Type (EOT). Creating an EOT is not complicated, but rather requires a few extra steps. You can embed fonts using the @font-face rule as shown in the example below:

@font-face {
font-family: Futura;
src: url(‘Futura.otf’);
}

@font-face {
font-family: Futura;
font-weight: bold;
src: url(‘Futura-Bold.otf’);
}

Then call it using font-family:

h3 { font-family: Futura, sans-serif; }

CSS3 Advances

With the speed of technology advances increasing, the web was introduced to CSS3 with new features like drop shadows, font embedding and styling techniques. While not yet compatible with the entire web user base, these features can be utilized in newer browsers and degrade gracefully in older versions. The @font-face rule we previously discussed in itself has been made more powerful with the with CSS3 as seen in the Essential Guide to @font-face. Many web developers had begun to experiment with new fonts as soon as the ability was made widely available. Utilizing fonts instead of graphics is beneficial because fonts are dynamic in content and size whereas graphics only work well when made smaller and tend to create a heavier page load if overused.

Font-text-shadow-example in A Guide To Seamless Website Redesign

Simurai uses a text shadow and blur radius to create a wonderful tilt-shift effect with CSS3

6. Conclusion

In conclusion, web styles on the internet come and go at a light speed and it pays to be innovative verses conventional. It is your responsibility to yourself and as a designer to deliver a product that accomplishes your clients goals and ill not need to be replaced every year. Think future-proof. Use this article as a guide but not a blueprint. There is no one way to create a beautiful aesthetically pleasing web site. Use the resources and examples from within this web site and your redesign process will go along much more smooth than trying to figure everything out on your own.

In this article you read about the different stages of a web site redesign including analysis, research, structure, interaction and atmosphere. While there are other bits a pieces of a redesign that may be left out, we are only covering the most significant parts. If you take you time when building a web site, you can create something that will last a long time and reduce future costs for you and your clients.

“You might make a lot of money, but it’s very hard to get out from under that rug. The more you can reinvent yourself, the better…”
- Peter Berg

Prepare for the Future

Sometime in the near future you will look back on your site and decide that it is in need of a redesign or realignment yet again. Planning and preparing for future changes during your current redesign is essential. Lay a simple and clean path to follow by using valid XHTML 1.0 Strict (not transitional) and organizing your code semantically. These two very simple steps with make it easy to go into your site to make updates and help prevent redesigning from scratch in the future. By looking into new CSS3 and HTML5 techniques you can get ahead of the curve with experiments.

If you are using a content management system (CMS) for your web site, you are already one step ahead of the game because your content is separated from your design. With the easy-to-use templating systems and content rollback features you can swap out designs and style sheets without ever affecting content structure on your site. This not only saves time, but keeps your code organized without any extra effort.

7. Further Resources

Below you can find more detailed reading and resources not included in the above text.

  • Questions to Ask Yourself During a Redesign
    This web site redesign guide is really for anyone involved with web sites. It will help you get the deep meaning of the site as well as more practical issues. This guide will help you redesign a web site according to your audience’s needs and changing perceptions
  • Redesign vs. Realign
    Understanding the difference between redesigning and realigning can result in happier clients who are better reaching their website goals.There are times when redesigns are appropriate, and there are other times when realignments are appropriate. It all depends on how the client’s current site is working for them, and what their goals are.
  • Redesigning Your Own Site
    Redesigning a freelance website is an exercise in masochism. There are no colleagues or an umbrella corporation to share the pain: It’s just you.

Also consider our previous articles:

  • Useful Glossaries For Web Designers and Developers
    These glossaries are also especially useful for those of you who are just getting started in the online business world. By understanding that basics of the core materials that make up whatever it is you are getting into, you will be able to have a better understanding of what’s going on in your industry, as well as be able to learn faster.
  • Redesign: When To Relaunch The Site and Best Practices
    This article covers a brief overview on how to plan, execute and how to find the perfect timing for a redesign.

(ik)

July 26 2010

10:00

July 14 2010

15:49

A case study of Zappos.com redesign

A great overview of the (more) recently redesigned Zappos.com by the always talented group at Happy Cog. It’s always great seeing other process and reading about insights of the whys of a redesign and where focus was placed when considering a new website for such an established company.

June 03 2010

14:18

Getting Ready for a Website Redesign: Advice, Resources and More

Advertisement in Getting Ready for a Website Redesign: Advice, Resources and More
 in Getting Ready for a Website Redesign: Advice, Resources and More  in Getting Ready for a Website Redesign: Advice, Resources and More  in Getting Ready for a Website Redesign: Advice, Resources and More

By Robert Bowen

There is a season for all things, and this holds true in the world of web design too. Naturally with the technologies and languages evolving at the rate that they tend to, not to mention the evolution of our own personal skillsets, we find new design doors opening up before us all the time. Given that this is the way of things the time will undoubtedly come, delivered by one of the aforementioned evolutionary paths or be it even some other reason altogether, that we will decide it is time to redesign our website.


Header in Getting Ready for a Website Redesign: Advice, Resources and More

It is usually never a comment on how we felt about the previous design that we had, it is simply indicative of our desire to keep things fresh and up to date. Now as you climb aboard the redesign bandwagon, there are many helpful resources, articles, and even a few checklists that are already waiting to assist you scattered throughout the internet. We have decided that not only are we going to round-up all of those handy helpers into one post for easy access, but we are also going to go over a few things that you want to keep in the foreground of your mind, so they do not slip through the cracks of forgetfulness.

The forgetfulness can be an aggravating roadblock that can easily throw barriers in your way on your path to the redesign. There are so many areas that we have to make sure we cover during this reimagining of the site, that without maintaining a comprehensive redesign checklist you may inadvertently skip one or two of them. Leaving areas of the site unaltered, and given the depth of the redesign, possibly ineffective. Again, this is not necessarily a comment on one’s prowess as a design professional, it simply demonstrates how many cracks there are for these minor elements to fall through.

Consider some of our past articles

So below we have some of the things you will want to take into consideration when you take on this process, also areas to keep in mind. Furthermore, we have a collection of useful posts and resources that you will also want to keep close by when you are beginning to redesign your site. We hope that it helps.

Think of Your Readers

The first and overall most important consideration to keep in mind when redesigning is your readers. Now user interface and experience are always supposed to be a major focus in any design, but here we are more talking about your established readers, not just every user. The main difference is that when you are talking about every user you are talking about the sites intuitive navigability and interfacing. When you are talking about your established readers you are talking about the experience they have come to expect from your site and the way they expect it to be delivered.

Deliver in Getting Ready for a Website Redesign: Advice, Resources and More

And for the consideration of your readers, you want to be sure that your redesign is not so drastic that it completely breaks from the delivery and interactiveness that they are used to. This could inadvertently alter that comfort zone they have established with your site over time, and could in fact cause them to surf on to more what they feel are more welcoming waters. So always keep your loyal audience in mind when redesigning, and perhaps show your consideration by consulting them through a post on the site before the redesign, or even via social media, to find out what changes they would like to see.

As far as the interactiveness of the site goes, pay attention to the areas that draw in your readers, and those areas where they are the most active. Then as you begin redesigning you know that these are areas either need to remain consistently engaging or be beneficially upgraded, but they should not be considered expendable or regarded as unimportant. Any changes made in those areas should be made with care and thoughtful consideration of the readers who help give your site purpose.

Use a CSS Framework

Just in case you were not using one to begin with, you may want to consider a way to make your redesign go a little smoother and perhaps a even a little quicker by creating and using a helpful CSS Framework. As far as solid foundations go for building on top of, frameworks are an extremely useful tools for developers in order to ensure that they get off to a firm start, already aimed and headed off in the right direction. Frameworks are the basic beginnings to styling your design, and in your redesign process, why not go ahead and give yourself a leg up right out of the starting gate.

Framework in Getting Ready for a Website Redesign: Advice, Resources and More

Now everyone who uses a framework, more than likely, either has one of their own that they have developed or tweaked, or they are using a basic framework that has been built and offered to the community. Either way, you have already skipped ahead in getting your styling in order, and now thanks to the framework, your basics are already in place. Now naturally depending on the direction you are going to be taking your redesign, your framework needs may vary from what you have constructed in the past, or what has already been made and given to the community. This does not mean that a framework would not be useful, only that you will have to piece a new one together.

Given that, this may or may not be a route that you have available to take in your redesign project, but if you do, there are numerous benefits to using a CSS framework including the time and headache that it can save you. And once again, the redesign process can have enough headaches and also be frustratingly time consuming, so any time we can save ourselves any small bit of that, we need to take it. It keeps us from hitting that breaking point of sorts wherein the redesign loses its fun and appeal, and simply becomes work.

Checklist Theme Changes

Another thing to keep in mind if you are doing a redesign for a client who was previously using a pre-constructed theme, is that you are going to want to take specific note of the areas that were handled by the old theme. Perhaps a further step that you should take to ensure nothing gets overlooked is to create your own checklist of elements and options that the new design will include that the previous theme did not. This can keep these areas in focus so that their alteration will be guaranteed, not taken for granted.

Checklist in Getting Ready for a Website Redesign: Advice, Resources and More

For example, if your client’s previous theme included threaded comments and the new design does not, you need to be aware of this. Otherwise, you are going to have to do some special altering to your code to ensure that when the new design launches the past posts with threaded comments suddenly do not have a jumbled, unfollowable mess in the comment section. Since this was already styled and handled by the theme they were using previously, we may not even think about how the new design covers these areas, or more importantly, if it even does cover them.

So if you are going to be redesigning for a client who has been using a pre-constructed theme as their base from which you now have to build, then as you redesign you may want to go ahead and begin making a checklist of the differences between the theme and your design so you know where to look for possible needed fixes and minor tweaks to keep things consistent. While in the beginning this may seem like a time waster, it should more be viewed as a potential headache avoidance system, that makes for a smoother user experience in the transition, and not one riddled with bugs to be sorted. Remember consistency of experience matters to your established audience and that should not suffer because of the redesign.

Avoid Unnecessary Bells and Whistles

Since we are tossing old sayings about, another one that we should keep in mind as we redesign is the one that goes, just because we can doesn’t mean that we should. And what we mean by that is with consistency mattering the way it does, you want to try and air on the side of simpler rather than opting for something a bit more unnecessarily complicated. Sure we want to add some razzle and a touch of dazzle to our design as we rework the site, but we do not want to take things so far from away from the original that we lose the feel, and what’s worse, the appeal of the site.

Bells in Getting Ready for a Website Redesign: Advice, Resources and More

One of the reasons we tend to redesign is because our skills have grown and we want to flex that creative muscle to show off some of what we can do now that we were unable to make happen in the past. However, if this new addition comes at the cost of the user’s experience in any way, then you have to ask yourself just what purpose does it serve? The bells and whistles are great when we can work them subtly into the site without them becoming obtrusive or a hindrance to your readers, but if their inclusion works against you and your readers, then those little extras need not make the final cut.

Yes, it is always nice to be on the forefront of the evolving web, but it has to be done with style and grace, and perhaps a dash of humility. If you begin loading your redesign down with a bunch of cumbersome frills just to show how far you have come in honing your skillsets, then you are risking unnecessarily interfering with the purpose of your site and straying farther from that purpose. You are making the site and the design more about ego and less about function and form, wherein the message you are hoping to transfer with your design becomes jumbled and possibly even lost.

Revisit the Mission

Once upon a time when your site first began, it had a mission. The site had a decided purpose and a direction that it was crafted to follow. As you begin the redesign process, you may want to also revisit the intended mission of the site and see if you still intend to pursue that same direction. If you find that you have altered your course along the way, which is quite common given how much we grow and change over time, then you may find that you need to adjust your design accordingly to better reflect this change in course.

Reflect in Getting Ready for a Website Redesign: Advice, Resources and More

What better time to make this new direction known and solidify it by saying it boldly with your site’s new look? Use this opportunity to align your site’s voice more with your own, and lock in this revised mission as you move forward and break new ground. Naturally you can undergo this evaluation process and make this sort of mission change whenever you want, but when you redesign your site, people are already going to be taking time to check around the whole site looking for any and all changes that you made so they are more likely to notice this new direction and see where you are planning to take things.

You also want to be sure that if you do change your mission, that it does not so drastically turn from what it was originally that it is no longer a recognizable version of itself. If that is the case, then you do not need a redesign for the site, as much as you just need a new site dedicated to that purpose. The redesign should be a new facade for the design and the direction, but they should remain in the same area as their predecessors. If it does not feel like the same site when it is all said and done, then it will not keep the same readers that it once did.

Don’t Break the Brand

Having a brand for your site and business works for you in so many ways that you want to be sure that you do not disrupt or break the brand in any way with your new design. It is rarely a good idea to alter your brand, which iconically becomes linked to you and your site in the minds of the masses (which really is the point of the whole brand in the first place) so changing it on a whim just to suit your redesign could be more costly than expected. Remember, consistency is important, and when dealing with a brand, doubly so.

Break in Getting Ready for a Website Redesign: Advice, Resources and More

Redesigns are one thing, re-branding is something else entirely, and you need to be keenly aware of which you are attempting to do. Branding goes ever so much deeper than you design does for your site and your business, so be sure that you are not inadvertently altering more than you intended to with the reworking of your site’s appearance. Redesigning can be done on a whim, generally with little to no harm being done, but a brand is so much more involved that it takes a lot of thought and effort to effectively re-brand.

So if your redesign is intended as a re-branding or just an initial branding, then you will want to take extra care and time to craft a version fitting of everything that you want the brand to embody. It now has to say much more than it did before, and this should never be undertaken lightly. But if this was never the intent of your redesign, then build around the brand and work it fluidly into the new site, not the other way around.

Don’t Forget the Small Stuff

For years the saying has echoed throughout, don’t sweat the small stuff. And though in the scope of the big picture it is good advice, it may have accidentally created a set of unintentional blinders with regards to the small stuff. Wherein, no matter the situation we find ourselves in, we keep focused on the main goal, and let the little stuff around us be blocked from our sensors. However, when you begin redesigning these blinders need to come off so that our radars pick up on all the minor elements that need to be included, not simply forgotten about until we have uploaded the supposed finished new look and our users have to call our attention to something we missed.

Favicon

When speaking of the small things, it really doesn’t get much smaller than the favicon, so be sure that you do not let its size allow it to be missed as your ever watchful redesign eye searches the site. Depending on how drastic a change your look undergoes in your redesign, it may be necessary to tweak your site’s favicon as well. Having all of these bases covered further helps to cement a professional reputation for your site and you as a designer, so make sure that things like the favicon, the minutiae of your site, stay current and to date with your redesign.

Custom Default Gravatar

If you have a blog attached to your site and in your comment section you use a custom default gravatar for those commenters who do not have their own, then you will also want to tackle that minor element and not let yourself forget it until post-launch. This one is often overlooked because of the fact that it has to be written into your functions, or in this case, re-written. Redesigning can be tedious and tiresome at times, but you cannot let yourself get lazy in your work and not see to as many details as you can before you hang your banner of accomplishment and go live with the new look, so see to your functions and get those gravatars changed over too.

Broken Link Check

Another task that you can tackle when doing a redesign is to scan through your site and make sure that all of your outgoing links are still up and active, not linking to a site that has long since fallen from the landscape. This helps your redesign stay fresh and remain current as well. This may also lead to a little necessary alteration of some of the content on your site to work around these possible link losses, but that can also afford you an opportunity to find new links and content to fill any of these gaps left.

Tools of the Redesign

Below we have gathered up several redesign tools that can help ease the headaches that can commonly be associated with this overhaul process.

Further Resources

Let us keep this redesign enthusiasm going with a handful more of extremely helpful resources all geared towards taking on this type of comprehensive re-imagining of a website.

May 23 2010

23:12

The dawn of the redesign

After two years, some odd months and endless hours of starting over from scratch, I’m excited to announce and display The Design Cubicle’s redesign! Not only did we give it a fresh coat of paint and some detailed body work, but we also worked with our friends at Paravel, Trent Walton and Dave Rupert, to perform some outstanding under-hood development using HTML5 and CSS3. I’ve also added some new features and sections to the blog.

Also, in celebration of the redesign  launch we are giving away some awesome prizes that were kindly donated. More on the redesign, new features and giveaway below.

Many of you might be thinking, “Man, this is much different from its predecessor”, and you are absolutely right. A few reasons for this:

  1. When I first started The Design Cubicle I would have never imagined what it turned into today. I was more or less only  looking for a quick way to share my thoughts on a customized a pre-made template.
  2. The previous version did not reflect my design sensibilities, which are inspired heavily by print design, typography and attention to even the smallest details.
  3. The previous version was just much too stark; color was needed!
  4. We all get tired of design at some point, as I’m sure I’ll say the same about this eventually.
  5. Through research and two-years of running this site, I’ve discovered what people are interested in on this blog and how they interact with it. Thus, I’ve eliminated a lot (sidebar and its items in particular) and brought more focus to the content — which is the reason people visits blogs, right? You will even notice I’ve eliminated banner ads and junk along the old sidebars. I wanted to content to be of focus, which I still plan on delivering the same quality — if not better — content.

On typography and color

Coming from a traditional print design background, it’s no secret that I have a deep love for typography and layout, so it was only natural that this design embodied this passion. Also, since the majority of websites are 90% text (this website about 98% text) I felt the most important function was placing emphasis on the typography and compliment it with subtle details, patterns and other special touch.

After sharing a few shots and teasers on Dribbble a month or so ago, many of you enjoyed the new ‘The Design Cubicle’ masthead, which I’ve decided to substitute from a site logo to more of a site masthead(?). Reasoning: The site is more of an information source than it is a brand or company (and personally I am registered under Brian Hoff Design, LLC for my work).

As for the typefaces used throughout, the italicized serif for the mastheads ‘The’ is set in H&FJ’s Sentinel while the DesignCubicle, and faint TDC utilize the beautiful Tungsten. Design also incorporates a subtle drop shadow that I created and saved as a pattern in Photoshop and was cut at the inset (the white border between the type and the patterned drop-shadow).

The body copy is set in FF Dagny Web Pro using Typekit, which renders amazingly — specifically at very small sizes — since it was optimized to read better for use on any screen (look for use of fonts withWeb Pro in it’s name for best optimized results).

The red / orange background color and grey textured body background was inspired by a book cover design a saw a few months ago in Princeton, NJ. The color scheme stuck out in my mind when redesigning the site, so I decided to go with it. I am also tinkering around with the idea of changing the color scheme and typefaces monthly, to give the site a special, personalized touch and encourage readers to visit the site more (not just read via the ugly formatting of most RSS readers), so stay on the look out for that.

On the layout

The layout was one of the toughest and most limiting factors when redesigning. Two-years of formatting over 200 articles would have caused an over-workout  to completely restructure the main content area — specifically images that were originally made to be 500px wide — so I decided to keep the content to 500px to avoid too many headaches later on in the development stages.

Since I decided to eliminate the previous sidebars (they were getting too lost in the commotion) containing Twitter, Facebook, RSS and Hiring instructions, I opted to place this at the very top, while the new Availability area will be updated frequently to let potential clients know when I am able to take on additional freelance design work. I often find myself responding to emails, unfortunately denying clients work because I am at my max workload at the time of contact. Hopefully this streamlines things a bit. Rolling over this link brings up links to my Project Worksheets which are my questionnaires I provide all of my clients prior to working together. This helps to improve the initial contact and my workflow of taking on new work.

The bottom area / footer now contains information about myself, as well as Topics which you can browse if you are looking for something particular. You can always check out the new Search to find what you want as well.

On the development

I’ve had the opportunity to work with the talented developers / designers and friends Trent Walton and Dave Rupert on the development of this site. They truly detailed some beautiful front-end and backend markup using HTML5 and CSS3. We all really had a great time collaborating on this and can honestly say that they are some of the most talented guys I know.

I was going to write about the development and technologies used on this site, but I thought who better to hear it from than straight out of the horses mouths. I’ve invited both Trent and Dave to write an upcoming article on the development process, technologies implemented, and HTML5 / CSS3 techniques used throughout this site. Come back to read about this very soon and in the meantime make sure you check out Paravel, and their nifty “pet project”, The Many Faces Of.

New feature: Notebook

You might have noticed a new link: Notebook. This will be replacing our Sweet Tweets weekend articles. I find that knowing and staying informed in the design community is great for growth and improvement for any designer — plus who doesn’t like to discover awesome “designery-links” and informative articles? The Notebook will be updated daily instead of once-weekly (like that of Sweet Tweets) with high-quality articles about web and print design, development, to helpful resources and useful applications, and more. We even created its own separate RSS feed so you don’t miss out on all the good stuff around the web. I hope you all enjoy this new section, and if you find anything of top-quality don’t be hesitant to send it my way.

Giveaway and prizes

If you have any other questions or curious about the redesign / changes you can always send me an email or even feel free to ask away on Twitter. I encourage you all to express your feedback and if you see anything wrong or showing up strange let me know about it.

Okay, enough about the new site. We have some really great prizes to giveaway via our very generous friends and sponsors. Let’s get started.

1- Subernova - (Two) free project management licenses

Our friends at Subernova have kindly offered two lucky readers the chance to win one of two free 1-year licenses (value of $149.99 each) to their awesome and beautifully designed project management tool.

For those unfamiliar with Subernova, it’s a web-based app that allows designers and freelancers to track projects and clients, time track, keep up with milestones, invoice, and much more. You can run it from the Web, Desktop, iPhone and even the iPad.

2- Ugmonk - (Two) free t-shirts of choice

Ugmonk is contributing two free t-shirts of your choice for two winners! If you haven’t checked out the Ugmonk shop you seriously have been missing out on some beautiful t-shirts by designer, Jeff Sheldon. I own 3 of them myself (And then I woke up, Path to Nowhere, and One Hundred).

3- Smashing Magazine book

Smashing magazine has donated their new book to one of our readers.

“The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs.”

4- Billings for Mac - (Three) Time Billing licenses

Our long-term friends over at Marketcircle are providing three (3) free licenses to their Professional Time Billing software: Billings.

“Billings logical workflow and intuitive interface makes quoting, invoicing and time tracking simple.”

I even love the Billings Touch app for the iPhone and iPod Touch — great compliment to their awesome desktop app.

5- Uprinting - (Five) sets of 250 stickers

Uprinting is kindly providing 5 readers 250 stickers / labels for free. The stickers sizes can either be 2 x 3.5″, 2 x 4″, or 3 x 3″ printed in full color on 70lb Label Matte coating. Includes free ground shipping as well, but eligibility is limited to US residents only (must be 18 and above to enter).

6- Neenah Paper - goodies-n-knicknacks for 5 winners

Over the past year I’ve had the opportunity to meet many great new friends through Twitter and the team at Neenah Paper is definitely one of them. For those unfamiliar with Neenah Paper, they offer some of the most beautiful papers I’ve ever seen, felt and smelled (yes, I’m a weird designer like that). Not only do they offer a range of gorgeous papers, but they also run a helpful blog, Against the Grain, of which I was interviewed awhile back:

“Against the Grain is about creating conversation and building a sense of community.  Our inspiration was to create a space where designers could go for information, ideas and inspiration.”

Neenah was extremely thoughtful and put together a huge box of cool things that they sent my way to give out to all of you. Items include Neenah-branded laptop cases, water bottles, pens, flashlights, envelope cutters and more! I will be putting together 5 “gift bags” of these items and shipping them off to 5 readers.

How to win

Comment on this post with a few thoughts on the redesign along with which item(s) you are most interested. I will be selecting the winners at random on May 31st by email (make sure you leave a valid email address in the email portion of the comment form). Also, sending out a tweet or two couldn’t hurt your chances either.

Thank you: Over the course of the past 2-months of this redesign I’ve received much appreciated help, feedback, and encouragement by so many of you I don’t know where to begin. Huge thanks to Trent and Dave for their amazing development and pixel-pushing skills and being patient with any last minute or crazy nit-picking comments. Dan Mall, Greg Ash, Yaron Schoen, Stefan Hartwig, and anyone else that had a look at the site before launch and offered feedback: Thank you. I appreciate all of your wonderful encouragement and comments on Dribbble as well. As always, to everyone that has supported myself and this site, I cannot thank you enough! It’s been fun redesigning this site and glad to present it to all of you. I hope you enjoy it!

April 23 2010

13:39

The Design Cubicle redesign: It’s getting closer + other news!

A few articles back I wrote about the start of the upcoming redesign of this site, The Design Cubicle. Well, things are definitely getting much, much closer now; the smell of a completely fresh redesign is in the air! I thought I would give you all a sneak peek into what I’ve been working on for the redesign (for those of you that have not seen small teasers on Dribbble) and some of the new design decisions I’ve made and thought about along the way.

First off, let’s have a look at some exclusive sneak peeks

teaser1

teaser2

teaser3

Feel free to share your thoughts about these little snippets in the comments below. Positive and negative criticism is welcomed; just be classy about it.

Some words on the redesign

I’m looking to have this fully launched by (hopefully, some point) in the month of May. As of right now that date is right on schedule. The closer the design gets to finalization the quicker I’ll have it up and running. I’m also thrilled and excited to be working with the talented and awesome Trent Walton (personal website) and Paravel teammates who will be handling all back-development on this redesign. I’ve been really grateful to be able to meet some really great people online (through Twitter, Dribbble, etc.) and I felt Trent and his team would be the perfect fit (look forward to some pixel-pushing magic on this redesign!).

One of the toughest (or I should say limiting) factors of this redesign is having to fit within old (this versions) formatting limitations since I have nearly 275 articles and images prepared that were suited for a specific size. I had to be sure to take into account for this older formatting; mostly the 500px wide content area, which only left me with around 450 (or so) pixels to stay within page width standards to plan other elements. Also, I wanted the redesign to suit my particular design tastes. I feel that many of the more popular blogs out there have the same “big name” feel and flow to it, while I’ve always thought of my blog to be a bit more personal than others with similar subscriber counts. In a way, I’m bringing this design back to basics of which I started it.

It was time for me to custom build my home. This version was modified from an existing premium template with customized plugins; as a designer I needed something to claim as my own. Also, having started out not fully expecting what this blog would turn into today I would have planned a bit differently. Over time I’ve seen what works well and what doesn’t on my site, as well as areas of interest (or non-interest) of my readers. These considerations were also taken into action for the redesign.

The overal redesign will be much more open, allowing content to breathe more, thus improving the overall readability and usability of this site. Once I fully launch the redesign I will go into much more depth about the decisions I made and elements I took into consideration and why. Don’t want to give away too much upfront. :)

In other news

If you haven’t heard about the newly launched Design-Swap yet, it is a website promoting collaboration between designers started by new friends Yaron Schoen and Trent Walton. I’m excited to announce that myself and Dan Mall (Twitter) are up for the first swap. I’m definitely looking forward to collaborating with Dan on this swap; a designer and friend whose work I greatly admire. One of my favorite designed sites on the web that he happened to design and art direct is Housing Works; a great example of beautiful imagery, hierarchy, content flow and layout.

Be sure to check out Design-Swap, its beautifully designed website, and upcoming swap between Dan and myself.

screen-shot-2010-04-23-at-91935-am

BrianHoff.net featured in upcoming inspiration book

I’m also excited to announce that my portfolio site, BrianHoff.net, will be featured in the upcoming book—due out in September—The Web Designer’s Idea Book Volume 2: The Latest Themes, Trends and Styles in Web Design. You can pre-order your copy now on Amazon if  you like. If you are not familiar with the book, Volume 1 is a great addition to your book collection packed with 250-pages of beautiful examples of web design.

Stay posted shortly for more upcoming news on the redesign. The site will most likely be down for about 2 days before the launch goes live, but I will definitely keep you all posted before that happens. I will also be giving away some pretty awesome prizes on the launch so make sure you don’t miss it by grabbing our RSS or Email updates.

April 19 2010

11:15

Smashing Magazine Redesign: Photographs & Screenshots

Last year we took on one of our biggest projects yet, working on the new Smashing Magazine re-design. In this post we’ll look at some of the elements we designed for the project, many of which nobody has seen before.

The Brief

The brief was for a re-fresh or update of the current design, rather than an overhaul. They wanted things to be crisper, cleaner and more together - but a lot of the elements needed to stay, so that it still had a familiar feel & felt like something that people were used to.

Launch Project Photo Gallery

Not everything we created made it in to the live site. So we’ve decided to show a gallery of some screen-shots & previews of our involvement in the process.

We’ve put together some photographs of various ideas and work in progress from the early stages of the design. The photos were taken during the design process, and there has been various changes made since, by both ourselves and the Smashing team. But it does show an exclusive look at the early stages of the design process.

Wireframe & Moodboard

The first stage was to work on a wire-frame & mood-board, we showcased our initial ideas on a combination of both. Presenting some solid ideas like this backed up by examples and solid reasons it makes the start of any project much easier.

Things That Never Made it

Since handing over the project to the Smashing Magazine team a lot of changes have been made. So a lot of the work we did never actually saw the light of day, which is why this post has been made and also why we’ve uploaded a Gallery.

Some of the things, in our opinion look better in earlier versions than they do on the live site. But at the same time there’s a lot of good that came from the client feedback and a lot of improvements have been made.

In my honest opinion, the current live site is in need of a little fixing up. We’ve been in touch with the Smashing Magazine team about some of the changes they’ve made, and put forward some improvement ideas of our own. Whether things will change I’m not sure, as we’re no longer actively involved in the project, but we have kept in touch with the team - and shared our honest feelings with them.

A quick look at some early details

Here’s a quick look at some details we quite liked, but we never got to use, for one reason or another. Even though they weren’t used they were a starting point for changes for both us and the Smashing Mag team.

We also worked with our good friend Pasquale D’Silva again on this project, he provided the character Illustrations for the about us pages. The characters were later used by the team for other things, but never as we originally planned it as part of a “meet the staff’ feature (above).

Speaking of Pasquale

As mentioned the characters we’re made by Pasquale D’Silva. We came up with the idea of having him draw each of the staff members to use on the about us page. Something that the clients loved. Here’s a preview of the 4 brilliant characters he came up with.


The Experience In Conclusion

Working on such a huge part of the design community was always going to be a challenge. It was a huge honour to be involved with the team and the project and all in all I’m proud of the work we did on the project.

As with any project there is always things I wish could have been different, but on the whole we’re happy with the work we put into the project and how things looked when we were done, and it really was such a massively fantastic project to have been involved in.

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