We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.
This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann.
Have you ever thought of what makes you remember a certain movie or TV show? Of course, it's the story being told, you’ll say. But what about movies such as Goldfinger, Seven and Snatch? What’s the first thing that comes to mind? We are pretty sure their opening title sequences stick out for many of you.
Today we’ll take a closer look at that short space of time between the moment the lights go down and the first scene of a film, the part that so often sets our expectations of a movie, that sequence that speaks to our creative side: the art of the film title. We'll look at the evolution of title design and some particularly interesting titles from various periods in the history of cinema and animation.
Film titles can be great fun. In them we see the bond between the art of filmmaking and graphic design — and perhaps visual culture as a whole. They have always served a greater purpose than themselves: to move the overarching story forward. Whether you are a motion graphic designer, a digital artist or a connoisseur of design, we hope you are inspired by these film titles and the ideas they suggest to your own creative endeavors. At the end of this post, you'll find a listing of relevant typefaces and Web resources.
Last month the first International Conference on Green Computing took place. The conference agenda included a broad range of topics but, in essence, was eagerly addressing issues surrounding the carbon footprint of computing and how computers can contribute to the well being of our world. So what better time to raise a few questions about green web design. What is our role in contributing to a greener computing world?
We are, after all, steering the Internet towards being a safe storage of every kind of data. Every now and again it is good to step back and look at where we fit into this bigger picture of a green computing world. We as web designers and developers are the lead architects of the Web. We are the ones carrying the main blocks and putting them in place. Layering and cementing the blocks of information together. Brick by brick. The new Rome!
But who is actually making sure the outer walls of our construction run true? Do we have our eyes on the bigger picture? Are our processes as eco-friendly as they could be / should be? And this is not just about optimization for speed of delivery. Are we true to ourselves in considering the energy efficiency of our web constructions, or are we more concerned for aesthetics? Are these relevant questions for a web designer?
Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.
According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.
Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.
This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.
Plenty of creative business card showcases are available out there. Many of these are beautifully done and well thought out, and they serve as inspiration for those who would like their business card to be more than the standard rectangular piece of paper. Yet little explanation accompanies these examples, and figuring out just how to bring your idea to life can be overwhelming, to say the least. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer.
I never tire of repeating this to anyone who will listen. Don’t base your business card design on the fact that your printer has a special limited-time offer on round corners or metallic inks. Think in terms of what the design will add to your message. Tempted to use rounded corners just because the cool kids are doing it? Maybe your card would stand out more by not using this technique.
You may be interested in the following related posts:
To mock-up the user interface of a website, software or any other product, you'll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.
In this post, we've prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We've carefully selected the most useful kits and resources to get you going in the early stages of a project.
Recently, A/B testing has come under (unjust) criticism from different circles on the Internet. Even though this criticism contains some relevant points, the basic argument against A/B testing is flawed. It seems to confuse the A/B testing methodology with a specific implementation of it (e.g. testing red vs. green buttons and other trivial tests). Let’s look at different criticisms that have surfaced on the Web recently and see why they are unfounded.
Jason Cohen, in his post titled Out of the Cesspool and Into the Sewer: A/B Testing Trap, argues that A/B testing produces the local minimum, while the goal should be to get to the global minimum. For those who don’t understand the difference between the local and global minimum (or maxima), think of the conversion rate as a function of different elements on your page. It’s like a region in space where every point represents a variation of your page; the lower a point is in space, the better it is.
Product photography could well be the single most important design aspect of any e-commerce website. Without the ability to touch, hold, smell, taste or otherwise handle the products they are interested in, potential customers have only images to interact with. Ultimately, the softer, tastier, flashier and more attractive your products look to shoppers, the more confident they'll feel about purchasing from you and the better your conversion rate will be.
While any product can look great in a photo (sometimes deceptively so), keep in mind that your images should match your website’s overall aesthetic and your company’s image. Let’s start with a few great examples of how online retailers have incorporated high-quality product photos onto their websites. In this article, we will focus on images of actual items, rather than models, events or landscapes.
There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. "It's what's inside that counts" and "Beauty is only skin deep" are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a "beautiful" website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.
In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.