Archive for February, 2012

Free Fonts to Make a Great First Impression


  

When you’re designing a website, one of the pillars of great design is typography. Typography is an essential part of good web design, yet it’s amazing how many designers consistently don’t have the proper tools to work with! Talking of course about a quality font library. Even the best designer will struggle to come up with a professional outcome if their font library is lacking in quality.

Today we’ve compiled a huge list of nothing but quality, professional free fonts, that are perfect for making an awesome first impression with your visitors. These fonts are great for designing large headlines with plenty of impact, yet also scale well for sub-headings and in cases body text.

We encourage you to download as many of these great fonts as possible. Enjoy.

The Fonts

Alfa Slab

Alfa Slab Ultimate Free Font

Bender

Bender Free Font

Aller

Aller Free Font

Cubano

Cubano Free Font

Exo

Exo Free Font

AW Conquerer Slab

AW Conquerer Slab Free Font

Carton

Carton Free Font

Chunk Five

Chunk Five Free Font

Ribbon

Ribbon Free Font

Novecento (Wide Light)

Novecento (Wide Light) Free Font

Springsteel

Springsteel Free Font

Terms: only Springsteel light and light italic are free

Enriqueta

Enriqueta Free Font

Duke

Duke Free Font

Tuffy

Tuffy Free Font

Homestead

Homestead Free Font

Gabo

Gabo Free Font

Franchise

Franchise Free Font

Ranger

Ranger Free Font

Nevis

Nevis Free Font

Grandesign Neue Serif

Grandesign Neue Serif Free Font

Armata

Armata Free Font

Kilogram

Kilogram Free Font

Kabel

Kabel Free Font

BP Diet

BP Diet Free Font

Melbourne

Melbourne Free Font

Republic Heavy

Republic Heavy Free Font

Knema

Knema Free Font

aKa Chen

aKa Chen Free Font

Bready

Bready Free Font

Excite

Excite Free Font

Terms: Only free for personal usage

Some Related Reading

Now that you are in font collecting mode, why stop here? Below are some great links for loading up on more high quality fonts for your library. Definitely worth a look.

(rb)


Designer Myopia: How To Stop Designing For Ourselves


  

Have you ever looked at a bizarre building design and wondered, “What were the architects thinking?� Or have you simply felt frustrated by a building that made you uncomfortable, or felt anger when a beautiful old building was razed and replaced with a contemporary eyesore? You might be forgiven for thinking “these architects must be blind!� New research shows that in a real sense, you might actually be right.

That’s Michael Mehaffy and Nikos A. Salingaros describing a phenomenon we’re all familiar with, in their article “Architectural Myopia: Designing for Industry, Not People.� As I read the article, I became increasingly uncomfortable as I realized that the whole thing might as well have been written about Web design (and about our responses to the designs of our peers). How often do we look at a website or app and remark to ourselves (and on Twitter) that “these designers must have been blind!� Sometimes we’re just being whiney about minute details (as we should be), but other times we do have a point: “What were they thinking?�

Longaberger-building-in-Newark
Longaberger Home Office, Newark, Ohio. Image source.

In this article, we’ll discuss “designer myopia�: the all-too-common phenomenon whereby, despite our best intentions, we sometimes design with a nearsightedness that results in websites and applications that please ourselves and impress our peers but don’t meet user and business goals. With Mehaffy and Salingaros’s article as our guide, we’ll investigate the causes of designer myopia, and then explore some solutions to help us take the focus off ourselves and back on the people we’re designing for.

The Causes Of Designer Myopia

If the language in the opening paragraph sounds familiar, it’s because most of us privately and publicly mutter “What were they thinking?â€� almost every day as we move across the Web. We analyze the new Twitter app; we take it upon ourselves to redesign popular websites — and then we wonder if we should even be doing that. One thing is clear, though: we’re good at pointing out designer myopia in our peers.

But what are the causes of this lack of imagination and foresight in our work? Shouldn’t we be smart enough to avoid the obvious traps of designing too much from our own viewpoints and not taking the wider user context in mind? Well, it turns out that we quite literally see the world very differently than others. Again, from “Architectural Myopia�:

