14 Favorite Resources for UX Principles From Top Companies

Each of these resources shows which design principles are prioritized by some of today’s top companies.

We found these 14 resources useful during our research for our new ebook The Essential Elements of Successful UX. We hope they will inspire you to continue designing cohesive web and mobile products.

1. The 269 Principles of Modern Design

2. Wireframing for Web Apps

3. Basic Principles of Natural UI Design

4. IBM Design Language

5. Facebook’s Product Design Principles

6. OPower Product Design Principles

7. UK Government Design Principles

8. 10 Things We Know to Be True (Google)

9. Android Design Principles

10. Apple iOS Design Principles

11. The 18 Principles of Product Design (Joshua Porter)

12. Developing Design Principles (Luke Wroblewski)

13. What Every Designer Needs to Know About People

14. Design Principles Inspired by Zen Wisdom

To see how top companies apply the design principles described above, check out our free 100-page guide The Essential Elements of Successful UX.

fb-promo1

5 Ways to Avoid the Drawbacks of HD Web Design

There was a time when 72 pixels per inch may have been enough, but those days are coming to an end.

Studies are showing a quickly accelerating rise in HD devices (220 ppi or higher), with Apple’s retina displays and the ensuing technology war. Today, designers have two options: either implement HD, or else risk getting left behind.

image06

Photo credit: http://www.wonderfullywild.co.uk/

On the bright side, there are strategies for getting around the performance drawbacks of HD design. In this article we’ll talk about how to have your cake and eat it to: implementing HD while sidestepping the problems.

The Problems with High Definition

The revolution of resolution may be great for users, but it’s causing designers some headaches. Naturally, the higher resolution means more data, which means longer loading times. The other major factor is how standard 72 ppi visuals look on HD devices.

At best, they fall flat, especially in comparison to other sites who’ve already adapted to HD.

image02

Photo credit: https://flipboard.com/

Additionally, HD visuals, whether video or images, just plain cost more. That means you’re paying more for content that takes longer to load. Even if you’re providing your own content, the tools necessary to create HD visuals are still expensive.

So, are all these drawbacks worth it? We say yes – even if you can still get by with standard definition at the moment, the popularity of HD will only continue to grow. The sooner you adapt, the better you’ll be prepared for the future.

Besides, there are ways around the drawbacks. Let’s look at 5 tactics designers have already discovered for getting around these problems.

1. Scale Vector Graphics

The rise of HD displays impacts more than just the popularity of HD backgrounds, but the way we think about design altogether, specifically between uploading images in raster or vector formats.

Before, raster formats like .jpg, .gif, and .png were preferred as a way to compress images and hasten loading times. These simply translated the image to the screen pixel-for-pixel. But with HD displays, this images appear blurry, with the same amount of image pixels displayed on twice as many screen pixels.

The shift is leaning towards scalable vector formats (SVG), which allows the same image to appear at its best on different screen resolutions. By using connected points and lines instead of pixel-for-pixel, vector formats allow the image to accommodate various resolutions without changing the file. To see vectors at their best, go to Les Jardins de la Poudriére below and play with the window size.

image04

Source: Les Jardins de la Poudriére

HD web design requires rethinking and using vector formats, which is a newer concept when it comes to the internet. (Coincidentally, print designers have been doing it for ages.) That’s where the Scalable Vector Format, or SVG, comes in. As with other vector graphic formats, SVG graphics use connected points and lines, rather than pixels, to create images that can be scaled to any size without a loss of quality.

But that doesn’t make vectors a cure-all solution. Photographs, for example, are limited only to the resolution they were taken in, so vectors won’t change how they’re rendered on larger or smaller screens. For that reason, we recommend the following guidelines:

  • Use vector for original graphics
  • Use raster for photographs and graphics whose pixels can’t be changed

With this in mind, use the highest resolution possible when selecting or taking photographs for your site.

2. HTML5, CSS3, and JavaScript Rendering

Traditionally, images are rendered in the browser, which is where some of these problems arise. If you render your images in HTML (width & height attributes), CSS (properties), or JavaScript (properties), however, you gain more control over how they’re viewed, and can sometimes avoid that unsightly blurriness.

The easiest solution is to set the image’s size to be half of what it actually is, so that when converted to HD, it’s displayed normally. For tips and tricks on the coding of this – including media queries to change the dimensions according to the device – Paula Borowska explains the details in this piece for DesignModo.

Join the world's best designers who use UXPin.

Sign up for a free trial.

3. “Still” Video

With the growing popularity of HD video backgrounds, designers are looking for creative solutions to alleviating the loading strain. One of the most creative is simplifying not the quality of the video, but the content.

The fine compromise is to have HD video with little movement and/or composed of mostly static elements. The slight motion will still have a positive effect on the user experience, but will not overtask the loading of the video.

image00

Photo credit: http://bellroy.com/live-life-outside

A good example of this is Bellroy, maker of wallet covers. Emphasizing their product’s durability and quality, they use a simple HD video to showcase it surviving unscathed in the harsh elements. Only the falling snow moves in the video, making the scene closer to a still image than video.

From a technical standpoint, we can see some smart decision-making at play. First, the entire background uses a fairly limited color palette, which naturally improves load times. Secondly, because the video renders in .mp4, the moving snowflakes have mostly soft edges while only the still wallet image has hard edges (again, improving load times).

The end result is a visual compromise that works just as well as it looks.