Posts Tagged ‘Design’

Why developers cannot afford to ignore design

15 Jun

Advertise here with BSA

We developers sometimes take design for granted. And let’s be honest: who doesn’t hate taking things for granted.

Some say we will never truly appreciate the importance of design until we have been trained in the essence of design and beauty. Well, I say BS to that. I want to break us our of this box and clear away the cobwebs from our code-oriented minds.

Development, by its very nature, reflects the knowledge base of the person in charge. And the skills required to develop such a knowledge base can leave us in the dark about design. Developers often sweep design under the rug in order to be able to learn the intricacies of PHP and MySQL.

But as someone who has been writing code for 13 years, I can tell you it doesn’t have to be this way. In fact, many of the world’s greatest developers have an excellent grasp of UI and UX and of what their users want. The best way to get a handle on it is to figure out what you want in a UI.

People in business say to start with what you know, and this works equally well in design. The best designers aren’t the ones who know a thousand fonts (although that helps), but rather who know exactly what will “feel” best on the page.

To get started, simply go to a website that you feel “would be better if” and write down all of your ideas. Before you know it, you will be debugging design patterns and UIs.

This is just a start. But after doing it a few times, you’ll start to understand why these factors are so important. You might even discover that you have these questions about more websites than you had imagined. Below are a few critical reasons why design is important, courtesy of two great competitors.

Google Video: the case for strategic design

Google has been known to solve problems by throwing development resources at them for months. It analyzed data patterns in order to improve the UI of its Google Video project. This was absolutely detrimental to the functioning of the product, as evidenced by its canceling of the service. Let’s look back at Google Video to see why it didn’t work.

It started out simple enough, with that minimal design that Google is so famous for. Even the search wasn’t too bad, with the classic Google row streaming down the page.

This changed when Google found that people hated those early horizontal rows. It restructured the page to try to make it more enjoyable. In fact, it took a page from YouTube’s book by adding links to related videos on the side.

This is a key problem of developers who aren’t sensitive to design: copying or borrowing elements from other successful products. “If it worked for them, it will work for us” is one of the most dangerous attitudes to have in web design. There were hundreds of Digg clones over the years, but only one stands out: Reddit. There were hundreds of YouTube clones over the years, but only one stands out: Vimeo.

Products gain acceptance not by ripping off other services, but by innovating on the user experience through interesting design and UI. These small innovations are exactly where Google Video lost users. Google assumed that people would stay if it removed every feature except what was similar to proven products. In fact, users did not stay, and the only real use anyone had for the product was the one thing that Google truly innovated on: allowing bigger and longer videos.

So, what does this product teach us about design? It teaches us that innovating carelessly is just as bad as not innovating at all, and that going minimal for the sake of minimalism is not always the right approach. Google would have been better off not developing products like these at all, because it has left us questioning its judgment.

With all of its failures—Buzz, Wave, Google Video, etc.—we begin to question its understanding of these spaces. We know that Google understand advertising and search (it pretty much owns these markets), but that doesn’t keep us from questioning its overall understanding of design. This erodes Google’s image. It’s detrimental to a company that is trying to take over the world, or even one that’s just trying to put food on the table. Focusing on design and not changing for the sake of change would have helped. Let this be a lesson to developers everywhere.

Yahoo: the case against overdesign

Yahoo may be a household name, but it could have permeated the Internet even more than it has. Going to a party that offers everything is sometimes as unsettling as going to one that offers nothing. People think that they like choice, but sometimes they just want someone else to decide for them. Apple has made more money than God by exploiting this business principle. But web designers overlook it all too often.

Yahoo’s home page shows hundreds of things to do, to click on and to consume. You can customize it to display your favorite sources; and as we all know, you’re welcome to make it your “first and last stop on the web.” This has led it to become a top property online (perhaps because it was first to market), but this has also kept it from dominating the competition.

Why did the competitors win? To put it simply, because they didn’t add anything extra. Google didn’t try any BS in the beginning. It cut out the fat, leaving only the lean, delicious search box that we know today. And despite Google’s problems in other spaces, it still dominates search.

People often say that Yahoo offers a much broader service—weather, news, film times, horoscopes, etc.—and that Google did only one thing in the beginning. But this is exactly why Google dominated. There is something to be said for having a million different products and revenue streams, but it can still be awfully detrimental to the brand’s image.

Google also chose to pursue multiple products and revenue streams, but it didn’t go about it by shoving them in our faces. The relative elegance with which it went about it is perhaps the reason those products were more welcome by users and less confusing.

Granted, appealing to people who aren’t web savvy has its merits, too. But mastering a niche is better than starting out grand. Take the overall valuations and stock prices of the two companies: one started out big and has since contracted, while the other started in a niche (for developers, designers and web-savvy users) and has since grown to become the most reputable company in the US. If that isn’t a case against overdesign, I don’t know what is.

In sum

A lot has been said about Google and Yahoo here, and the lessons to be learned are notable. Developers by nature lock themselves into boxes (or IDEs), and getting out of them can be hard. The point is that we should recognize the importance of design going forward and focus on bringing authentic user experiences to the forefront of our products.

In this Web 2.0 world and beyond, these are some of the most important considerations in developing brand equity, understanding users and cultivating an aesthetic. If we leave everything up to trained designers, then we will be missing out on some valuable UI insight. Graphic design and user experience will never decrease in importance, nor will development. But unless we bridge the gap, we may never find the authentic experience that arises from balancing the two.

Written exclusively for Webdesigner Depot by C Dain Miller. He is a freelance journalist and developer. Follow him on Twitter @_dain.

What are your thoughts on design? Has it gotten enough attention in the last few years? How important will design be as the world becomes more web-centric?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

eBook: Reduce Your Workweek from 70 to 40 Hours



Lulu Guinness: Be A Pin Up!

25 May

pinupofficial.jpg Just in from the UK ~ Justine just checked out Clerkenwell Design Week!

Nostalgia just hit ~ remember those pin art toys from the… 80s? Just lost a little time ending up on searching for the old ones! Found info on it on Wikipedia - random fun fact? “The pinscreen was popularized in the 1985 music video for the Midge Ure song “If I Was”, which included a giant body-sized version.” They are even still available on Amazon!

