10 Web Performance Audit Tips for Your Next Billion Users in 2018: Art Direction
Publikováno: 28.5.2019
It is very important not to confuse design with art direction. Design is perfection in technique while art direction is about the important, yet sometimes intangible emotion that powers the design....
It is very important not to confuse design with art direction. Design is perfection in technique while art direction is about the important, yet sometimes intangible emotion that powers the design. Check out this table that helps you with points that distinguish the former from the latter:
| Tool | Art Direction | Design |
|---|---|---|
| Color | Does this color scheme fit the brand? Is it appropriate for the situation? Bright colors may not fit a sad message. | Do these colors look good together? Are they vibrating? Is each color the best choice for the medium, e.g., Pantone swatch for print, web-safe online? |
| Typography | What does this font connote? How do the letterforms themselves send the message without the actual words? Comic Sans might be too silly, but Helvetica might be too vanilla. | Does my assortment of type sizes create the right visual hierarchy? Does this font have enough weights to be used in this context? |
| Composition | How balanced should this composition be? Balanced compositions are pleasing but often passive. Unbalanced compositions are often uneasy and unsettling but visually more interesting. | Are my margins even? Is there a natural rhythm in the visuals that will guide a person’s eye through the piece? |
| Concept | How well do the visuals support and convey the mood of the brand? What is the message or story the design conveys? | How well do the visuals align with the brand guidelines for logo spacing, appropriate typography, and color palette? |
| Overall | Does it feel good? | Does it look good? |
_Source:_ [_A List Apart_](https://alistapart.com/article/art-direction-and-design)Art direction itself is not a performance tip but worth mentioning because it helps deliver a better user experience in responsive design. Art direction is adjusting an image content (not just dimension) to suite a given device.
For example, assuming I have an image that shows a face with a dimension of 1000 x 662 for medium screens:
If we scale this image down to reduce the dimension and file size for a smaller width and the new size is 400 x 199, this is what we get:
Notice how the person in this image now seems far from us. You start struggling to see his face and his appealing smile. Why not, instead of scale the image, crop it.
When you try to crop the image without considering the content, you might get something that looks like this:
Crop it in a way that we focus attention on the face:
See how not only have we saved bytes, but still conveyed meaning.
Considerations
Content Hierarchy
Most images in your website have content hierarchy. Content hierarchy creates centers of interest on your page, communicates additional meaning through convention and repetition, highlight actions you want your visitors to take and establishes patterns of movement and flow. Ultimately the kind of content hierarchy you establish tells a story about your page and site. What is more important to you in that image? In the image above, we took a lot of the background out because we have more priority on the user in the image. The green field can go.
Image Cropping
When you have this hierarchy and priority, crop the image based on that hierarchy. The less important should go while the most important stays.
Tools and Resources