Archive for the ‘Design’ Category
Take a Step Back to See the Big Picture
I find that when you’re working on a web design — or even any other project involving typography and layout — it helps to squint or look at your design from a distance. What you want to do is to squint or go far away that the content would start blurring.
When content pieces blur together you begin to see how whitespace separates them into sections and groups. You can’t read the text itself, but you can see groups of text and the various sections that you’ve laid out.
Well… that’s what you want to see. If you see one big mess then it means your whitespace (the empty space between elements) isn’t doing its job.
Let me illustrate this with an example. Here’s a site (Listmixer) where whitespace usage could be improved:
If you squint hard enough so that the contents begin to blur we’ll get something like this:
Fighting Perfection
If you’re like me, you probably often find yourself never fully satisfied with your work — always making tweaks and changes, always finding things you don’t quite like and reworking them. This applies to a lot of creative endeavors — perhaps you’re working on an article for your blog, putting together a report or writing an important email.
The thing is, even after making changes, there are still things you can tweak, things which aren’t quite perfect yet.
Manage Focus Effectively Using Contrast
Most written content online is split up into various elements. For example, a blog post has the text body of the post, the headline, the author, the date, the comments link and so on. Not all these elements are equal in importance and there is a tool we can use to give the key elements more weight. This tool is contrast.
Forget the Wireframes, Throw Away Your Boxy Layouts — Design BIG!
Thinking outside the box can make your designs “pop”, and having good ideas can help you become successful — but what if you could not only think outside the box, but play with the box, kick the box, smash the box all over the place.
The secret is to design BIG!
A Guide to Choosing Colors for Your Brand
One of the key elements of building a strong brand is color selection. Every color has a different feel and various associations. By choosing a color or a combination of colors for your brand identity, you will take on those associations. Colors will evoke certain emotions and feelings towards your brand so it is vital to choose a color that will represent your identity effectively.
Use Whitespace to Indicate Relationships Between Content Elements
One of the most important tools in a designer’s toolbox is whitespace. Whitespace is just that — it’s space between various content pieces, like paragraphs, headings, buttons and so on. This space can be tweaked to achieve different effects — such as to separate elements apart from each other by increasing the amount of space or group related things together by tightening it.
It’s also one of the things that’s easy to mess up if you stop paying attention to it. Here’s a segment of the comments section taken from Ryan Holiday’s blog:
Can you tell which person made which comment?
The Function of Rounded Corners
Igor Asselbergs of Livelygrey has written a very interesting post about rounded corners a while back — I haven’t read this sort of thing anywhere else so I just have to reblog it. What’s the function of rounded corners? We use them simply to add a bit of eye-candy and improve the overall aesthetic of our websites and applications, right?
Synchronized Style: Fusing the UI and Hardware Aesthetic
One important element of user interface (UI) design is its aesthetic — the way it looks and feels. But what dictates this cosmetic appearance? One way to design the look of the UI is to infuse it with the feel of the hardware it runs on. Style the UI in the same fashion you create the hardware — give it the same feel and character.
Macintosh and OS X
One company that successfully practices this method is Apple. Here’s a picture of a G4 Power Mac with an old Apple Cinema Display next to it:
These were made by Apple several years ago, when they released the OS X operating system. The aesthetic of this product isglossy, transparent plastic, stripes, smooth edges and light grey shades.
Don’t Copy a Design — Steal It
Copying someone else’s work will only give yours a chance to become as good as the one you’re copying — and that’s the best case scenario. A copy will usually never be as good as the original because it always remains one step behind. Even worse, at the hands of a novice designer a copy could end up looking like a cheap imitation, lacking the finesse and flair of the original.
No — don’t copy that design. Steal it.
Using Light, Color and Contrast Effectively in UI Design
User interface (UI) design is both an art and a science. Artistic talent comes in handy when coming up with an attractive style and aesthetic, but at the core of UI design lies logic and method.
Very basic things like light, color and contrast are often overlooked, which can negatively affect the UI by misdirecting user’s attention and not providing enough focus on the things that matter. Here’s a quick overview of how to use each of these elements effectively.