DesignM.ag » design

30 Beautiful Multi-Colored Websites

Brant Wilson — Mon, 06 Feb 2012 16:52:13 +0000

In this post we’ve compiled some well designed colorful websites. Enjoy!! If you like these designs you might also want to check out our previous posts below.

Examples of Solid Colors in Web Design

Examples of Orange in Web Design

Examples of Purple in Web Design

besser-leben-mit-lehm

baucargo

art4web

werbeagentur-kopfnuss

Advertise here with BSA

40 Negative Space Logo Designs

Brant Wilson — Fri, 27 Jan 2012 14:51:12 +0000

Advertise here with BSA

In this post we have collected 40 well design negative space logo designs. Enjoy!! If you like these logo designs you might also want to check out our previous posts below.

40 Creative Logo Designs

28 Clean and Creative Logo Designs

24 Clever and Unique Logo Designs

Three Nuts General Contractors v.2

Texas Wine Logo Design

SHIFT

Dolphin & Seal Logo Designer

Negative Reality Logo Design

Mouse Universe Logo Design

Fantom

The Small Garden Logo

Banana Bird

Wineforest

Shift logo

Beat Fettish – Final Logo

Advertise here with BSA

40 Fresh And Creative Print Ads

Brant Wilson — Tue, 13 Dec 2011 15:41:43 +0000

Advertise here with BSA

In this post we are featuring some fresh and creative print advertisements to inspire you. Enjoy!! If you like these advertisements you might also want to check out our previous posts below.

30 Hilarious Print Advertisements

30 Creative Print Advertisements

WWF Desertification: Elephant

Aruba: Flippers

Top Gear Magazine: Ice-Cream

Carlton Mid: Lying Down

Alerj: Rainforest protection

Colins Guitar Repair: London Calling Pillow

Mercedes-Benz: Mirroring

Mercedes-Benz: Hydrant

Mercedes-Benz: Town musicians

Sopalin: The art of cleaning, 1

McDonald’s: Large Coffee, 2

Etisalat Yellow Pages: Stand Out, Car rental

Historica-Dominion Institute: Remember 11/11/11

Sears Optical: Match

Sears Optical: Clover

Jobgroup: Wave of Work

Denver Ad Club Call for Entries 2011: Great Ideas Can’t Hide, 3

Denver Ad Club Call for Entries 2011: Great Ideas Can’t Hide, 1

Smart Bleach: Bacteria

Yamaha Parts and Accessories: Help

Pictionary: Tree

Daimler AG / Mercedes-Benz: South Africa

Audi: Labyrinth

Preparation H: Cheeks

Art Director’s Club: Hovering

Microsoft Xbox 360 Kinect: Couple Contortionist

Terra Travel: Architect

Keep Australia Beautiful: KAB Ripples Chip

WWF: Circle of life

Criterion Knives: Fine Cut Knives, Celery

AWARD: Get Your Name On It, Creatives Office

Shera Sound Proof Windows: Party Room

Vilnius film shorts: Hunter

Bröker Security Systems: Burglars, Horn

Pandelis Restaurant: Oriental Dishes

Calgary Food Bank: Corn

Sheridan College: Photography

Beko TV: USB recordable TV, 3

Shera Sound Proof Windows: Living Room

Leo Burnett France: Creative calendar

Advertise here with BSA

32 Nice Event Websites

Brant Wilson — Fri, 25 Nov 2011 04:58:50 +0000

Advertise here with BSA

Today we are featuring 32 nice event websites. Enjoy! If you like these designs you might also want to check out our previous posts below.

38 Beautiful Ecommerce Websites

40 Beautiful Illustrations in Web Design

voltagefashionamplified

Advertise here with BSA

26 Responsive Web Designs

Brant Wilson — Fri, 23 Sep 2011 18:48:56 +0000

Advertise here with BSA

In this roundup we are featuring some amazing responsive web designs. We have also included a few tutorials that will help you learn more about responsive web design. Enjoy!!

2012.newadventuresconf

Tutorials

Working with Media Queries

CSS3 Media Queries

