graphic

The Rules of Responsive Web Typography

Posted on by Mario

typography

Have you ever seen a text in a website that is easy for you to read that does not tire your eyes when reading it? If you have, then you have seen an art called Typography. What is typography? What kind of typography that is properly arranged?

The right kind of Typography
For a web designer, typography is the art of their design works. It is the science about the appearance of text. The purpose is to not only make the words look attractive enough to draw a conversation, but also helps text fulfill its purpose of communication. Therefore, to fulfill this purpose, the typography should convey appropriate emotion, so that a text can be easy to read. Then, how do we create a text that embodies emotion, yet easy to read?

Here are several factors you might need to know:

The Art of Readable Text
No other words can beat the art of readable text, and a readable text means getting the right size for the font, leading and measure.

You can use the following guidelines to ensure you have the right size as mentioned above:

  • Make sure it is easy to read
  • Set the line-height, the font-size, and the text width (typesetting)
  • Begin typesetting with a page that contains users’ needed information
  • The page should contain multiple elements, such as h1, h2, h3, body text and captions
  • Estimate the distance between readers’ eyes and the screen for different devices
  • Once everything is settled, start by selecting font-size
  • Measure the line-height
  • Test your typesetting choices with your audience
  • Make sure everything is right and suitable
  • Continue setting the sizes of other elements after finishing with typesetting the body text.

While getting the best result for the typography is important, it doesn’t mean it has to be perfect. Just do the best to convey your passion in your work.

Typesetting Other Elements
If you happen to choose the font-size for elements like h1 and h2 visually, you may need to reconsider it for these scales can’t be directly used for the web because they are built for print design. Therefore, you can use a modular scale. Construct it with the body test you’ve decided on and multiply it by a ratio numerous times until you get a scale. After constructing the modular scale, you can typeset the rest of your elements, picking a number from the scale as your font-size; then do the same process for the leading and measure setting, until you get a balance of readable elements.

Vertical Rhythm
Next, arrange the individual elements using a technique called vertical rhythm. In order for one element to flow harmoniously into the next, we need to adjust the thing that joins them up: the white space. This white space should be large enough to distinguish one element from another, but it should be small enough, so that the flow isn’t broken.

In order to get enough white space, you can use a multiple of the line-height value of your body text because we naturally recognize white space patterns within text. You can set the white space between elements to a multiple of the base line-height, and set the line-height of all other elements to a multiple of the base line-height to use the right vertical rhythm. Values like 0.5x and 1.25x of the base line-height can give you more flexibility.

Baseline grid, yes or no?
Where there is vertical rhythm, there is the concept of a baseline grid inevitably comes into the picture. Although it is helpful, it can be difficult to get the right vertical rhythm for beginners. Baseline grids can’t work perfectly on the web because the math in typography contains subpixels (like 24.8px) and the subpixels are handled differently.

Typography for Multiple Screens
There are three things needed from a design perspective. First, the distance between a user’s eyes and their screens are different depending on the device used for that. The larger and the wider the screen and the device, the more you need for the font sizes. Second, you need consistency in the proportions between the body text and other elements. When you increase the body text size, you have to increase the sizes of all elements as well. Third, you should increase the font-size of specific elements through picking a different number from the modular scale to control the visual hierarchy.

That’s all you need to learn! To sum it up, typography is the art of making a grandiose website that will not only make people effortlessly understand the texts, but also creatively convey the passion in creating it.

3 Myths About Designing for Women

Posted on by Mario

5 Myths about designing for women2

91% of women says that many advertisers haven’t comprehended they wants. This is mostly because many marketers are still neglecting these facts, and create campaigns which mainly focus for universal gender. So, if you want to attract more female buyers, you need to create a good design that can influence their decisions, but before having knowledge about design for women, you may need to know some myths about them.

Myth 1: Women need their own gender-targeted websites.