Instead of a contextual world of harmonious geometric relationships and connectedness, architects tend to see a world of objects set apart from their contexts, with distinctive, attention-getting qualities.

In other words, we see typography and rounded corners where normal people just see websites to get stuff done on. We see individual shapes and colors and layout where our users just see a page on the Internet. Put another way, we’re unable to see the forest for the trees.

How did we get here? Notice the striking resemblance to Web design as Mehaffy and Salingaros describe the slippery slope that has led to this state in architecture:

With the coming of the industrial revolution, and its emphasis on interchangeable parts, the traditional conception of architecture that was adaptive to context began to change. A building became an interchangeable industrial design product, conveying an image, and it mattered a great deal how attention-getting that image was. The building itself became a kind of advertisement for the client company and for the architect (and in the case of residences, for the homeowner seeking a status symbol). The context was at best a side issue, and at worst a distraction, from the visual excitement generated by the object.

This is why we often see designs that seem to be built for Dribbble, portfolios and “7 Jaw-Dropping Minimalist Designs� blog posts, instead of being “adaptive to context� based on user needs. We have gained much from the “industrialization� of design through UI component libraries and established patterns, but we’ve also lost some of the unique context-based thinking that should go into solving every design problem.

Jon Tan touches on this in “Taxidermista,� his excellent essay on design galleries in the first issue of The Manual:

Galleries do not bear sole responsibility for how design is commissioned. However, they do encourage clients and designers to value style more than process. They do promote transient fashion over fit and make trends of movements such as minimalism or styles like grunge or the ubiquitous Apple-inspired aesthetic.

The result of all of this is that we sometimes end up designing primarily for ourselves and our close-knit community. Jeffrey Goldberg reminds us that this is true for much of the technology industry in “Convenience Is Security�:

Security systems (well, the good ones anyway) are designed by people who fully understand the reasons behind the rules. The problem is that they try to design things for people like themselves — people who thoroughly understand the reasons. Thus we are left with products that only work well for people who have a deep understanding of the system and its components.

And so we end up with a proliferation of beautiful websites and applications that only we find usable.

Dilbert Cartoon
We all follow some rules of thumb without understanding the reasons behind them.

We can’t talk about designing primarily for the community without bringing up the awkward point that we often do it deliberately. We thrive on the social validation that comes from positive Twitter comments, being featured in design galleries and getting a gazillion Dribbble likes. And let’s be honest: that validation also helps us get more clients. This is just part of human nature, and not necessarily a bad thing. But it can be a bad thing; so at the very least, we need to call it out as another possible cause for designer myopia so that we can be conscious of it.

The Manual
The Manual brings clarity to the ‘why’ of Web design, and much more.

Oh, and while we’re at it, let’s ask the obvious next question. Why are we so good at noticing when others fall into the myopia trap but fail to catch ourselves when we do it? In “Why We’re Better at Predicting Other People’s Behaviour Than Our Own,� Christian Jarrett reports on some recent research that might provide the answer:

[When] predicting our own behaviour, we fail to take the influence of the situation into account. By contrast, when predicting the behaviour of others, we correctly factor in the influence of the circumstances. This means that we’re instinctually good social psychologists but at the same time we’re poor self-psychologists.

In other words, we’re much better at taking the entire context into consideration when looking at other people’s designs than when we are creating our own. Scary stuff.

So, if designer myopia is indeed a pervasive problem (and if we are not good at recognizing it in ourselves), what do we do to fix it? I’d like to propose some established but often-ignored techniques to get us out of this dilemma.

1. Conduct Observational User Research In Context

The first thing that Mehaffy and Salingaros suggest in their article to overcome myopia is this:

First of all, re-integrate the needs of human beings, their sensory experience of the world, and their participation into the process of designing buildings. Leading design theory today advocates “co-design,� in which the users become part of the design team, and guide it through the evolutionary adaptations to make a more successful, optimal kind of design. Architects spend more time talking to their users, sharing their perception and understanding their needs: not just the architect’s selfish need for artistic self-expression, or worse, his/her need to impress other architects and elite connoisseur-critics.