How to use CSS3 Orientation Media Queries

Adaptive layouts with media queries

Adaptive & Mobile Design with CSS3 Media Queries

Advertise here with BSA

A Practical Wireframe Primer

Shawn Borsky — Mon, 12 Sep 2011 03:38:14 +0000

Advertise here with BSA

In the current design atmosphere , I hear the term wireframe being thrown around a lot more than it used to be. Over the last few years, wireframing is a process that has endured a lot of misunderstanding and has been become much more widely known as a software and web design methodology. I’ve begun to notice that the concept is warping and not for the better. This twisting of the terms is making it difficult for newer designers and students to understand the real application of the process.

Wait, whats the problem?

Recently, I gave a talk at a design school and I had a few students ask me about wire-framing and their mental model of it was pretty far off base. Their concept of wireframes included design, finalized layout, and a number of aesthetic decisions to name a few of the inappropriate things they considered part of wireframes. The worst part : they didn’t even want to do it. These students just knew it was a step they were supposed to do but didn’t understand why it was so useful. They just accepted it as step in the process and breezed through it to get to the fun look and feel parts. This was troubling to me. At first, I thought it may have been an isolated incident, but more and more I have been noticing that the workplace application of the process is suffering due to a bit of incorrect and popular saturation among clients, new designers, producers, product designers, etc. Wireframing is an essential step in the web design process and it would be a shame if up-and-coming designers did not learn to love it.

Wireframes are blueprints

It interesting that designers will understand that complex structures such as buildings or cars require careful planning and architecture but then take a similar ideas for the web industry and barrel into them with little or no planning. Granted, a website is not a car, it is still a substantially complex undertaking and leaving out careful planning and structure is the recipe for a lot of wasted time, work and money. I promise I’ll get to the practical implementations but first, part of the initial battle is making sure everyone understands what a wire-frame is and what it is for.

Use the metaphor

The blueprint is my favorite metaphor for wire-frames because no person thinks of a blueprint as a rendering of what the building will look like or uses it to make design or aesthetic decisions. It is purely a map of function, priority and information. Perhaps more importantly, no sane person thinks you can a create a building or car without a blueprint. That’s a healthy attitude.

Wireframing is not…

Before you begin to start using wire-frames in practical situations you have to know and be able to explain to clients, employers and colleagues what wire-frames are NOT for:

Wireframes are NOT designs
In fact, wireframes should be completely devoid of font choices, color, pictures, logos, etc. Most people think visually and it is extremely common to think that a wire-frame is a intended to convey design. It is extremely easy for a non-designer to think or act like wireframes reflect final designs or placements. Don’t confuse the function by putting visual distractions on your wireframes. Remind them: there is little visual fidelity, wire-frames are about working through functional issues and organizing information.

Wireframes are NOT final layouts
Another common belief about wire-frames is that the designer is just going to come in and lay a skin over the top of the frame and BAM! the site is finished. It is clear by the difference in many designers that it is nearly impossible to separate the final effective layout from the aesthetic design. But, that is a different stage and it can be stifling and disastrous to try and cling to a wireframe layout.

Wireframes are NOT prototypes
There is actually quite a bit of confusion between wireframes and prototypes. Its surprising since they are pretty radically different tools in the process. Simply, wireframes are for organizing information and prototypes are for evaluating interaction. While wireframes and prototypes can have similar levels of visual fidelity to the final product they are really completely separate steps with fundamentally different objectives.

Take the time to establish the basic goals and purpose for building wire-frames with your clients and teams. It will always get you off on the right foot.

Using Wireframes

As I mentioned, I have heard from a shocking amount of novice designers and students that they do not want to wire-frame, but they know they should. A few have even told me that they don’t see how it helps them. Absolutely, there is no reason to work within a step of the process if it doesn’t serve any purpose. Fear not, wireframing is one of the most purpose driven and useful pieces of the design process.

Let’s get practical…
In an effort to fulfill my previous promise and give a springboard for production application of wireframing beyond the conceptual : I am going to detail a few main aspects and purposes of wire-frames and give practical uses and action items that I have used in successful client situations.

