{"id":2223,"date":"2020-08-20T12:21:00","date_gmt":"2020-08-20T12:21:00","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=2223"},"modified":"2020-12-30T22:32:01","modified_gmt":"2020-12-30T22:32:01","slug":"how-i-design-custom-ui-illustrations-using-sketch","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/how-i-design-custom-ui-illustrations-using-sketch\/","title":{"rendered":"How-To Design Complex Custom UI Illustrations"},"content":{"rendered":"\n

This is the process of how I design complex custom UI Illustrations. It’s a good skill to have to be able to contribute more.<\/p>\n\n\n\n

My thoughts<\/h2>\n\n\n\n

Recently, I’ve been exploring my skills in how I design complex custom illustrations aimed at technology and IT. I wanted to share with you how my design process is when creating such complex illustrations. <\/p>\n\n\n\n

I’ve always spent much time drawing and painting since I was really young, but creating custom illustrations for abstract IT terms and systems are much different than the types of drawings I’m used to doing. For example, how would one go about creating an illustration for a website that sells a “Site Builder” without using a screenshot of the service itself?

This is actually one of the illustrations I made at work recently, so let’s use that one as an example.<\/p>\n\n\n\n

Disclaimer! With complex illustrations I mean anything that isn’t a simple and straight-forward object. For example, a simple illustration would be a cloud, a book, a pencil. A complex illustration would be something that represents security, social media, education, and so on.<\/p>\n\n\n\n

My Design Process When I Design Complex Custom UI Illustrations<\/h2>\n\n\n\n

My process is usually as following<\/p>\n\n\n\n

  1. Brainstorm ideas with words in a long list\/on paper. All the things my brain thinks of automatically when hearing the word\/idea\/concept. <\/li>
  2. Narrow down the list to concrete keywords\/items.<\/li>
  3. Sketch out the items in lo-fi versions, and trying to create different versions of them. <\/li>
  4. Look up inspiration from others (don’t copy other’s work straight-off but you can copy the essential idea)<\/li>
  5. Scan my sketches into Sketch (or Illustrator or Affinity Designer).<\/li>
  6. Make lo-fi vector versions of my sketches. Ask for feedback and iterate.<\/li>
  7. Play around and explore different combinations and layout of the elements. Ask for feedback and iterate.<\/li>
  8. Color the illustration.<\/li><\/ol>\n\n\n\n

    So in real life example using my work on a “Site Builder Illustration”…<\/p>\n\n\n\n

    Early step: Sketches on paper<\/h3>\n\n\n\n

    Below are some of the early sketches I did to explore how my keywords (step 2-3) could look like. I crossed out some as soon as I finished them because they felt wrong. I also note down some thoughts I have, for example “center?” in my notes mean that I’m exploring the idea wether that graphical piece should be the center of the illustration.<\/p>\n\n\n\n

    \"Sketches
    Sketches for Site Builder Illustration<\/figcaption><\/figure>\n\n\n\n

    Middle step: Lo-fi vector shapes of the elements<\/h3>\n\n\n\n

    Here are some of the vector-shapes I did of the elements seen on the sketches in the previous steps. I work on a grey-scale to not get stuck on details. On this step, it’s important for me to not be too attached to my ideas so that I can eliminate the ones that aren’t that good. Sometimes I ask for feedback on this step to make sure that I’m on the right track.<\/p>\n\n\n\n

    \"Lo-Fi
    Lo-Fi vector elements<\/figcaption><\/figure>\n\n\n\n

    Middle step: Exploring the layout of the illustration<\/h3>\n\n\n\n

    Next, I combine the elements into a bigger picture. I explore which elements should be included, which ones should be central pieces, and how the composition should look. Most of the time I do a lot of<\/em> different variations, but here’s two of them. At this step, I usually ask for feedback from stakeholders so that I don’t spend too much time on coloring and details only to find out that they aren’t satisfied with the concept. I don’t show them all of my ideas, but only 2-4 that I think are the best. If they don’t like it, then I continue exploring more ideas.<\/p>\n\n\n\n

    \"Illustration
    Illustration layout alternative 1<\/figcaption><\/figure>\n\n\n\n
    \"Illustration
    Illustration layout alternative 2<\/figcaption><\/figure>\n\n\n\n

    Last step: Details and colors of the illustration<\/h3>\n\n\n\n

    When a concept has been improved I begin coloring and working on the details of an illustration. Here I need to work with the company’s brand colors and what they’re looking for. Sometimes it may not be exactly aligned with your personal style, but that’s a part of the job, to be able to design from your client’s wants. <\/p>\n\n\n\n

    If I need visual UI inspiration, I usually go visit Dribbble<\/a>.<\/p>\n\n\n\n

    \"\"
    Finished piece!<\/figcaption><\/figure>\n\n\n\n

    The important thing for me when doing an illustration for someone else<\/em>, is that they are satisfied and feel that I’ve delivered what they were looking for.<\/p>\n\n\n\n

    If I were to color this illustration however I wanted, I would do it as shown below.<\/p>\n\n\n\n

    \"\"
    Dark mode with my personal style<\/figcaption><\/figure>\n\n\n\n

    I hope this article was insightful!<\/p>\n\n\n\n

    More UX & UI design articles<\/h2>\n\n\n\n

    If you’re interested in reading more articles about UX & UI design you can check out my related posts:<\/p>\n\n\n\n