Note that this is not just about asking users what they think. It’s about making users part of the design process in a helpful, methodologically sound manner. To accomplish this, we can look to anthropology to play a substantial role in the design of products and experiences. Ethnography (often called contextual inquiry in the user-centered design world) is the single best way to uncover unmet needs and make sure we are solving the right problems for our users.

In “Using Ethnography to Improve User Experience,� Bonny Colville Hyde describes ethnography as follows:

Ethnographers observe, participate and interview groups of people in their natural environments and devise theories based on analysis of their observations and experiences. This contrasts with other forms of research that generally set out to prove or disprove a theory.

That’s the core of it: we do ethnography to learn, not to confirm our beliefs. By using this method to understand the culture and real needs of our users, we’re able to design better user-centered solutions than would be possible if we relied only on existing UI patterns and some usability testing.

Leaving the office and spending time observing users in their own environments is the best way to understand how a product is really being used in the wild. It’s the most efficient way to get out of your own head.

2. Design To Blend In

Let’s stick with the architecture theme for a moment. The concept of “paving the cowpaths� is another effective way to look beyond ourselves and to design websites and applications that form part of our users’ landscapes (rather than break their mental models). In “Architecture, Urbanism, Design and Behaviour: A Brief Review,� Dan Lockton writes:

One emergent behavior-related concept arising from architecture and planning which has also found application in human-computer interaction is the idea of desire lines, desire paths or cowpaths. The usual current use of the term […] is to describe paths worn by pedestrians across spaces such as parks, between buildings or to avoid obstacles […] and which become self-reinforcing as subsequent generations of pedestrians follow what becomes an obvious path. […]

[T]here is potential for observing the formation of desire lines and then “codifying� them in order to provide paths that users actually need, rather than what is assumed they will need. In human-computer interaction, this principle has become known as “Pave the cowpaths�.

This is such an interesting perspective on user-centered design. By starting a design project with an explicit goal to “pave the cowpaths,� we will always be pulled back into a frame of mind that asks how the design can better blend in with our users’ lives and with what they already do online. The same questions will keep haunting us, and rightly so:

  • Do we have analytics to back up this behavior?
  • Are we sure this is what users naturally do on the website?
  • We know that most users click on this navigation element to get things done. How do we make that behavior easier for them?

In the same paragraph in “Taxidermista,� Jon Tan also calls for us to step back and ask questions like these before starting to design:

The answers to a project’s questions may have something to do with fashion, but not often. Good design does not have a shelf life. The best web designers gently disregard issues of style at the start. They rewind their clients back to asking the right questions, so they can rewrite the brief and understand the objectives before they propose solutions.

By asking the right questions, we focus our effort on fitting into the ways that users move on the Web, as opposed to bending them to our will.

3. Triangulate Results

The two recommendations above are very specific, so I’d also like to make a more general point. There are, of course, several other user-research methodologies to help us get into the minds of users and bring them into the design process in a helpful, meaningful way. Methods such as concept testing, participatory design and, of course, usability testing all have their place. But the real power lies in using not just one or two of these methods, but three or more. This is where triangulation comes in:

Triangulation is a powerful technique that facilitates validation of data through cross verification from more than two sources. In particular, it refers to the application and combination of several research methodologies in the study of the same phenomenon.

Using multiple data sources — both qualitative and quantitative — is a great way to avoid any myopia traps along the way. In addition to (or instead of, depending on the project) the two methodologies covered above, you should use as many appropriate techniques as possible to help confirm your intuition and direction.

As Catriona Cornett points out in “Using Multiple Data Sources and Insights to Aid Design�:

When used correctly, data from multiple sources can allow us to better identify the context in which our designs live. It can help us validate our assumptions and approach design with confidence and not subjective opinion. This not only helps to create better design, but also helps us achieve that all-important buy-in from stakeholders. It’s easier to defend a design when you have deep, rich insights to back it up.

The first response I get when proposing triangulation (or sometimes even just one research method) is usually, “We don’t have time!â€� The good news is that this doesn’t have to slow you down — even an hour at a coffee shop observing real users with your product will shock you out of your myopia. The only thing that’s not an option is skipping research completely.