Pure Usability

Wire-frames are one of the most effective methods to work through usability testing and ideas. Keep in mind, we are taking about usability NOT user experience. A common mistake is to think that Usabilty = UX. It does not. But, that’s really whole other discussion for another time. However, it is important to take away that usability is simply the measure of how easy it is to use a product. Which is a measure of function not design or experience. In a final production situation, sometimes it is difficult to separate the easy of use from the other elements that are at play in the overall experience. When you chose to attack usability while its out in the open you will not be distracted by other elements.

Practical Usability Tips:

Walk-through a conversion path : Map out every path that a user can take. Map how many steps and how if it is difficult for the user to get to where you want them to go.
Test system language : Does every member of the team from developer to client understand what the terminology means without explanation?
Map out user tasks : Using the wire-frame, go through each step that a user needs to take to complete a task via the information only. This can expose fatal site architecture issues early.
Check for error cases : Wire-frames are a great way of helping designers and developers prepare all potential error cases and be ready with custom, informative and helpful error messages. When you know exactly where each error came from, you can create a check-list to help return the user to a usable recovery in each case.

Detail Site Features

More often than not, clients, managers and product developers have an extremely macro approach to the design. In short, they don’t really have a specific list of features. They are more interested in the big picture and that is really a problem for designers and especially developers. Wire-frames are an effective method of matching every problem with an actionable solution. Many times , there are simple communication issues that arise between the verbiage being thrown around about what a feature actually does. By visually exploring and explaining the features it maps out the scope of work and gets everyone on the same page. You will be surprised at all the details that might have been overlooked or simply not considered.

Practical Site Feature Tips:

Do a deep dive on each feature: Don’t just use a box to communicate a feature like a photo gallery or map. Dive deep and list out each element that makes that feature work and where it needs to connect to the site map. Write notes on the specific connection and exactly how and where it gets its data from. The more specific you are, the more effective the list will be.

List out relative content limitations: Many designers overlook relative content limitations like text strings, amount of items, overall screen real estate , etc. No one expects exact measurements, but spending the time on wire-frames to determine the reason range and limitation of content allows you to plan for scalability. Discuss with the team and write down roughly how long a title will need to be, how many images will you have, will the content need to scale, and how much will it need to scale. You’ll thank yourself when you don’t have to go back to the drawing board in mid production. It seems superfluous, but you will be glad you have it.

You’ll thank yourself when you don’t have to go back to the drawing board in mid production.

Visualize Architecture

It can be overwhelming and mind-boggling for some members of a team to look at a site architecture when they are well…not site architects. Especially when projects become enterprise level or simply filled with content that site map and information structure will get increasingly complex and abstracted. The architecture is the underlying structure and in and of itself is heavily conceptual. Wire-framing is the first step and beginning to connect the concept of the information to a tangible product.

Practical Architecture Tips:

Illustrate Navigation: A tangible place to start when visualizing architecture is to visualize the relationships between the navigation pieces as well as the tiers of navigation. Wire-frame out the top level, secondary and local navigation systems and make sure to detail how they connect to each other. Explore what methods of listing or illustration are ideal for the information detailed in the site map.

Visualize Steps and Exits: Many times the screen design can feel disconnected from the overall site map. To make sure that no structural paths can lead to dead-ends or trap the user : An incredibly useful exercise is to use the wire-frames to compare to the architecture map and record on each screen, how the user can exit, proceed or move backwards. I recommend using Mind-mapping software such as Freemind.

Conclusion

This is only small primer on how wire-frames are an essential , powerful and time saving part of the design process. The practical action tips in this article are a springboard to build a useful wire-frame step in your development process. Many designers have the tendency to dive right into designing look and feel, cool features, and graphics. Take a step back and remember that websites and software are complex ( even the simple ones). Proper planning is not just a formality but the most important step you can take. Getting friendly with wire-framing will build awesome team communication and facilitate solid, professional and well-planned projects.

Advertise here with BSA

38 Beautiful Ecommerce Websites

Brant Wilson — Thu, 08 Sep 2011 15:11:03 +0000

