Posts

All of the big design trends of the year have settled in to the point where they no longer seem new. Responsive design, flat design, responsive typography, and even longshadow design have all reached wide awareness in design. So, obviously that means it is time to find the next big thing. Last week, Paula Borowska asserted that is going to be responsive icons.

What is It?

Responsive icons aren’t what you probably imagine. These days, responsive usually indicates a design element that responds to screen size, but responsive icons are only based on the size they are presented in. Because they can be shown in different sizes multiple times on the same page, screensize is irrelevant to determining the appearance of the icons. It is all about the actual size of the icon itself.

Source: Designmodo

Source: Designmodo

The difference between icons is the level of detail. When you’re gifted with a huge icon (500px by 500px), you’re able to squeeze in a lot of detail. But, as you shrink it, you will want to take away a bit of that detail at a time without losing the intended message. At 250px by 250px, you want to keep the general form, but cut some decoration, while a 25px by 25px icon needs to be as simple as possible to keep the message clear.

Why Does This Matter?

With the rise of incredibly high detail screens on all of our devices, it is necessary to make sure every aspect of our pages maintain uniformity while also working in every size. While a responsive icon doesn’t always respond to screen size, a responsive site with responsive icons may resize the icons as it needs while keeping everything looking great.

Font icons, responsive websites, and minimalistic designs have not only raised the popularity of using icons in design, but it has changed how we use them entirely. This gives us the opportunity to take our icons a step further and improve the entire experience of your site.

Borowska offers some deeper analysis on the icons as well as discussing groups attempting to make responsive icons easier to create; right now they are pretty tricky. It may seem like a small unnoticeable flourish, but in web design the details matter most. I’d keep your eyes on these icons going into the next year.

Source: Flickr

Typography lagged behind a lot of innovation online for years because of constrictions on font use. Text on the internet relied on a few fonts that would be on almost every visitor’s computer, and even then you were doubly limited by text legibility. Web-safe fonts opened the doors a little for designers, but they also created their own set of unique problems.

It hasn’t been until just recently that creative typography became easily achievable and widespread online thanks to a few technological jumps. Higher display resolutions, more control over text, and the wonderful @font-face implementation has made typography not just a creative flourish, but a necessary concern when trying to make a gorgeous site.

Whether or not this is related to the burst in popularity for typography in design as a whole is hard to tell, but it is hard to deny that while the internet has been making typography easier, more traditional designers have also been enjoying a renaissance for calligraphy and innovative use of text.

Paula Borowska is as big of a typography lover as I am, and she agrees that 2013 is going to be huge for online typography. She predicted the typography trends for this year over at Designmodo, and it is interesting to see how many of her predictions are parallel with the wider trends for web design at the moment. The first trend she mentions, an increased utilization of white or negative space, has been on every web design list for this year, and it is hard to deny that eye-popping use of text has helped push minimalistic design to new heights recently.

I recently wrote about the current debate over skeuomorphism and flat design, but after investigating more into the topic, I don’t feel like I explained skeuomorphism as well as possible. Of particular interest to me was Paula Borowska’s article for Designmodo specifically looking at skeuomorphism.

The biggest misconception about skeuomorphism is also the one I failed to address in my original definition of the concept. Skeuomorphism isn’t simply mimicking the way something looks. It is copying the aesthetic properties of the material, the shape, and most importantly, the functionality. Those apps using faux leather backgrounds aren’t part of skeuomorphic design.

More than anything, Skeuomorphic design is about functionality and shape, not texture. The object doesn’t have to physically do something, but it has to convey the idea of functionality  For example, a paperclip on a “stack” of photos is skeuomorphic design, because it appears to be holding them together.

Apple, always noted for their use of skeuomorphism, have the newsstand, the most famous case of the design technique. It, of course, has the wooden texture of a bookshelf, but it also used the newsstand shape and shelved to organize the magazines like they would be on an actual newsstand. Sure, it looks pretty, but it also uses the idea of a real object to better help you understand and interact with the content.

The debate between skeuomorphism and flat design is most likely just posturing. Despite proponents on either side, neither style is inherently better than the other. Most importantly, the web is not a cohesive entity. Neither style of design is going to eradicate the other, though they may fluctuate in popularity. If the internet can’t seem to completely rid itself of Geocities style pages from 1998, neither of these techniques will be disappearing any time soon.

Retina Displays have become a buzzword for design and Apple alike, as it has managed to become synonymous with any display able to show high definition graphics, but many don’t actually understand what Retina means. For starters, “Retina Display” is just Apple’s term for any devices that can put out the high quality graphics, but almost every other brand of mobile device has devices with the same capability.

In other words, asking if your PC has a Retina capable display is like asking if HP makes an iPad.

The misunderstanding, combined with Apple’s penchant for promoting the capability without stating what it actually means in their ads, has made a huge number of people think they understand the term, without knowing the details.

Retina Display is Apple’s brand name for liquid crystal displays that show pixels at higher densities than ever before. These high definition displays pack twice the number of pixels in the same amount of space a normal display would show. This causes text, icons, and even even optimized pictures to look crisper and less blurry than before.

Source: Designmodo

This raises a couple problem however. Most websites haven’t optimized for Retina Displays, so instead many pictures and text will appear pixelated, and the new set of display capabilities adds to the already huge variance of screen resolutions and sizes accessing websites.

Paula Borowska knows how to fix these issues though, and the solution is already one of the most popular design methods available right now. Her article at Designmodo covers the different ways you can create Retina graphics and text that utilize responsive design.If you want your site to look as crisp and beautiful as it can, creating Retina level graphics is the way to go, and it can be surprisingly easy.