Summary

User research and the techniques discussed in this article aren’t new, but they’re usually left to specialist researchers to champion, or they’re swept under the rug because “We’re using established UI patterns on this one.� Hopefully, this article has shown that designer myopia is too common and too dangerous to ignore or to be left to specialist researchers to fix. Sure, user researchers are critical to ensuring that a proper methodology is followed, but we can all get out there and use the data and information available to us to make sure we don’t put too much of our own viewpoints into our designs.

Web design is personal — deeply personal. As Alex Charchar puts it in his gut-wrenching essay for The Manual:

I now know that it is through love and passion and happiness that anything of worth is brought into being. A fulfilled and accomplished life of good relationships and craftsmanship is how I will earn my keep.

I doubt that any of us would disagree with those words. Our best work happens when we throw ourselves wholeheartedly into it. But this outlook on life and design comes with its own dangers that we need to watch out for. And the biggest danger is in being unable to see beyond our own passion and taste and, with the best intentions, in failing to make the necessary connections with our users.

My hope for all of us is that the three simple guidelines discussed here — contextual user research, designing to blend in, and research triangulation — will enable us to keep the perspective we need as we throw everything we’ve got at the design problems that we have to solve every day.

(al) (il)


© Rian van der Merwe for Smashing Magazine, 2012.


Every Time You Call a Proprietary Feature “CSS3,� a Kitten Dies

Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors to circumvent the standards process, implement whatever they come up with in WebKit, then evangelize it to developers as the best thing since sliced bread. In our eagerness to use the new bling, we often forget how many people fought in the past decade to enable us to write code without forks and hacks and expect it to work interoperably. Lea Verou explains why single-vendor solutions are not the same as standards and not healthy for your professional practice or the future of the web.

The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik

During a public meeting of the W3C CSS Working Group, Mozilla web standards lead Tantek Çelik precipitated a crisis in Web Standards Land when he complained about developers who misunderstand and abuse vendor prefixes by only supporting WebKit’s, thereby creating a browser monoculture. Tantek’s proposed solution—having Mozilla pretend to be WebKit—inflamed many in the standards community, especially when representatives from Opera and Microsoft immediately agreed about the problem and announced similar plans to Mozilla’s. To get to the bottom of the new big brouhaha, exclusively for A List Apart, our Eric Meyer interviews Tantek on Mozilla’s controversial plan to support -webkit- prefixed properties.

Adobe Illustrator Tutorial: Be My Valentine


  

Valentine’s Day, the most romantic holiday of the year is upon us. So why not take the opportunity to learn how to create a romantic gift box in AI. In this Adobe Illustrator tutorial we will be learning how to create a heart shaped gift box by using a few basic tools such as the Ellipse Tool (L) and Pen Tool (P).

3D effect Extrude & Bevel will help us with the Perspective (which is a very important aspect of this tutorial). Beside that we will create a nice pattern that we will use as wrapping paper and fancy ribbon to complete our illustration.

So, let’s move from words to deeds. This is what we will be creating.

Creating the Heart

In this tutorial we will do everything from scratch. First thing we have to do is to create a nice heart. Grab the Ellipse Tool (L) from the Tool Panel and create a perfect circle (hold the Shift key on the keyboard for the even shape).

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the circle and nudge it to the right, as shown in the picture below.

Select both circles and under the Pathfinder Panel hit the Unite button. It will turn both circles into one object.

Now grab the Direct Selection Tool (A) from the Tool Panel and select the lower middle anchor point. Hold the Shift key on the keyboard and drag that anchor point downwards.

With the Convert Anchor Point Tool (Shift + C) click on that anchor point in order to create a sharp corner.

With Delete Anchor Point Tool (-) we will now remove two anchor points.

You should end up with something like this.

As you can see, this isn’t a perfect heart. It seems a little bit edgy. Let fix that. Grab the Direct Selection Tool (A) from the Tool Panel. Click on the anchor point on the left side of the heart. Make sure to pull the end of the handle downwards (don’t forget to hold the Shift key on your keyboard while you’re doing this, for straight dragging).