But i digress… this installation from Clerkenwell Design Week is “Be a Pin Up!” from Lulu Guinness, there she is with it above (pics from her blog). The giant frame of pins is situated in front of the iconic London landmark, St John’s Gate and lets the public create full body sized portraits using the 6,000 chromed capped aluminum pins. Here are a few pics of the images created by passerbys. Check out the pics on the next page!

TO PAGE 2 of "Lulu Guinness: Be A Pin Up!"! ----->

(Want more visual goodness? See +

Whitney Hess: Design Principles — The Philosophy of UX

02 May

The second speaker at this mornings An Event Apart in Boston is Whitney Hess. Here goes with the liveblogging…

Whitney’s talk is about design principles. As a consultant, she spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.

Why have these principles? It’s about establishing a basis for your design decisions, leading to consistency. It’s about having a shared vision and they allow for an objective evaluation of the outcome.

But good design doesn’t necessarily equate to a good experience. The Apple G4 Cube was beautifully designed but it was limited in where and how it could be used.

Good design can equal good experience. That’s why Whitney does what she does. But she needs our help. She’s going to propose a set of design principles that she feels are universally applicable.

  1. Stay out of people’s way. The Tumblr homepage does this. You can find out more about Tumblr further down the page, but it doesn’t assume that’s what you want to have thrust in your face. Instead the primary content is all about getting started with Tumblr straight away.
  2. Create a hierarchy that matches people’s needs. This is about prioritisation. uses different font sizes to match the hierarchy of importance on its “ways to save” page. Give the most crucial elements the greatest prominence. Use hierarchy to help people process information.
  3. Limit distractions. Don’t put pregnancy test kits next to condoms. On the web, Wanderfly does this right: one single path, completely self-contained. Multi-tasking is a myth. Let people focus on one task. Design for consecutive tasks, not concurrent.
  4. Provide strong information scent. Quora does a great job at this with its suggested search options. It’s actively helping you choose the right one. People don’t like to guess haphazardly, they like to follow their nose.
  5. Provide signposts and cues. Labelling is important. The Neiman Marcus e-commerce site does this right. It’s always clear where you are: the navigation is highlighted. You’d think that in 2011 this would be standard but you’d be surprised. Never let people get lost, especially on the web where there’s a limitless number of paths. Show people where they came from and where they’re going.
  6. Provide context. A sign that says “Back in 30 minutes” isn’t helpful if you’re in a hurry—you don’t know when the sign was put up. On the web, AirBnB provides everything you need to know on a listing page, all in one place. It’s self-contained and everything is communicated up-front.
  7. Use constraints appropriately. Preventing error is a lot better than recovering from it. If you know there are restrictions ahead of time, stop people from going down that route in the first place.
  8. Make actions reversible. (illustrated with a misspelled Glee tattoo) Remember The Milk provides an “undo?” link with almost every action. There’s no such thing as perfect design; people will make errors, so you should have a contingency plan. Undo is probably the most powerful control you can provide to people.
  9. Provide feedback. How do you know when you’re asthma inhaler is empty? You don’t. You won’t find out until the worst moment. On the web, loading indicators provide useful feedback. Tell people that a task is underway. Design is a conversation, not a monologue.
  10. Make a good first impression. Vimeo has one of the best first-time user experiences: “Welcome. You’re new, aren’t you?” Establish the rules, set expectations about the relationship you’re about to initiate on your site.

The basis for all of these principles are Aristotle’s modes of persuasion: logos, ethos and pathos—the rhetorical triangle.

Are universal principles enough? Probably not. Every company is different. Some companies publicly share their principles. Take Google’s “Ten Principles That Contribute to a Googley User Experience” as an example, or Facebook’s design principle …or Windows design principles for a good laugh. Look beyond the tech world too, like Charles and Ray Eames or Burning Man’s design principles.

So what are your company’s principles? Without principles, we don’t know what we’re trying to achieve. Here are some guiding ideas:

  1. Research available principles from elsewhere.
  2. Gather, list and print out the business goals and user needs.
  3. Brainstorm with key collaborators.
  4. Narrow down to no more than 10, preferably 7.
  5. Make sure they don’t overlap.
  6. Make them peppy.

Use the design principles at kickoff meetings, when your prioritising features, brainstorming sessions, design critiques, stakeholder presentations, resolving conflict, postmortems and web metric analysis: evaluating the success of the feature or product.

Remember, user experience is the establishment of a philosophy of how to treat people. Help people make their lives better.

Tagged with


Showcase of Outstanding Responsive Web Designs

11 Apr

This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web design. These websites not only look great at full scale monitor resolution, but are designed to gracefully scale according to the user’s screen size. Resize you browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well presented formats.

What is responsive web design?

Screen resolutions

Websites are no longer viewed only on a computer monitor. Smartphones, tablets and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. The idea of catering for various resolutions isn’t anything new. Back in the days of table based designs designers either chose the fluid or static route. Today’s responsive websites take a similar approach by using fluid widths in percentages and ems, but go a step further by using scalable images and adjustable layouts depending on the browser size.
To achieve this ‘scalability’, CSS media queries are used to apply different page styling according to certain parameters, such as min-width and orientation. The first step is to create a mobile version, but you could go on to customise your design for a range of resolutions.

Showcase of responsive web designs

Ready for some examples? Here’s a roundup of 50 of the most outstanding examples of responsive web designs. Each one is displayed with a preview of both the full size website and an example of a small resolution, but to get the full experience be sure to visit the live site and play around with it yourself.


View the responsive website design

Sasquatch Festival

View the responsive website design

Earth Hour

View the responsive website design


View the responsive website design


View the responsive website design

Philip Meissner

View the responsive website design


View the responsive website design


View the responsive website design

Visua Design

View the responsive website design

Laufbild Werkstatt

View the responsive website design

Sweet Hat Club

View the responsive website design


View the responsive website design

Andrew Revitt

View the responsive website design


View the responsive website design


View the responsive website design

Pelican Fly

View the responsive website design


View the responsive website design

Converge SE

View the responsive website design


View the responsive website design

Joni Korpi

View the responsive website design

Jason Weaver

View the responsive website design


View the responsive website design

Think Vitamin

View the responsive website design


View the responsive website design

3200 Tigres

View the responsive website design

Marco Barbosa

View the responsive website design

Jeremy Madrid

View the responsive website design


View the responsive website design

Ryan Merrill

View the responsive website design

Media Queries

View the responsive website design

Electric Pulp

View the responsive website design

Tee Gallery

View the responsive website design

Stephen Caver

View the responsive website design

Happy Cog Hosting

View the responsive website design


View the responsive website design

A Different Design

View the responsive website design

This is Texido

View the responsive website design

Edge of my Seat

View the responsive website design

Hardboiled Web Design

View the responsive website design

St Paul’s School

View the responsive website design

Robot… or Not?

View the responsive website design

Handcrafted Pixels

View the responsive website design


View the responsive website design


View the responsive website design


View the responsive website design

UX London

View the responsive website design


View the responsive website design


Color Picker Pen by Jinsu Park

24 Mar

unnamed twxiqvmk8q Color Picker Pen by Jinsu Park
Korean designer jinsu park designed a concept pen that adopts the eyedropper tool of photoshop for real life. The color picker pen enables colors in the environment to be scanned and instantly used for drawing. The sensor detects the color and matches it to the color display, then the RGB cartridge located within the pen mixes the inks together to create the color that has been scanned.

unnamed 6w07qh2dyr Color Picker Pen by Jinsu Park
unnamed 28urf4ur0s Color Picker Pen by Jinsu Park
unnamed dcjgqx9d35 Color Picker Pen by Jinsu Park
unnamed jw50ayxrkd Color Picker Pen by Jinsu Park

Read and see more entertaining articles here!

 Color Picker Pen by Jinsu Park
Design You Trust RSS Feed | Design You Trust on FB | Design You Trust on Twitter | Design You Trust

40 Free Metallic Textures for Your Designs

03 Mar

Time for some more great free textures. This time we’ve had a closer look at the variety of metallic free textures and put together some of them for you.










































Eliminate Waste – The Elegant 1 Liter Faucet Design

22 Feb

unnamed isyjho52kn Eliminate Waste – The Elegant 1 Liter Faucet Design
Elegance meets functional design with the 1?imit faucet. The glass holds exactly one liter of water, sufficient for any hand wash. The elegant design hopes to conserve water, as we almost use six liters when one is sufficient. Once the liter has been used, the waiting game begins and you must wait until the liter fills again. This rationing process hopes to help with water conservation. Designed by Dohyung Kim & Sewon Oh.

unnamed 9t3skprhw Eliminate Waste – The Elegant 1 Liter Faucet Design
unnamed e90wym7zm Eliminate Waste – The Elegant 1 Liter Faucet Design

Read and see more entertaining articles here.

 Eliminate Waste – The Elegant 1 Liter Faucet Design
Design You Trust RSS Feed | Design You Trust on FB | Design You Trust on Twitter | Design You Trust

The Art of the Facebook Page Design

22 Feb

Everyday more and more businesses around the world are creating presences on Facebook.

Some companies opt to bring users directly to the page wall or other tabs (e.g. info, photos, RSS/blog, discussions and links) and use product images or company logos instead of more elaborate landing pages.

Regardless of where a user lands when they first arrive, something needs to capture their attention.

As we’ll see in the examples of pages from the 50 Top Facebook Pages of Brand’s Worldwide represented below, some pages may come right out and ask for the “like”, some may have a variation on the call to action with a contest, gift, upload, sign-up now, or shop now type message. Some may appeal to emotions. Some will be memorable. And some, quickly forgotten.

In truth, Facebook is about more than the ongoing interaction between businesses and users via status updates. We believe it’s also about the art and design of engagement and a vital new component to the corporate brand identity—the Facebook page design.


Total Fans 22, 113, 350 | Food and Drink | United States


Total Fans 19, 386, 229 | Restaurant | United States


Total Fans 16, 509, 052 | Food and Drink | United States

Red Bull

Total Fans 15, 002, 570 | Food and Drink | Austria


Total Fans 14, 903, 838 | Food and Drink| United States

Converse All Star

Total Fans 12, 522, 419 | Fashion | United States

Victoria’s Secret

Total Fans 11, 273, 214 | Fashion | United States


Total Fans 10, 903, 272 | Fashion | United States

Windows Live Messenger

Total Fans 9, 555, 443 | Technology | United States


Total Fans 8, 902, 303 | Food and Drink | United States


Total Fans 8, 328, 915 | Technology | Japan

Monster Energy

Total Fans 8, 264, 999 | Food and Drink | United States


Total Fans 7, 907, 457 | Fashion | Spain

Victoria’s Secret Pink

Total Fans 7, 861, 520 | Fashion | United States

Dr. Pepper

Total Fans 7, 730, 330 | Food and Drink | United States


Total Fans 7, 482, 885 | Food and Drink | Italy

Ferrero Rocher

Total Fans 7, 464, 229 | Food and Drink | Italy


Total Fans 7, 428, 300 | Food and Drink | United States


Total Fans 7, 227, 700 | Attraction | United States


Total Fans 7, 015, 657 | Restaurant | United States

Adidas Originals

Total Fans 6, 983, 666| Sports | Germany


Total Fans 6, 446, 255 | Food and Drink | United States


Total Fans 6, 216, 176 | Technology | United States


Total Fans 6, 111, 927 | Fashion| Sweden

Starbucks Frappucino

Total Fans 5, 632, 778 | Food and Drink | United States

Google Chrome

Total Fans 5, 452, 638 | Technology | United States

Taco Bell

Total Fans 5, 398, 834 | Restaurant | United States

Walt Disney World

Total Fans 5, 224, 835 | Attraction | United States


Total Fans 5, 196, 258 | Technology | Canada


Total Fans 4, 680, 341 | Technology | United States


Total Fans 4, 663, 512 | Restaurant | United States

Nike Football

Total Fans 4, 622, 955 | Sports | United States


Total Fans 4, 493, 274 | Fashion | France


Total Fans 4, 429, 660 | Automotive | Germany

Hollister Co

Total Fans 4, 178, 668 | Fashion | United States

Mountain Dew

Total Fans 4, 127, 589 | Food and Drink | United States


Total Fans 4, 024, 562 | Fashion | United States

5 Gum

Total Fans 4, 021, 548 | Food and Drink | United States

Forever 21

Total Fans 3, 972, 013 | Fashion | United States

Buffalo Wild Wings

Total Fans 3, 864, 310 | Restaurant | United States


Total Fans 3, 826, 717 | Sports | United States


Total Fans 3, 816, 027 | Retail | United States


Total Fans 3, 719, 656 | Restaurant | United States


Total Fans 3, 715, 460 | Sports | Germany

American Eagle Outfitters

Total Fans 3, 689, 587 | Fashion | United States


Total Fans 3, 679, 491 | Restaurant | United States


Total Fans 3, 659, 709 | Fashion | Italy

Sony Ericcson

Total Fans 3, 656, 301 | Technology | Sweden

Abercrombie & Fitch

Total Fans 3, 653, 314 | Fashion | United States


Total Fans 3, 604, 929 | Fashion | United States

Written and compiled exclusively for Webdesigner Depot by Debbie Hemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News and follow her on Twitter

Have you been creating Facebook pages for your clients? What have your design experiences been like?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Get the MediaLoot Premium Icon Collection for only $27



The Design Matrix: A Powerful Tool For Guiding Client Input

09 Feb

Advertisement in The Design Matrix: A Powerful Tool For Guiding Client Input
 in The Design Matrix: A Powerful Tool For Guiding Client Input  in The Design Matrix: A Powerful Tool For Guiding Client Input  in The Design Matrix: A Powerful Tool For Guiding Client Input

I used to think the beginning of a website design project was the best part. Hopes are high. People are full of great ideas. Nobody is disappointed yet. But as I gained experience, I found that learning about a client’s brand, competitors and customers doesn’t always give clear direction about design goals.

Brand discussions can generate goals like “be modern,” but they don’t necessarily determine how to accomplish those goals. Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards, which communicate a general feeling, don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.

Hey, You Got Math In My Art…

Sometimes the abstract nature of design is enough to make you envy the people over in accounting, with their definite answers and proven formulas. While the beauty of design is that it transcends the world of definite answers, introducing a little math in the form of design matrices can help you create better websites by providing a clear picture of where the website design is today and where it should go tomorrow.

Design matrices don’t require any serious math skills because they’re based on the coordinate system. Chances are you’ve seen a competitor matrix that ranks brands according to two key attributes on X and Y axes (for example, value could be plotted against profit margin). A design matrix is essentially like a competitor matrix but ranks the client’s website against competitor websites, and it uses design attributes (“clean” and “warm,” for example) instead of other points of competitive comparison.

Carmatrix211 in The Design Matrix: A Powerful Tool For Guiding Client Input
A typical competitor matrix ranks brands according to rational factors. (This example, which compares a few car models, was created for illustrative purposes only.)

Screenshot2 in The Design Matrix: A Powerful Tool For Guiding Client Input
A design matrix ranks website designs according to design attributes. (This example, which compares airline website designs, was created for illustrative purposes only).

Design matrices are powerful tools for determining the path of the website design process, because: they force you to determine two design attributes to focus on; they build consensus within a team; they guide the clients’ perception of competitors; and, most importantly, they lead to differentiated website designs.

The Art (And Math) Of Building A Design Matrix

Step 1: Gather Information

To build a design matrix, you will need to know the client’s core brand attributes and main competitors. You should also have a broad understanding of what the redesign aims to accomplish (from a design perspective): “the website is cluttered” or “our website is not engaging.” The good news is that information gathering is a normal part of the discovery phase.

A design matrix should not be the only piece of work involved in the discovery phase, but it can replace some other approaches. Creating or documenting a brand’s position and defining the key redesign goals are essential. However, a design matrix could potentially replace mood boards. A mood board is a collage or grid of images that capture the “feel” or “tone” of a brand. They are valuable tools for providing direction to new brands, but they provide a less concrete direction than a design matrix. If the brand is in its nascent form and needs broad high-level direction, then mood boards work well; but if you are working with an established brand or a client who prefers a concrete approach, then a design matrix is the best bet.

Brandposition in The Design Matrix: A Powerful Tool For Guiding Client Input
Document the brand’s position before creating a design matrix. (For illustrative purposes only.)

Imagespark in The Design Matrix: A Powerful Tool For Guiding Client Input
Image Spark is a great resource for creating online mood boards—particularly useful if you are working with a company that requires high-level brand definition.

Another common discovery activity that design matrices can replace is the “competitor website review.” Looking at competitors’ websites can generate lively discussion, but too often it either shifts the focus to feature sets instead of design direction, or it becomes a cherry-picking session for disparate design elements from a variety of websites that the designer is somehow supposed to mash together into a single coherent website design.

Create a design matrix that shows the current website in relation to competing websites. This way, you are less likely to get distracted by feature sets or be expected to combine all sorts of design elements. That said, if you are looking for an energizing group activity, competitor reviews can generate more brainstorming than a design matrix. Doing both is an option, but if you do that, then do the matrix after the walk-through of competitors.

Screenshot3 in The Design Matrix: A Powerful Tool For Guiding Client Input
Delta Airlines’ website.

Screenshot4 in The Design Matrix: A Powerful Tool For Guiding Client Input
United Airlines’ website.

Looking at these individual airline websites, rather than comparing them on a design matrix, can lead to a less design-oriented and more feature-focused conversation.

Step 2: Determine Your X and Y Axes

Narrowing down a design direction to two attributes can be uncomfortable for those of us accustomed to creative briefs that list a litany of brand attributes to guide our design. How often have we heard that a design should be “clean,” “inspiring,” “warm,” “engaging,” “approachable” and “trustworthy”? How do we even accomplish just two of these attributes? And if we must choose only two, how do we decide?

Understand that a design matrix is not intended to limit the final design to two attributes. That would be almost impossible. It is intended to illustrate the two most important attributes for taking the website design to the next level and differentiating it from that of competitors.

To determine your X and Y axes, ask yourself the following questions:

  • Of all the brand’s attributes, what will make this client stand out from the crowd? Which design traits reinforce those brand attributes?
  • What are the competitor websites’ strengths and weaknesses?
  • What does the design need to do better in order to accomplish the website’s goals?

The X and Y axes should not be nearly synonymous (for example, “warm” and “engaging”), nor should they be mutually exclusive (“innovative” and “traditional”). There should be a slight tension between the two attributes.

The airline websites, for example, are ranked according to how “clean” and “personable” their designs are. There is a slight, but not negating, tension between these two attributes. Clean websites can come across as cold if they don’t have a distinctive voice or warm color palette. Personable websites are often less functionally organized. Achieving a high ranking for both attributes is a worthy challenge, and stepping up to that challenge will definitely create a distinctive website.

You might find that you change the labels of your axes as you place the websites on the matrix (see step 3), but the above process should get you pretty close to determining what the final axes should be.

Step 3: Play a Little

You know the competitors. You have a clear idea of what is important, brand- and design-wise. You have determined your x and y axes. It’s time to try some things out.

Place all of the websites on your matrix as you would rank them off the top of your head. As you begin to place them, you will most likely rearrange some as you compare them to others. This is a natural part of the process because the matrix shows relationships as well as individual rankings.

Screenshot5 in The Design Matrix: A Powerful Tool For Guiding Client Input
I was influenced by Jet Blue’s overall branding and so originally ranked its website’s personality fairly high. Later, when I compared it to the Delta and Virgin America websites, I revised the ranking.

Design matrices do not have to be limited to ranking competitors. They can also show a client’s website’s position among affinity brands (i.e. brands with a similar “feel” and customer base). Mini USA and Apple, for example, might be considered affinity brands because they both exemplify modern design and appeal to similar customer types.

Step 4: Get Serious

Things will take shape fairly quickly, but there is a final step before declaring your design direction matrix done and dusted. Before sharing the matrix with the client team, make sure you can defend it. Show it to others in your agency and see if they agree with your placement decisions. Ask these key questions:

  1. Do my axes represent the two most important design attributes?
  2. Can I clearly articulate why I placed each website where I did?
  3. Will the redesign be able to get the website to the top-right corner? If not, what is holding it back?

If you answered yes, yes and yes (or yes, yes and yes if we do a certain thing…), then your website design direction matrix is ready to share with the client.

Creating Buy-In With Design Matrices

Everyone loves talking about design, but with everyone talking, we don’t always hear other ideas. If you show a client a design matrix before creating the initial comprehensives, then you will visibly and quantifiably show that you are on the same page; and because of that, you’ll likely be successful in the long run.

The design matrix will clearly show which websites you think best capture the desired attributes and where the current website falls into the mix. It is a tangible foundation for a conversation about design.

Invite the client to participate actively in this stage of the design process. Clients usually want to feel like they have had direct input in the design, and designers always prefer that the input comes sooner in a high-level, directional form (“The design feels cold”), rather than later in an overly specific form (“Make that element blue”).

Discuss the following questions:

  • Does the matrix address the two most important design attributes?
  • Do we all agree on the placement of competing and/or affinity brands?
  • Do we all agree on the placement of the client’s brand?
  • If we end up in the top-right corner, are we where we want to be?

Using a design matrix can be risky, mainly for one reason. Some clients have difficulty prioritizing the two most important design elements, and then they dig their heels in and declare that there are in fact four equally important elements. Hopefully, the matrix demonstrates how your choice of attributes distinguishes the website. If you meet with a lot of resistance, just create two matrices or conduct a competitor review (as discussed in step one).

Be prepared to explain your rationale and defend your position — but also be open to suggestions. Maybe there are good reasons to focus on different attributes, or maybe the team feels that the placements of some website are not quite right. Revising a design matrix is much easier than revising a design.

Truly Going The Distance

Creating a design matrix is a great first step, and getting client feedback is an awesome second step, but the most important step is to use the matrix as a resource as you design and when you present your designs to the client.

Ultimately, the purpose of a design matrix is to move a website design in the right direction. Specifically, move it to that space in the upper-right corner that represents the best of both worlds. As you design, continually refer to the matrix and see where your new iterations might fall on it.

Think about these questions as you design, and take notes for upcoming presentations:

  • Do the new iterations embody the key attributes?
  • Are they better than the competing and affinity brands?
  • How do they accomplish the design goals?

When presenting designs to a client, review key findings and recommendations made during the discovery phase. Before presenting your designs, review the matrix with the client, and revisit the matrix at the end of the presentation to show that progress has been made.

Training Wheels: A Step-By-Step Overview Of A Design Matrix For Cannondale

The following walk-through illustrates the design matrix process in its entirety and addresses the kinds of decisions that need to be made when creating a matrix. The exercise below is entirely theoretical. I do not work, nor have I ever worked, for any major bicycle manufacturer, including Cannondale. Thoughts about what design attributes Cannondale might strive for are purely my opinion. Thoughts about competing website design attributes are informed by looking at their websites and general industry expertise — just as yours will be.

Screenshot6 in The Design Matrix: A Powerful Tool For Guiding Client Input
How would you create a design matrix for Cannondale? (This example is purely illustrative.)

Step 1: Understand

For the purposes of this exercise, let’s assume that Cannondale has chosen you to redesign its website. Your first step will be to understand its brand, its competition and the desired attributes of its new website. Let’s also assume that you left the initial discovery meeting with this information:

  • Cannondale’s key competitors are Trek, Giant, Diamondback and Fuji.
  • Its brand is about performance, innovation and a superior craftsmanship that inspires riders.

When you ask about the desired design attributes, Cannondale’s representatives say the website should capture the sense of elation that comes with a successful bike ride. They also want the website to showcase technical innovation, dedication to quality and devotion to the individual rider. Your notes read, “inspiring, innovative, technical, individual, quality.”

Step 2: Determine Your Axes

The X and Y axes reflect the client’s most important and desired design attributes, but do look at competing websites before naming the axes; they will inform your direction and give you ideas about what would be distinctive.

Upon viewing the competitor websites, I found both Trek’s and Fuji’s to be “immersive” and “powerful,” with clean, bold imagery. Fuji’s was slightly colder and more “technical.” Diamondback has an inspiring home page, but the website loses steam and doesn’t showcase the individual bikes distinctively. Giant has a strong focus on teams and individual riders and helpful bike selection tools, but the design is flat.

So, how does all of this play into naming the axes and creating the matrix? Going back to your note about desired design attributes, we see that Cannondale wants to showcase technical innovation, which Trek and Fuji do well on their websites; Cannondale wants to inspire, which Trek and Fuji do through immersive imagery; unlike Giant, though, Cannondale doesn’t want to focus on racing.

At first, it may seem that “inspiring” and “innovative” would be good axes names, but those attributes don’t have quite enough tension. They are not synonyms, but there is no balance either. “Inspiring” and “quality” may come to mind, but “quality” is not a design attribute; it’s something the client wants to showcase (it’s an attribute of the product, not the design).

I chose “inspiring” and “technical” for the desired design attributes. “Inspiring” works because the client wants to inspire riders. “Technical” is a good second attribute because it captures innovation and product quality while striking a balance with “inspiring.” There is a healthy tension between the two words. Capturing both emotion and technical detail is difficult. Accomplish that balance and you’ll leave the competition in the dust.

Step 3: Place Websites on the Matrix

I always start by plotting all of the websites roughly where I think they fall on the matrix, and then I move them around as I consider the relationships between the websites.

I originally placed Cannondale’s website in the lower-left corner but, as I compared it to the other websites, I realized that it’s actually more technically focused than others, including Diamondback and Giant. That said, the Trek and Fuji websites are still more technical, with their bold product showcases and detailed imagery.

Inspiration-wise, the current Cannondale website seems to be on par with Giant’s: there is imagery of bikers, but it feels flat and diminutive.  Diamondback’s immersive home page raises it a bit above the others. Trek’s warmth and voice put it in the lead for inspiration. I originally had Trek in the upper-right, but I ultimately decided that Fuji’s website has a more technical feel to it.

The final matrix (below) is informative on many levels. It shows where Cannondale currently is and where the websites are that it needs to surpass in order to get to where we determined it needs to go. Naturally, the final design will have a unique flavor, but looking at the competing designs will partly uncover how to get there.

Screenshot7 in The Design Matrix: A Powerful Tool For Guiding Client Input
A design matrix informs the path of the design process.

Step 4: Consensus

This is a purely illustrative example, so I did not show this to a team (or the client) for feedback. Typically, feedback focuses on the desired design attributes (“Is this where we want to go?”) and the placement of all of the websites on the matrix. The most important thing is to agree on direction, of course, and then to determine the goal. The hard part is to design a website that gets there.

Step 5 (the Big One): Using It

The last step is not so much a step as a big stride. Once you’ve created the matrix, the important part comes: using it to create a better website. Make a copy for everyone involved in the project (including those in other disciplines) and have them put it up somewhere to serve as a daily reminder and motivator.

Refer to the matrix as you design. Are the decisions you are making moving you toward the upper-right? For example, if you were choosing images for the Cannondale website, ask yourself relevant questions:

  • Is this image inspirational?
  • Does it convey the technical expertise of Cannondale?
  • How can the design be more inspiring?
  • How can I better convey the technical passion of the brand?

As mentioned, revisiting the matrix when showing comps to the client will help justify your approach, but the real reason to create a matrix isn’t to sell comps or do a fun exercise during discovery; rather, it is to remind us of the path we are on. We could take so many directions, and going down a road that looks good but doesn’t take you where you want to be is all too easy.

Think of your design matrix as a compass. It’s not as precise (or cold) as a GPS; it’s an old pocket compass that wobbles a bit as you walk but still gets you to the summit.

Do’s And Don’ts

The beauty of design matrices is that they provide a new way to look at competitors and a tangible foundation on which to begin discussions with clients. They also enable you to play a little as you tweak the axes’ names and the websites’ placement to get them just right. There is wiggle room in the methodology and application, so have fun with it. That said, there are a few set guidelines worth adhering to for success:

  • Don’t be afraid to experiment.
  • Do get your ducks in a row. Verify the desired design attributes and the competitor and affinity brands with a client before proceeding, so that the matrix is relevant.
  • Don’t base your insights on home pages alone. A website’s design is more than the home page. Your matrix might use a home page screenshot, but include it only if it represents the overall design of the website.
  • Do share your toys. Get team input about the placement of websites on the matrix. It’s not an altogether scientific approach, but be as objective as possible.
  • Don’t carve it in stone. Be open to recommendations from clients. Changing a matrix is easier than changing a comp.
  • Do use it to sell your work. Present the matrix as part of your comp presentation in order to explain your rationale and sell your comps.
  • Don’t matrix and run. Don’t abandon the matrix after the discovery process. Refer to it regularly.

Enjoy the process of creating a matrix and of seeing opportunities to design a distinctive website for your client.

Further Reading

(al) (vf)

© Bridge for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , ,


Time-Saving and Educational Resources for Web Designers

18 Jan

Advertisement in Time-Saving and Educational Resources for Web Designers
 in Time-Saving and Educational Resources for Web Designers  in Time-Saving and Educational Resources for Web Designers  in Time-Saving and Educational Resources for Web Designers

Web design community is strong and hard-working. We have plenty of useful resources, tools and services created, developed and released every single day: apart from goodies such as free fonts or icons, there are also many educational resources and little time-savers that can significantly improve designer’s workflow. We permanently look out for the new projects and support them by presenting them on Twitter, Facebook, in our e-mail newsletter and, evidently, in Smashing Magazine’s posts.

Today we are glad to present one of such posts: an overview of handy new resources for web designers; most of them were released recently, but some of them are a bit older. Still, they were included to supplement the overview, making the post more comprehensive and complete. Please feel free to discuss the featured resources in the comments to this post. And, of course, thank you guys for creating and maintaining all these useful resources. Your efforts are deeply appreciated.

Useful Resources for Web Designers

Fonts in Use
This site presents a catalogue for real-world typography samples and innovations in branding, advertising, signage and publishing. The regularly updated collection of trends and case studies is commented on by typography experts and gurus from around the world. The sharp, interesting comments and discussions will keep you engaged, all backed up by real examples.

Fonts-in-use1 in Time-Saving and Educational Resources for Web Designers

Note and Point: Keynote and PowerPoint Gallery
Note and Point highlights the most beautiful Keynote, PDF and PowerPoint work on the Web, which happens to be mostly Web design-related, although various topics are covered. No doubt these presentations — which really do look that much better — might surprise you by the attention given to color, illustrations and typography.

Note-point in Time-Saving and Educational Resources for Web Designers

Free High-Quality HTML Email Templates
The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project. In case you use Campaign Monitor to send out newsletters, you’ll also get Campaign Monitor’s templates as an extra goodie. Mailchimp users can choose from the professional templates for Mailchimp.

45royale in Time-Saving and Educational Resources for Web Designers

The Grammar Cheat Sheet
Never mix up your dashes again, learn how to set quotations marks and remind yourself to keep paragraphs short and topical. Overall, this article is a nice little overview of suggestions that would help you improve the quailty of your copy. For a closer examination of what else might go wrong, check out “The Trouble With EM ‘n EN (and Other Shady Characters)” by Peter K Sheerin.

145-useful in Time-Saving and Educational Resources for Web Designers

FPO: For Print Only
For Print Only is a blog that is dedicated to everything related to pint design. FPO celebrates that print is not dead by showcasing the most compelling printed projects. Print is alive and well as witnessed by this well organized and inspirational resource.

Print in Time-Saving and Educational Resources for Web Designers

Graphic Atlas: History of Printing
The site is a virtual study collection that showcases printing processes from early woodcuts to modern digital print. The print-identification tool guides you through a number of explorations that replicate the experience of identifying prints using common tools. Among other things, you’ll learn about such printing techniques as relief, letterpress, gravure, silver-dye bleach, dye sublimation and direct thermal. The object explorer allows you to view two images side by side to compare traits across processes. Characteristics such as size, format, color, texture, sheen and layer structure are explained as well.

Graphics-atlas in Time-Saving and Educational Resources for Web Designers

Smarthistory is a free and open, not-for-profit art history textbook. The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. A comprehensive overview of the seeds that helped sew the graphic design field.

Smarthistory in Time-Saving and Educational Resources for Web Designers

The Photoshop Etiquette Manifesto for Web Designers
This site lays out a number of guidelines for creating Photoshop files and workflows that are conducive to productivity and team collaboration. By following these guidelines, you make it easier for others to work with your files, and more likely that your project will go smoothly. Some of the things included are common-sense (proofread before exporting), but others aren’t necessarily something you’d think of if you’re not used to collaborating or working on big projects (use folders, keep logos as vector smart objects). It also includes helpful illustrations for each example, so there’s no confusion.

Manifesto in Time-Saving and Educational Resources for Web Designers

Desks Near Me
This site features places all over the world that designers and developers might like to work in, be they offices or cafés. The website provides detailed information, including hours of operation and reviews. Some places charge a small fee for use, and many throw in a few goodies like food, drink and access to equipment.

Desks-near-me in Time-Saving and Educational Resources for Web Designers

Dark Design Patterns
Dark Design Patterns aims to expose these black-hat designs whose sole aim is to misdirect and deceive visitors. Anti-usability design patterns that are currently identified on the website include the “Roach Motel,” “Bait and Switch,” “Privacy Zuckering” and “Forced Information Disclosure,” among others. Examples of each are included, and visitors can add their own in the comments on each page. It’s a great website to show clients when they ask you to implement a questionable “feature” on their website.

Darkpatterns in Time-Saving and Educational Resources for Web Designers

The Anatomy of a Perfect Landing Page
Formstack explains how design translates to users and ten key landing page features that draw them in. A useful breakdown of elements to include in your designs and things to keep in mind during your design-work.

127-useful in Time-Saving and Educational Resources for Web Designers

100 Principles for Designing Logos and Building Brands
Inspiration can come from anywhere, but sometimes the simpler the better. From Brand Identity Essentials, here are some principals for designing logos and building brands. These cover example shapes, consistency, voice, meaning and flexibility.

126-useful in Time-Saving and Educational Resources for Web Designers

Design Is History
A wonderful reference site for all designers and provides brief overviews of a wide range of topics — for us, designers, it is improtant to understand where design originates from.

172-useful in Time-Saving and Educational Resources for Web Designers

NounProject provides a huge collection of highly recognizable symbols, available for free download and use. The designers are committed to quality in what they do, and so the icons are indeed designed very well.

153-useful in Time-Saving and Educational Resources for Web Designers

Ethics for Web Designers
Robot Regime is dedicated to ethics and Web design, and it discusses what our ethical obligations are — to ourselves, our colleagues and our clients. The site already features some nice pieces, including posts about fair pricing, misrepresenting yourself as a designer and giving clients what they want.

Robotregime in Time-Saving and Educational Resources for Web Designers

Politely Decline Speculative Work
“I won’t do free design work to win your business — here’s why” is a Web page that offers a stock letter you can send to clients explaining why spec work is bad for everyone involved. It’s concise and professional, and it presents clear arguments against spec work, with links to additional information. Plus, you can personalize the letter by adding the recipient’s name to the end of the URL.

Rfp in Time-Saving and Educational Resources for Web Designers

Type Tips
A nice short overview of quick useful tips on all things related to Web typography by Harry Roberts from CSS Wizardry.

160-useful in Time-Saving and Educational Resources for Web Designers

The website brings together lectures, screencasts and conferences from around the world. Both expert and novice developers and designers should be able to find topics of interest, whether it’s CSS and HTML5 or start-ups and creativity. Ontwik is free, and anyone can suggest content for the website; you can even submit your own lectures.

Ontwik1 in Time-Saving and Educational Resources for Web Designers

Design Moo
“Join together and share valuable free Web design resources.” This could be the slogan of this design community, created and curated by front-end developer Chris Wallace. The project is a network of designers and a high-quality collection of free design resources: fonts, icons, illustrations, patterns, textures and Web layouts. All goodies are tagged for easy navigation, and you can follow new releases on Twitter. You might want to check Boxtuffs and Premium Pixels as well, another websites featuring free high-quality resources.

Designmoo in Time-Saving and Educational Resources for Web Designers

Design Kindle: Free High-Quality Design Files
This site offers a ton of free high-quality design files that you might actually want to use, all without restrictions on personal or commercial use. Everything from design elements to images to full themes is included. Design Kindle doesn’t have a big library of files just yet, but more are sure to be added soon.

Designkindle in Time-Saving and Educational Resources for Web Designers

365psd: A Free PSD Every Day
Every day, this site offers a free PSD file for you to download. These files are almost all design elements that you can use in Web and application designs, including buttons, progress bars, navigation elements and more, and they are well designed. Currently, there are more than 300 days worth of freebies, all tagged, browsable and searchable.

365psd1 in Time-Saving and Educational Resources for Web Designers

Guidelines for Mobile Web App Design
This article presents a comprehensive list of links to official user interface and user experience guidelines from various manufacturers. The guidelines include samples, tips and descriptions of common weaknesses for mobile platforms such as iPhone, iPad, Android, BlackBerry, Symbian, webOS and Mee Go. Many of the guidelines focus on native application development, but they can be applied to design of mobile applications in general, too.

Mee-go in Time-Saving and Educational Resources for Web Designers

List of Freely Available Programming Books
Here is a list of programming books on programming languages or about computers in general with open-source licenses and others. If you’ve been searching for some freely available programming books on the Internet, this list will surely give you some good tips.

159-useful in Time-Saving and Educational Resources for Web Designers

Secure Password Generator
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

Passwordgenerator in Time-Saving and Educational Resources for Web Designers

This tool is a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 300 Photoshop shortcuts are available. Simply type the name of application in the search box, and it spits out a long shortcut list.

Keyonary1 in Time-Saving and Educational Resources for Web Designers

Let’s Swap
A place where artists and designers can swap art for free. The site is an experiment: if you are an artist or designer, you probably have something hanging around and you’ll be willing to swap it for something else. The site gives you the opportunity to do exactly that; just put out an open invitation and see what happens. Very interesting idea.

168-useful in Time-Saving and Educational Resources for Web Designers

Starting with Git: Cheat Sheet
After freshening up her git skills, Loma Jane Mitchell shares her ‘cheat sheet’ — the commands that she uses on a day-to-day basis when working with git. Also note that GUI tools and IDE plugins are available for Git, so it is worth taking a look at what is available for the development environment you use.

144-useful in Time-Saving and Educational Resources for Web Designers

Rails 3 Cheat Sheets
The site provides Rails 3 Cheat Sheets for Activemodel, Actionmailer and Actioncontroller, XSS protection and UJS, Activerelation, Bundler and Routing API.

152-useful in Time-Saving and Educational Resources for Web Designers

Bounce Rate Demystified
If you are doing business on the web and have Google Analytics set up for your website, it’s very likely that you know the bounce rate for your website. But, do you know anything about how it’s calculated, what your industry’s average bounce rate is or even what factors affect your bounce rate? Inspired by common questions, KissMetrics created this infographic to give you answers and some tips to help you improve your bounce rate.

136-useful in Time-Saving and Educational Resources for Web Designers

User Experience quotes and articles to inspire and connect the UX community.

178-useful in Time-Saving and Educational Resources for Web Designers

Quotes on Design
A growing collection of useful quotes by designers for designers and developers.

179-useful in Time-Saving and Educational Resources for Web Designers

Information Architecture Television features a collection of videos from around the Web that all focus on information architecture. Hundreds of videos dating back to 2008 offer a great wealth of information on everything from design thinking to usability.

119-useful in Time-Saving and Educational Resources for Web Designers

The Bazaar
On this site you can create galleries, upload your artworks and specify your products which you would like to sell. Once the buyer has checked out and has made the payment, your artwork is printed, wrapped and delivered.

148-useful in Time-Saving and Educational Resources for Web Designers

A Collection of Materials Related to Interaction Design
This IxD library provides you with an ultimate collection of posts, articles, PDFs as well as videos related to interaction design for you to read and gain more knowledge and inspiration.

164-useful in Time-Saving and Educational Resources for Web Designers

Pinterest — Catalog the Things You Love
Pinterest is a social catalog service. Think of it as a virtual pinboard — a place where you can post collections of things you love, and “follow” collections created by people with great taste.

169-useful in Time-Saving and Educational Resources for Web Designers

WordPress Snippets
WP-Snippets can come in handy when you’re designing a WordPress theme. Rather than start from scratch when building some functionality or another, why not grab a snippet of code that has already been tested? The website includes many useful snippets, from highlighting author comments to listing random posts to filtering the loop. Make sure to read the comments for each snippet because they could contain helpful information on whether the code works in certain WordPress versions.

Wp-snippets in Time-Saving and Educational Resources for Web Designers

CSS Terms and Definitions
This article discusses the consistency in the use of terms with reagrds to CSS.

143-useful in Time-Saving and Educational Resources for Web Designers

CSS Vocabulary
“I realized quite late that to say something meaningful about CSS, I would have to know exactly what the terms used means. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS.” A nice overview of common CSS terms and definitions and a good addition to the article “CSS Terms and Definitions” described above..

102-useful in Time-Saving and Educational Resources for Web Designers

BagCheck lets you share your personal collections and also lets you browse through other ‘bags’ to find out common hobbies or activities that helps you connect with people and their interests.

155-useful in Time-Saving and Educational Resources for Web Designers

ManyBooks: Repository of Free E-Books
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats. You can download classics such as Pride and Prejudice, as well as newer books such as The Gospel of the Knife, in formats such as ePub, Mobi, PDB and even PDF and plain text. Books are also browsable by genre, author and title. And of course, there is a search function.

Manybooks in Time-Saving and Educational Resources for Web Designers

Last Click

Should I Work for Free?
Who’s ready to stop working for free? Hopefully you are! If you have any doubts, consult this handy chart below. Start in the middle and work your way to your answer.

150-useful in Time-Saving and Educational Resources for Web Designers

Email Etiquette for the Super-Busy
In a recent blog post, venture capitalist Fred Wilson talked about his ongoing struggle with email management and the various solutions he’s tried, concluding: “Every time I make a productivity gain, the volume eventually overwhelms me.” It’s a familiar problem. We’re all extremely busy, and we all get too much email. So what to do?

123-useful in Time-Saving and Educational Resources for Web Designers

The Future of Advertising
An article on advertising; stating that advertising is on the cusp of its first creative revolution since the 1960s brings us to a new prespective. This involves the ad industry that just might get left behind. Click here to read and find out more. Very interesting read.

175-useful in Time-Saving and Educational Resources for Web Designers

Why Your Form Buttons Should Never Say ‘Submit’
When you see a ‘Submit’-button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A ‘Submit’-button describes what the system does well, but it doesn’t describe what the user does at all. The article suggests to stop using the wording ‘Submit’ on buttons and provide more meaningful, task-specific names instead.

122-useful in Time-Saving and Educational Resources for Web Designers

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,