Advertise here with BSA

In this collection we have compiled 38 beautifully design eCommerce websites. If you like these websites you might also want to check out our previous posts below.

Showcase of 30 Well-Designed E-commerce Sites

Design an eCommerce Website in Photoshop

Advertise here with BSA

35 Free Icon Sets

Brant Wilson — Wed, 24 Aug 2011 15:38:24 +0000

Advertise here with BSA

In this roundup we have collected some high quality and useful icon sets. Enjoy!! If you like these icons you might want to check out our previous posts below.

43 Free Social Media Icon Sets

25 of the Best Blogging and Social Media Icon Sets

Glossy: Free Icon Set

48px web iconset_226 icons

Social fries icon

Kaching – Exclusive Free eCommerce Icons

3D Glossy Icon Set: 20 Free Icons (with PSD)

Webtoys 50 icons

Retro Candy: Free Icon Set

SocialMate: 28 Free Social Media Icons (Includes PSDs)

Simplito: A free social icon set

iconsweets2

Crayon Cute Korean icons

8 Popular payment icons

Cutie – 20 High Quality Web Icons

48px Icon Pack: Pixel Perfect Collection

Basic Rounded – Free Iconset

Mobile Phone Icon Pack

Monochromatic Iconset _1

Monochromatic Iconset_2

48 FREE 16×16 Pictograms

100 Stamp-Like & Vector Social Media Icons

Hand-Drawn Web Icon Set with 247 icons Free Download

Vector Icons: 60 Free Social Bundle Vector Icons

40 Free Icons: Shopping Cart and Basket (PNG, PSD)

Plastique: Over 400 Icons and counting

Advertise here with BSA

5 Proven UX Strategies

Shawn Borsky — Thu, 18 Aug 2011 14:25:20 +0000

Advertise here with BSA

Whether dealing with large corporations, game developers, small businesses or a sole proprietor, most business goals tend to amount to the same needs. User experience is an area that touches almost every single business problem. While every project comes with its own unique situations, there are a few tried-and-true user experience techniques that just work well and always produce results. Here are my top five proven UX strategies and techniques:

Focus on key experiences

A major tendency of designers and clients alike is to think too much about particular elements and focus on smaller details. Many times it’s better to not spend too much time focusing on one specific element. I know this seems counter-productive, but hear me out. Remember, user experience at the end of the day is how the user remembers the experience. It may seem like a minimal differentiation but it’s incredibly important. Human memory is a bit flawed in the recollection department. The user’s mind is wired to remember experiences in a specific way. In a manner of speaking, people use landmarks in their memory to reconstruct experiences. These landmarks are generally referred to as key experiences. Key experiences is a whole subject in and of itself, but the quick bullet points to focus on are:

First Impressions – The starting point of a memory is often potent and vivid as it marks a transition between the user’s simulation or expectation of the experience and the reality.
Peaks or “Wow” moments – These are points of specific unique experiences and points that are consistently delightful to the user. These are often moments when the user’s expectations have been exceeded. These moments help bind the user’s sense of meaning and enjoyment to the experience. Simply, people enjoy being right or getting more than they planned for.
The Ending – The ending is arguably the most important key experience since it acts as an overall outcome to the previous key experiences. The ending tends to be a major reference point for a person to use because it holds the lasting impression of the experience and in general filters into the other pieces of the memory. Short version: If it ended badly, the user is likely to remember all of it to be bad.

It is easy to get caught up in designing pieces of the puzzle that do not net much return. When you consider how the user will remember your product or service, then details such as the size of the title, what is actually said, or where it was positioned do not amount to much.

Set Expectations

Designing key experiences is often about managing expectations. Expectations frame the whole experience. Humans tend to believe that we are fantastic at predicting outcomes, and time has shown that is not quite true. In any case, people do not like to effectively be wrong. It changes comfort to confusion and anticipation to anxiety. The good news is that most products and companies are focused on specific goals and purposes. So it is not impossible to make reasonable approximations about how the user will be thinking about the product or service. The surest way to set up correctly is to immediately and confidently set the expectations for the user. Simply put, tell the user what they will get and how they will get it.

