{"id":17354,"date":"2019-03-19T11:00:35","date_gmt":"2019-03-19T11:00:35","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=17354"},"modified":"2019-03-14T11:21:18","modified_gmt":"2019-03-14T11:21:18","slug":"art-direction-will-help-create-masterful-web-interfaces","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/art-direction-will-help-create-masterful-web-interfaces\/","title":{"rendered":"How Art Direction Will Help You Create Masterful Web Interfaces"},"content":{"rendered":"

The Importance of Art Direction<\/h2>\n

Although we might understand some of its aspects like typography,<\/em> art direction<\/strong> is a practice that is often neglected and little understood by designers. On typography, you may have read our article \u201cGreat interfaces are made of good typography\u201d<\/a> published on Medium last year. <\/p>\n

Back then, we sought to explain how using the right typography can help good designers capture an organisation\u2019s style and translate it into a website, thereby provoking deep emotions within users. Art direction is that, plus the management of many other components of design and it leads to great compositions.<\/p>\n

\"The fact that art direction is little understood, even by professional designers, is a real shame since it singlehandedly has the potential to guarantee coherent and memorable experiences across channels.\"<\/span><\/p>\n

Now, as it can be difficult to figure out how to art direct your work, we have laid out useful concepts in the article below, hoping to shed light on the practice and help you better understand it. For this, we follow the design process chronologically in \u201cSteps\u201d and detail the value that art direction <\/strong>can bring to your designs.<\/p>\n

The Definition of Art Direction<\/h2>\n

Andy Clarke, the designer, describes<\/a> it as:<\/p>\n

\u201cthe art of distilling an essential, precise meaning and purpose from a piece of content.\u201d<\/span><\/p>\n

\"\"<\/a>

Two different interfaces where art direction has been applied successfully<\/p><\/div>\n

It can be defined as the process of selecting the best way to communicate a message using the panel of tools at the web designer\u2019s disposal: colours, words, layout, images and typography. A right mix of these is what you must reach in order to suscitate emotions through your web, system or app creations. Further, art direction will also make people better understand content, perceive moods, get a feel for a brand or recognise its visual identity.<\/p>\n

Problems Are Faced When Art Direction Is\u00a0Lacking<\/h2>\n

Many designers tend to forget that a website is, first and foremost, a means of communication. They can be tempted to design websites using quick fixes; i.e. themes or frameworks that saves them time but that do not take full consideration of project goals. In addition, they may often jump straight into creating the website\u2019s visual language without paying full attention to the moods and feelings they need to convey. <\/p>\n

This shows a lack of art direction. And, when art direction is lacking, typical symptoms appear. Websites become mere replicas of one another: i.e. little more than barely modified templates, dry, soulless, unmemorable and failing at establishing a deep emotional connection with their users.<\/p>\n

\"\"<\/a>

Two examples of website templates that lack soul and personality<\/p><\/div>\n

The Fix<\/h2>\n

To ensure your web design radiates soul and personality learn to art direct the products you design<\/strong>. You need to know how to infuse character into them as well as to establish an emotional connection<\/strong> with your users.<\/p>\n

<\/div>
<\/svg><\/div>

\"To ensure your web design radiates soul and personality learn to art direct the products you design.\"<\/p><\/span><\/blockquote>\n

Another important clue is included in another one of our articles, entitled \u201cHow to define a clear strategy\u201d<\/a>. There, we stress the importance of defining crystal clear goals from the very start of the project. Click on the link above and open the article in a new window; it will show you the basics of interface design and the steps to follow before the art direction stage.<\/p>\n

Your Objective: Let The Brand Speak For\u00a0Itself<\/h2>\n

As brands are primarily recognised through visual identity, below is a list of recommendations that can help you align with this principle. Using art direction, you must seek to:<\/p>\n

    \n
  1. Infuse the organisation\u2019s brand identity into your creation<\/li>\n
  2. Create something striking that will stand out<\/li>\n
  3. Capture your audience\u2019s interest<\/li>\n
  4. Investigate rather than second-guess the design choices you should offer<\/li>\n
  5. Keep the original goals in mind from start to finish<\/li>\n
  6. Identify the main target audience of your website<\/li>\n
  7. Determine what specific messages must be conveyed<\/li>\n
  8. Define the desired impact you wish to have on your audience in terms of feeling as they interact with your product<\/strong><\/li>\n
  9. Seek to add value (how does your design contribute to this?)<\/li>\n
  10. Research and absorb the essence of the brand as early as possible from the beginning of the project.<\/li>\n<\/ol>\n

    The last point is particularly important: defining the organization's brand attributes with your client is a great starting point that establishes bases for clear and solid design. Your clients know their brand better than anyone else and can explain the what, i.e. what they wish to communicate and sell through your design. As for you<\/em>, you handle the how, i.e. how this will be implemented through design. You facilitate the brand\u2019s communication and help it leverage a web solution that carries its voice.<\/p>\n

    <\/div>
    <\/svg><\/div>

    \"Investigate at the start. Keep original goals in mind all the way. Create something striking that will do justice to the brand, to you as a designer and to web users.\"<\/p><\/span><\/blockquote>\n

    Step 1: Identify the Brand Attributes<\/strong><\/p>\n

    As an example, below is a simple exercise we do with clients to ensure their expectations are understood. Together, we list their brand attributes and select the most important ones within each pillar. This helps you think about your design from the right angle and then take the right direction. Remember that visual design and art direction grow out of existing brands.<\/strong><\/p>\n

    \"\"<\/a>

    The brand attribute exercise we do with our clients before\u00a0projects<\/p><\/div>\n

    Step 2: Tone of Voice<\/strong><\/p>\n

    In addition, understanding the \u201ctone of voice\u201d<\/strong> of the brand will be key in choosing suitable typefaces that accurately and efficiently communicate. Think body copy, button labels and other UX copywriting. Moreover, typefaces are essential to convey brand spirit and visual identity. Turned into feeling<\/strong>, single words will tell you more about the connection you want to establish with the user through design. For instance, the words in the table above will give you a good idea on the best way to art-direct the types, negative space, images, colours and micro-interactions in your website.<\/p>\n

    <\/div>
    <\/svg><\/div>

    \"Typefaces are essential to convey brand spirit and visual identity.\"<\/p><\/span><\/blockquote>\n

    Step 3: The Direction the Design Must Take<\/strong><\/p>\n

    After defining the brand traits in our larger table, together with the client, we narrow down the list to only a few words which we can then visualize and use to give direction to the design.<\/p>\n

    \"\"<\/a>

    Together with our client, we decided to take a creative direction based on the principles outlined in the\u00a0circles.<\/p><\/div>\n

    Step 4: From Thought to Image<\/strong><\/p>\n

    Once this exercise is complete, it becomes clear that the design will not be disconnected from the brand or audience. Typically, this step is concluded by creating a stylescape which translates thought process into visual composition. The stylescape allows you to tell the story of your design, the audience of the project and the global visual language to use. A stylescape that seamless aligns with a brand speaks volumes!<\/p>\n

    \"\"<\/a>

    A stylescape I created based on a branding exercise made with a\u00a0client.<\/p><\/div>\n

    Step 5: Layout \u2014 What Goes Where\u2026<\/strong><\/p>\n

    On a website, layout and typography play an important role in delivering a message. Together, they constitute the core of a website\u2019s communication. As a result, keeping them in harmony is important. Generally, when you successfully pair types of font, use appropriate images, balance white space properly, use brand attributes and design, a personality emerges and the website stands out.<\/strong><\/p>\n

    <\/div>
    <\/svg><\/div>

    \"A good visual design must not only communicate, support, but also lead the user throughout their interactions.\"<\/p><\/span><\/blockquote>\n

    In fact, it must allow them to accomplish what they sought to do in the first place. When it comes to your design, make sure to start designing from real content and keep the goals in mind. This will create meaningful interfaces.<\/strong> Layouts suggest what needs to be read first and how much attention should be given to any part. In a sense, layout is storytelling<\/strong>. Below is an example of three distinctive layouts we art-directed in order to provide different feels:<\/p>\n

    \"\"<\/a>

    Three different page\u00a0layouts<\/p><\/div>\n

    When \u201claying out\u201d, think first, then ask the right questions:<\/strong><\/p>\n

      \n
    1. On any given page, what message do I need to convey to the user?<\/li>\n
    2. Why did the user come on this page?<\/li>\n
    3. What actions do I want them to take?<\/li>\n
    4. What emotions do I want to create?<\/li>\n<\/ol>\n

      These questions give clarity on the type of layout to use in order to organize the content on a page. Using real content will deliver real results.<\/p>\n

      \"\"<\/a>

      Image courtesy of Jen Simmons \u2014Revolutionize Your Page: Real Art Direction on the\u00a0Web<\/a><\/p><\/div>\n

      Conclusion: Use Art Direction to Magnify your Communication and Showcase your Talent<\/strong><\/p>\n

      As a competent UX designer, what you must aim for is to produce increasingly better designs. This is something that art direction makes possible. Remember that the prime purpose of visual design is not only decoration but also communication, Therefore, start today by applying the basics of art direction in every digital project you embark on. Your designs will become meaningful, they will help people connect emotionally and gain in efficiency. <\/p>\n

      Art direction will determine the difference between a regular and brilliant creations. This, because good design choices will be made from the beginning of the project, and guarantee the success of your operation, from customer requirement to a masterful web interface.<\/p>\n

      This article was written by<\/em> Jerome Kalumbu<\/em><\/a> and edited by <\/em>Theo Mbise<\/em><\/a> (2019). Find out more about the website project featured used as an example of art direction <\/em>here<\/em><\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

      The Importance of Art Direction Although we might understand some of its aspects like typography, art direction is a practice that is often neglected and little understood by designers. On typography, you may have read our article \u201cGreat interfaces are made of good typography\u201d published on Medium last year. Back then, we sought to explain how using the right typography… Read More ￫<\/a><\/p>\n","protected":false},"author":270,"featured_media":17371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-17354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n