Some companies may think that women need their own gender-targeted websites, one of them is Dell. Several years ago, Dell computers launched its girl version, named Della, a website pitching their new lightweight notebook computers. This site is dedicated to women, so Dell makes the packed with imagery of women and their laptops doing many of popular “female activities”, such as meditating in field, drinking coffee, and browsing the ‘net with their girlfriends.  However, the respond is not as good as they are expected, so dell quickly changed some of the site’s languages to be less patronizing.

At some points, creating a product for a specific gender may not be a good idea as it will become a mistake of generalizing each segment, turning to commonly-held stereotypes.

If you, as web designers want to create a site that will be appreciated by women, you can learn from Apple, as it creates apple female friendly. It translates into the use of white space and fewer dividing elements or boxes if you want to design a site that appeals to woman.

Myth 2: Sites for women should be Pink

Opposite from the example above, Apple and Dell , which the products are generally aimed for every gender, if you create a product which is aimed only for a certain gender you can use a color that can be best represented their gender, such as Victoria Secret website that uses pink as part of their branding. VS website tastefully uses pink as an accent color rather than an all-over palette.

But this doesn’t mean that you should overwhelm the sites with pastel and pink until it looks like a Barbie theme, therefore you can also look for other design faux pas include:

  • Scalloped borders
  • Curly Victorian ornaments
  • Script fonts
  • Rounded corners on everything

Myth 3: Women need a lot of copy to convince them to purchase

Overwhelming woman with a lot of technical information is lousy. To attract woman in buying a product you need to replace your article into a more lifestyle copy. Therefore, a good copy should be concise, but persuasive. In fact, for women, it will be better for you to create female-friendly copy that considers the voice in which you are writing. Women will tend to love a copy that is more friendly and conversational than men.

5 Lessons of Design in School which are still Useful

Posted on by Mario

6 lessons i learned in desgin school that i still use today

School or College is a great place to collect friends and skills, however, along with time; you will find that not all friends and skills are in tune with you anymore. Knowledge which we learn in college or school is sometimes become useless in workplace, in fact, many skills have been neglected and unused ever since you leave the college or school, but for designers, especially web designers, there are some skills that will remain the same, wherever you go, and here are some of them:

  1. There’s no color like the color you make yourself

Lesson about color is one that may be useful in your work place as the way we look color never be the same after school lesson. In facts, each person interprets what the best or truest color solution for an image is, be it a bit warmer or cooler on his or her own way. So, controlling your color is the key. Maybe the methods may change but the theories are still the same. The understanding about how to manage colors in an image will make your work looks perfect and meaningful.

  1. Just Do It

When you wait for your ideas to come, you will just waste your time, so as teacher told you that you better simply made it, and then ideas would easily flow. This teaching is absolutely right. This does not mean you just work without conducting any research, but this means that no matter what comes across your mind, you just need to put it down on paper or pixel. No matter how large or small, the hardest step to take is always the first one. In the progress you will find that the direction will be clear, step by step.

  1. You Draw with Your Eyes not Your Hands

This old saying is absolutely true and you will remember this after you graduate from school and start working. As your eyes is the one who visualize the design first before your hand can interpret it. In workplace, you need to take a moment to step back and really take a fresh look at what you’re putting together. Walk away from your work for several minutes to make sure that you are really seeing will make you stay creative.

  1. Just Because You can, doesn’t mean you should

In design class, maybe one of us has been told by Professor that the design is enough retouching, even though we still want to add something on it. This lesson is worth it, as knowing when to stop would be one of the most important lessons we would learn in workplace.

  1. Simplify the image to focus on the meaning

Sometimes, when you want to deliver a message from an image, and you find that it is hard to be depicted maybe all you need to do is to simplify the image and provide a good text to explain it. This is one of the golden rule of design and the art of presenting in my opinion. Breaking down an explanation to make it simple can be troublesome, but this level of communication is really understandable to your audience. That is why many powerful taglines and logos only use simplicity and concise messaging to embrace their audience.