In the example below, 37Signals does not mess around. They immediately tell the user what to expect from using the Backpack product.

MailChimp provides another successful example of setting expectations. Right off the bat, Mailchimp tells the user: “Easy E-mail Newsletters.” This tells their users what they will get and how they will get it.

Words are cheap and users know that. What is not cheap is imbuing those words with meaning. Users don’t take meaning lightly, they respect it and most importantly enjoy it. Building words with meaning is easy; just fulfill the promise. Setting expectations does not have to be detailed or complicated. In fact, simple and clear promises are generally easier to keep. Clarity and brevity is also a mark of confidence. Usually, if there is confidence, it’s for a good reason.

Be Clear

In all the complexity of building a product and providing a service it’s easy to accidentally add layers of complexity. In many cases, designers and clients end up adding more confusion by trying to simplify. Over the years, I’ve heard various tips about using less text, keep clicks to a minimum, and making interactions “intuitive.” The fact of the matter is that clicks and amount of time a task takes have little to do with good experiences. Study after study has proven that a user will have a great experience as long as they are able to easily understand what they are doing and enjoy doing it. Choose clear, straight-forward cues even if it may increase amount of time spent, amount of text, clicks or what have you. A user who understands the situation is always happier than a user who is lost.

In the example below, Starbucks is clear about what their navigation links cover. Each link has a single word that tells you what the section is, but it also has a few keywords under the main link to tell you what that section covers. They answer most user questions while they are scanning the navigation. They kept it simple and clear. More text, better experience.

Speed it up

Users will never complain that something is too fast. That would be the rough equivalent to claiming it was too convenient. People are all about “instant” gratification. The closer to “instant” the better. Products and services are usually about completing a goal or task. Subtext: your user wants to achieve something. As user attention spans are dropping and demand for speed is increasing, one of the most sure-fire ways to produce better experience is to make it faster. If the time or budget allows for speed optimization versus a new feature, speed optimization will almost always net a substantial improvement in retention and user experience. Basically, getting what you want fast is fun.

Not only does speed create happier users but speed guarantees you will have more users right off the bat. You can’t create a memory if you don’t even start one. People get impatient and they will leave if they are frustrated. But why are they frustrated? Back to expectations: the user expected a certain level of speed, when the expectation was not met they reacted negatively. There is no question, speed is one of the most important factors to a user: Gomez and Akamai Survey on Speed. Contrary to what you may be thinking, speed is does not make a product easier to use. Faster speeds make it more fun and pleasurable to use, and that is an incredibly important distinction.

Reach beyond usability

As is the case with increased speed, the ability to use something is not the only factor in a positive experience. Usability is a term that tends to come up a fair amount in user experience design. As usability is certainly a factor in good UX, it isn’t surprising. But often people interchange usability with user experience, or consider usability to be the most important factor. Usability is focused on providing an easy path to the user’s goals. Usability is functional but not inherently enjoyable. However, good experiences are engaging, meaningful and enjoyable. These are factors that reach far beyond the simple ability to complete tasks without difficulty. Working towards delight and happiness in product and service designs goes a long way.

Think about how many products and companies provide the same service but have drastically different experiences associated with them. It is not simply usability that makes an Apple device net better experience than a Blackberry or Microsoft device. Can you achieve your task on both devices? Of course, but Apple makes it enjoyable and fun while Blackberry and Microsoft tend to focus more on the goals of productivity and task completion. A simple visual survey of two of the devices shows you that Apple devices care about more than just the functionality.

Conclusion

I have given you a few overall strategies and techniques that have solid history of success and have insurmountable data to back them up. As a UX designer it is important to remember that there are no magic bullets, especially in user experience. UX is truly the sum of the parts the whole. Every single detail, part, person and approach factors into the minimal memory that forms the user’s experience. When we focus on making key elements of usage smooth, expected , engaging and pleasurable than great user experience is a sure-thing. But, if you are in a crunch, whether via limited resources, time or experience these overall strategies are a fantastic place to start.

Advertise here with BSA