Web Courses Academy Blog

Start your first UI Design using Adobe Illustrator

Author: Carl Heaton

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.

Sharing is caring

Let’s create a UI design in Adobe Illustrator!

Hi guys! Today I will teach you how to create a beautiful UI design in Adobe Illustrator. We will pretend that I am working for Ms Freeweby who wants a portfolio website.

But first what is a UI design you may ask?

UI stands for User Interface design while UX design stands for User Experience design.

I am not afraid to tell you that if you want to create a great website you will need to work with both.

You will first create your UX design, which is more technical and about how the user will feel and use your webpage. Once you think you’ve done a great job (= your client said you’ve done a great job), you can carry on your project to the UI design. UI design is about the layout of the website such as choice of fonts, colours, button design, pictures, etc.

UI Design in Adobe Illustrator – Be organized with your files

Allow me to live in my Care Bears world and imagine that I already have contents and pictures from my client.

You must always have a folder in your computer named by your project so you can put everything related to the project inside. Create subfolders named after all the pages you are going to build so it will be quite easy for you to find the content you need.

You will save a lot of time for yourself doing that and avoid huge headaches. I’ve been there, so believe me.x

UI Design In Adobe Illustrator – UX design? Done

As I said before I started to create a UX design for Ms Freeweby using UXpin website and she liked what I did. What a relief!

If you cannot afford UXpin you can also use gomockingbird website that allows you to have 1 project with 10 pages for free (you might not see it on the first sight, but look for very tiny sentence saying that there is a free plan available).

The wireframe of the homepage looks like that:

If you want to download this file and practice at home just click here.

UI Design in Adobe Illustrator – Create your grid system

What is a grid you will say?! A grid system is a series of horizontal and vertical lines that provides balance and uniformity between your elements. The user will find the page easy and pleasant to read. Using a grid will also save a lot of time when you are going to build the website and it makes the responsiveness easier to make.

You have to decide what type of grid you want to use before making your wireframe. The most popular grid system used for the last years was a 960 pixels grid and most of the time 12 vertical columns are used. 16 or 24 columns are also used but it would be for a huge and complex website.

If you are using a WordPress theme then just check the size of the theme and stick with it. For this project I choose a 1060 px grid with 12 columns.

I used the gridcalculator website to create it. You can download your grid as an Illustrator, Photoshop or even PNG file.

Here is the file I downloaded if you want to start from there: click here.

This is a preview of what a grid looks like:

Open your grid in Adobe Illustrator

Do not forget to use an artboard with a bigger width than your grid. That will allow Ms Freeweby to understand the grid system and see the full width version of her website. If she does not know anything about the grid system she might first think that her website width is quite small. Adding full width pictures will help her to understand the system.

To change the size of your artboard click on the button below to adjust its size as you wish:

It looks pretty don’t you think?

Next smart step would be to lock your grid so it won’t move when you are working and it won’t mess with your design. Your developer will very much appreciate that!

To do so select the object/element you want to lock and go to object – lock – selection or just click on ctrl and 2.

Add horizontal lines to your grid

An easy way to do that, is to add a rectangle to your artboard:

Once the rectangle is added click on object – path – split into grid:

The height between the lines must be 20 px and the gutter must stay at 0 px.

You can play with the number of rows to reach this result:

Look at that, isn’t it beautiful?

If you want this file I am in a good mood so just click here and download it.

UI Design in Adobe Illustrator – Open your wireframe in Illustratorx

[text-blocks id=”59336″]

You can leave it on your artboard and play with the opacity or you can put it next to your artboard.

Quick tip: holding shift when moving the image will lock it horizontally so it will stay at the same level as your artboard as pictured below:

Quick tip 2: if your wireframe is next to your artboard but you want it back just press the button below and it will perfectly align it in the middle:

Et voilà ! We are now ready to get some fantastic design done!

Start designing your UI design in Adobe Illustrator

If your client did not provide you with content yet just take a deep breath and use browser extensions to generate random text. I am using the Dummy text extension in Google Chrome… because I like the name!

Let’s get started! I would suggest to start from the top and go through to the bottom of your page.

Add a logo to your UI design in Adobe Illustrator

I quickly created a logo with Photoshop and opened the file in Illustrator. I went to freepik website in order to find inspiration and used one of the free logos. Thanks to 365psd for helping me there!

If you want to drag an image that is open in another file in Illustrator just click on the image and slide it into the appropriate file.

Here’s another tip, if you have an element open in Photoshop you can drag it into Illustrator, and vice et versa.

Anyway.

Adjust the size of your logo and here you are, you just started your design!

If you wonder how to adjust the size of the logo: click on one of your image corners and choose the appropriate size.

Quick tip: Don’t forget to hold shift when you do so, it will respect the width/height ratio.

I added some text beside the logo and chose the same colour as inside the logo to give the whole thing some harmony:

If you want to know the exact colour of something just use this button and it will give it you!

I think it looks ok for the time being:

UI Design in Adobe Illustrator – Write down your navigation options

If you need inspiration for the fonts:

You can add to your browser an extension called “what font”. Then you go to random web pages and use the tool on a page you like:

It could be nice to use one font for the header and one font for the paragraph. The website typegenius is very useful, just choose a font and it will give you a couple of propositions:

I will stick to our fonts and use Oswald for the header and Droid Serif for the text.

Quick tip 1: never use black colour for the fonts when you build your page otherwise it would look to dark.

Quick tip 2: take a piece of paper and write down your font style and size choices and stick with it. Your website will look smoother and you will save time for yourself.

I kept the navigation bar simple, with no containers. We see that it does not match 100% my wireframe but sometimes you have to make adjustments when you get the real content.

Quicktip: if you want to be sure that some elements are perfectly aligned (and an awesome designer will do that), select them and use the align function:

Add your header’s picture in your UI design

Do you need pictures?

If your client did not give you pictures yet, have a look to this article that will give you some great websites full of high quality images.

I choose this one for my header:

Let’s open the image in Illustrator and see how it goes:
x

You can see that the image does not fit my design and I will have to re-size it.

To do so there are a few steps to follow:

1. Add a rectangle the size you are looking for.

2. Put the rectangle on your original picture (you can play with the opacity so you can see through the rectangle) and resize and move around your picture until you are happy with it.

3. Make a clipping mask by selecting your image and rectangle and right click on your mouse.x

4. Et voilà ! Place your image and move to the next step.

When I added the content in my picture it was not really readable so I added a rectangle around the text to make it readable.

To do so just add a rectangle around your text and be ready to play with the opacity when you will add the content:

Here is the result:

Do you need to create icons for your UI Design?

Now I would like to add the arrows on both extremities of my images so Ms Freeweby can see that the header is a slideshow

You can find free icons on freepik website but you can also create yours with Photoshop or Illustrator. I quickly created mine in Illustrator:

Look at that!

UI Design in Adobe Illustrator – Create your own buttons

It is time to add and make your own button in the header picture.

Follow these steps and you will quickly make one:

1. Create a rounded rectangle and choose a colour that would fit your design.

2. Add a second rectangle but darker so we can make a shadow effect.

3. If your darker rectangle is in front of the other just right click with your mouse on it and select – send backward.

4. Add the appropriate text and align it in the middle.

5. Select all your elements and right click on your mouse and click on Group.

6. Here you are, you have a button!

Don’t mess with the grid!

Or the developers might get very angry with you when it will be time to build the website!

See on the picture below how I used the vertical grid?

That’s really important.

Using the horizontal alignment is as important as the vertical one I would say. It will help you to ensure that you put the same space between your elements.

Illustrator has the perfect tool when it comes to alignment and it is called Align. You can find it by clicking on Windows – Align or click on shift + F7.

You can find all the alignment options you are dreaming for there! 😉

You can see on the image below that I wanted to ensure that I put the same space between my navigation options. To do so I selected all of them then I clicked on the vertical distribute space and I put 4mm between the elements.

I played with this tool for the vertical alignment of my navigation options but I could do the same for the horizontal spacing between my footer’s 4 elements for example!