October 17th, 2009 admin Location: Raleigh, North Carolina
You might be wondering what is the purpose of this post. And let me explain where I am coming from before I start. Lately I have seen that a lot of design tutorials focus on teaching technique, not decision of technique. In other words, they teach you how to do something, but they don’t teach you why they decided to use that technique in the first place.That’s what this post is for.
Obviously, the reasoning behind design is a very large topic and can’t be covered completely here. But this should be taken as an introduction to meaningful design.
White Space
Design usually is associated with several elements like shape/type, size, placement, etc. One of the most important decisions for a designer is white space. Many designers have a lot of trouble not filling up the canvas. Why? Well, I guess some feel that if the canvas is not full that the client is going to think that they are lazy. And this is true sometimes. However, is harder for a designer to abstain from adding more and more.
The main question that I try to answer in regards to white space is: Is this the most minimal way of powerfully presenting the idea?
Lets take a look at an example:
I am trying to illustrate the word Design in a white square.
First Example
So far so good. It looks good and it seems like indeed is minimal enough however I feel like the white space itself is not adding to the design. So lets go ahead and iterate in order to modify the white-space:
Example 2
Can you tell what changed from example 1? First, the right margin length is equal to the height of the font. That gives the sense of order and purpose for that margin. Second, the bottom margin is equal to double the distance of the right margin. This creates a point of interest while keeping it organized. Finally, the spacing between characters of the word Design (the kerning) has been adjusted to make the word appear more as a cluster – an object. Now, we have a background and a subject that are clearly defined and separated and they have a relationship.
To finalize this example I decided to replicate the overall white-space shape, invert it and add it to the corner of the word Design to add balance to the message.
Example 3
Now, in this example we have very little background to make design decisions. But in real life examples, as a graphic designer, you would have a client that has a market to satisfy and a product to sale. That should strongly drive your design decisions.
Final thoughts: How can this translate into an active recommendation that makes your design better? Ok, next time that you sit down to layout ask the final question about your white space and how it is adding to your design and if it could do a better job.
I hope this helps and thanks for reading.
Alex Centeno +
Posted in Design Tutorials | Comments Off
December 13th, 2008 admin Location: Raleigh, North Carolina
These days I have seen lots of people writing about tips on how-tos. Now there are great tutorials out there for web designers trying to improve their design techniques. Unfortunately what I have found is that most of them start from scratch and explain the techniques from a building perspective. Not that there is anything wrong with that approach. Simply put, I am writing this post but instead of building the techniques I will be analyzing three excellent examples.
TIP 1. Use Color, Position, Distance and Alignment to portrait importance. In figure number one, you can see how the designer decided to use 3 different colors in one paragraph of text! The white color automatically gets less importance, the yellow text gets a nice accent and then finally the call to action is found in red (which is an excellent color for action).
Use of Color to denote difference.
TIP 2. Mantain your number of hues to a minimum. The more color that you use the more time a common user would take to decipher what is important. In order to improve usability you want to color code your actions in a way that becomes automatically intuitive to do something. For the most I would say use 3 hues, then you can add another 3 shades or 3 lights to those shades. My favorite is to keep websites to almost a monochromatic scheme and then create accents with a split complementary or even a complementary hue. Unfortunately as I progress towards finishing the design, I end up adding other hues; I have to force myself to change extra hues for shades of the same hue.
Example of a website using a limited amount of hues.
TIP 3. If you decide to go with sharp angles then go with sharp angles. If you go with rounded corners then be consistent as well. As part of the WEB 2.0 trends we have seen lots and lots of design that use rounded corners. If used properly, rounded corners look really good and make design look softer and more inviting. Unfortunately the entire experience can be thrown to the trash can with just one thing: inconsistency. The secret really is not so much having rounded corners, the secret is to maintain those treatments across the different sections of the design. As a counter-example check out image number 3. This designer decided to only use sharp angles (including the pictures). That makes the design so powerful that it immediately makes a positive impression.
Example of designer using sharp angles with consistency
That is it! I hope you guys enjoy this tutorial and really hope that it helps improve your design and gives you at least another point of view.
Until next time,
Alex A. Centeno MBA.
Digital Media Director
Merkados™
Posted in Design Tutorials | Comments Off
October 23rd, 2008 admin Location: Raleigh, North Carolina
Many people often ask me how to properly install the Google Analytics javascript tags in their own site.
Read the rest of this entry »
Posted in Online Marketing Tutorials | Comments Off