You can see the difference between the left and right sides of the heart.

Repeat that step for the right side of the heart as well. You should end up with the perfect shape of the heart.

Feel free to adjust the position and the number of anchor points until you reach desirable look of the heart.

Creating the Wrapping Paper

In this part of the tutorial we will create a nice and simple pattern for our gift box. Select the Rectangle Tool (M) from the Tool Panel and create a large rectangle. We will use it to create a symbol for the wrapping paper. The rectangle has to be large enough to cover all the parts of the gift box. Set the Fill color to any color you like, we will change the color in the final step anyway.

Now grab the Ellipse Tool (L) from the Tool Panel and create a small circle.

Duplicate the circle and move it to the right side of the rectangle. To do that hold the Alt / Opt key on your keyboard, click on the circle and drag it to the right side of the rectangle. Don’t forget to hold the Shift key on your keyboard for straight dragging. If this is too complicated for you, just duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the circle and move it to the right.

Select both circles and under Object select Blend > Make. It will create more circles in the middle.

To set the exact number of the circles select Object > Blend > Blend Options.

Set the Spacing to Specified Steps and the value to 15.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the row of circles and place the copy as is pictured below. Make sure to expand both rows (to turn them into an editable object). Just select Object > Expand.

Select both rows and under the Object select Blend > Make. It will create a few rows with circles in the middle. To set the exact number of the rows again select Object > Blend > Blend Options. Set the Spacing to Specified Steps and the value to 6.

Expand the circles again (Object > Expand). Select all the circles and duplicate them (Ctrl / Cmd + C, Ctrl / Cmd + F). Place the copy as it is in the picture. Group (Ctrl / Cmd + G) the circles. Select all the elements and under the Align Panel hit the Vertical and Horizontal Align Center.

Group (Ctrl / Cmd + G) all the elements and drag them to the Symbol Panel. Set the name to Pattern and Type to Graphic. Then hit the OK button.

Now we have the wrapping paper for our gift box completed. So, let’s create the gift box now.

Creating the Shape of the Gift Box

First we will create the cover for the box.

Select the shape of the heart we created in the beginning of this tutorial. Under Effect select 3D > Extrude & Bevel. Make sure to check the Preview box to be able to monitor the changes.

Feel free to play around with the rotation of the box until you find the right angle and the position of the cover. Perspective is very important to the tutorial, so don’t forget to include it. For our purpose we will set the Perspective to 100. Feel free to adjust to your liking.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the heart and nudge it downwards, using the arrow key on your keyboard. We need to make sure to bring the upper heart to the front (Shift + Ctrl / Cmd + ]).

As you can see, we are not expanding the hearts yet. We have to be able to adjust all 3D parameters if needed. Within the Appearance Panel (Window > Appearance) we can see which effects have been applied to our objects.

If you select one of the hearts and click on the 3D Extrude & Bevel link under the Appearance Panel you will open the Extrude & Bevel Options window and you will be able to adjust the look of the object.

So, let’s edit a little bit of our illustration.

Select the lower heart and open Extrude & Bevel Options window. We will have to increase the Extrude Depth in order to create the lower part of the gift box. Set the value for Extrude Depth to 80.

Make sure to upscale the upper heart (cover of the gift box) a little bit. You may have to adjust other settings as well, in order to achieve the right look for your gift box. You should end up with something like this.

Applying the Symbol of the Wrapping Paper to the Gift Box

If you are satisfied with the basic look of the gift box we can move on. Basically, we have two hearts with applied 3D effects. Now we will apply the symbol of the wrapping paper to each heart.

To apply the symbol to the 3D shape simply hit the Map Art button inside the Extrude & Bevel Options window. A new window will pop up. Switch between the surfaces to apply the pattern we created earlier.

When we are done with the cover it should look like this.

Repeat the previous step for the lower part of the gift box. You should end up with something like this.

More on Page Two

We are nearly halfway through the tutorial, but there are still some vital details to come. To complete the design, simply head on over to page two for the rest.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress