Are You Charging Enough?

Learn to charge what your worth, take our free course.

How to Design a Website Using UIkit

Since Ethan Marcotte introduced responsive web design in 2010, responsive design has become adopted by many web developers around the globe, front-end frameworks started to appear and become a must-have tool for front-end developers.

Paul Irish announced html5 boilerplate the same year, Twitter’s Bootstrap and Foundation arrived the year after, and now, a few years later, we have over 10 front-end frameworks that are used on a regular basis by many developers over the globe.

One of them is UIkit, a lightweight and modular front-end framework for fast and powerful web interfaces, built by people at YOOtheme as they said, with love and caffeine!

It is responsive, developed in LESS with collection of responsive components, a customizer and themes that you can create by yourself.

About tutorial

In first part, we are going to design portfolio website. I’ll show you how to install and use Google fonts on your desktop and how to design using UIkit’s grid system.

Second part is going to be dedicated to development of this template.
We are going to install adobe brackets, and set a emmet plugin which is going to help us to write code faster, set our HTML5 document, and download and setup scripts that we need.

What are we going to use?

Brackets

Brackets is an open source code editor for web designers and front-end developers. It’s written in javascript, html and css.
It has features like live coding and quick edit and its free and open source.

Emmet

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

UIkit

UIkit is a lightweight and modular mobile-first front-end framework for developing fast and powerful web interfaces.
It has customiser and themes and it’s very easy to create your own look.

SkyFonts

SkyFonts is a lightweight, patent-pending utility that allows you to effortlessly install desktop fonts and sync them
on up to five of your devices and also jQuery hosted from google and google fonts.

Ok let’s get started!

For this tutorial we need following assets:

First head over at SkyFonts, download SkyFonts app and install it.

This app will allow you to add Google fonts to your collection and use it with your Photoshop.

Ok, let’s open 1200px-grid.psd and set our document size.

Use Image > Canvas size… command or CTRL+ ALT + C, and the Canvas size dialog box will open.

In New size section use this settings:

With File > Save As command save it as index.psd.

Select 1200px layer and press CTRL+T, adjust height of grid layer to full height of document, and create some guides. Go to View > New Guide… and set following horizontal guides: 10px, 160px, 700px, 800px, 900px, 1000px, 1200px, 1250px, 1450px and 1550px.

Designing header

Head over to layers panel, and create 3 folders and rename it to: header, heading section and services section.

Click on header folder, select Rectangle Tool or hit U, select white color for foreground color and create one 1200px x 150px rectangle between 10px and 160px horizontal guide.
Select that layer in layer panel, rename it to bg. With this layer selected click Add a layer style in bottom of layers panel and add Drop Shadow with this settings:

Now, we need avatar, get one on uifaces.com, and make sure that you get it in at least 70px size and with border radius of 64px.

In header folder, create one more folder and name it avatar, select Ellipse Tool or hit U and create 70px x 70px circle, rename it to avatar, add 5px stroke to it with #e5e5e5 color.

Put image from uifaces in this folder but above this circle, ALT + click between this two and create Clipping Mask. Position this avatar folder on left side of header and center it vertically. This is going to be our logo.

Ok, now we need to add PT Sans font from “Google fonts” so we can use it with our Photoshop.

Run SkyFonts app, use Services > Google Fonts command in upper menu, it will open browser with page where you can search Google fonts and add it to your collection. Search for PT Sans Regular, on the right, click on blue SkyFonts button and click Add.

Now, when we have our font of choice, select Horizontal Type Tool or use T shortcut and set following settings in tool panel: for font select PT Sans, for font size select 14pt and for color #b3b3b3, create our main menu and position it on right side of our header section.

Designing heading section

Get image for our heading section or use this one, be sure that you have image at least 1920px in width.
This is going to be background image of our heading section, so open image with command File > Open…, use shortcut CTRL + ALT + I and Image size dialog box will open, in Pixel Dimension section set width of our image to 1200px.

Now, go to our index.psd document tab, make active ”heading section” folder in layers panel. With this folder active, hold down CTRL key and click on Make a new group at bottom of layers panel (this command is going to create a new folder in selected folder – make sure that your folder is open), rename this folder to bg, make this folder active (click on it) and create rectangular shape between 160px and 700px guides.

Go to tab where our bg image for heading section is, select Move Tool from tools panel or just hit V, drag this image over at index.psd file and position it over rectangular shape that was created few seconds ago.

In layers panel, make this image layer above rectangular shape and create clipping mask with holding ALT key and clicking between this two layers.

Let’s create some blur effects, make this image layer active and use Filter > Blur > Gaussian Blur… and use these settings:

Ok, it looks nice, but we will add one more effect to this image, with this layer selected, in the bottom of layers panel, click on little fx icon and click Color Overlay…, in Color section use normal for blend mode, use #6d8f7e for color and set opacity to 30%.

One more thing and our heading section is over!

Head over to layers panel, and in heading section folder, create one more folder and name it heading text. You can select heading section folder and CTRL + click on Create a new group in bottom of layer panel to automatically create folder in selected folder.

Grab Horizontal Type Tool or hit T, set Font Family to PT Sans, color to white and font size to 36pt, position it over at heading area and create type layer with this text: “Hello, I’m Crag Keller” or you can use your ui name, I got this one on uinames.com.

Deselect this type layer and set font size to 18pt, leading to 30pt and create one more type layer with this text:
”web designer and front-end developer with passion for content oriented and interactive user interfaces”.

With this layers we finished our heading section and it looks something like this:

Designing services section

In beginning of every section , we are going to create heading with that section name, go over at layers panel and in services section folder create one more folder and name it heading, grab Horizontal Type Tool, type “Services” and use these settings:

Deselect this layer and set new properties for new type layer, set 14pt for font size, #b2b2b2 for color, in Character panel select Faux Italic and drop some text, I will use Lorem ipsum.

Create two more folders in services section folder and rename it to design and another to development.
In design folder, create two more, one text and one Icon.

With design folder selected, select Ellipse Tool, and select #80a894 for color. Click somewhere and Create Ellipse dialog box will open, enter 200px for width and height.

Position this circle between 1000px and 1200px guide and use one of flat icons like this:

Now we need heading for that service, grab Horizontal Type Tool, set 22pt for font size and #80a894 for color, click and create type layer with this text: “Web/ui/ux Design”, deselect this layer, with Horizontal Type Tool selected, select #b2b2b2 for color, in Character panel select Faux Italic and make one more type layer beneath last layer and type some text, I will use lorem ipsum. Align this two layers like this:

For our second service, between 1250px and 1450px guides, we are going to use same settings as above, but arrange it a little different. For service name use “Web Development”, for services text use some Lorem ipsum and use different icon for service icon, like this:

With this, we finished the Services section. Let’s get started with Work section.

Designing work section

Ok, since we ran out of guides, we need to create some, go to View > New Guide… and create these guides: 1650px, 1750px, 1850px,1900px, 2200px, 2250px, 2300px, 2600px and 2700px.

Now go to layers panel and create new folder and name it work section, in that folder, make another three and name it heading, work one and work two.

This section is going to have green bg, so select Rectangle Tool or hit U, select #80a894 for foreground color and create one rectangular shape between 1550px and 2650px guides.

In work section folder create one more folder, name it bg and put this green rectangular shape in it, and lock it.

Now we need heading for this section, select heading folder in layers panel, and select Horizontal Type Tool. For heading font select PT Sans, for size select 30pt, for color select #597567 and select Faux Italic and All Caps. Type “Portfolio” in between 1650px and 1750px guides.

For little descriptive text under heading, use this settings: PT Sans, 14pt, #ffffff and select Faux Italic. We are going to highlight years in this text with same color like we used in heading layer – #597567.

Select work one folder in layers panel, create two folder inside, and rename it to text and browser.

We need a heading as a project name, so select text layer in layers panel, and hit T.

Use the settings below and create type layer with project name between 1900px and 2200px guides, for text I used “some design project”.

We’ll add a little description text under this heading, with following settings, create block of text, I used Lorem Ipsum.

The last thing on this side is button, use Rounded Rectangle Tool, with this color #6d8f7e and make a little 120px x 40px rectangle with 3px radius. Use #ffffff color and 14pt font size and type “see more >” on top of this button. For now we have something like this:

On right side of this project, we are going to put browser with a small preview of this project. Go over here and grab this .psd, we’ll use it as browser preview.

Open file and drag it to our project, place it on the right side and resize it as you wish.

For project prev, use image from .rar file that you’ve downloaded with grid system. Open browser folder in layers panel, place it above content layer and ALT + click it to create a Clipping Mask, and that’s it.

Last thing we need to do is to align this layers. For width of these project preview I used eight columns and left one column on both sides.

For second project, use same settings like we used in creating first project, but reverse order of layers, put browser on the left side and project description on the right, like this:

With this we finished our work section of our website and our layers panel should looks like this:

Designing about section

Let’s start by creating guides, with View > New Guide… command create next guides: 2800px, 2900px, 2950px, 3050px.

Head over at layers panel and create about section folder and in this folder create another one and rename it to heading like in previous sections.

Hit T, use PT Sans for font, 30pt for font size, #80a894 for color and between 2800px and 2900px guide create our heading. Use same font but change font size to 15pt and color to #b2b2b2 and create our small subheading, like this:

Next, we need a little avatar to put it around here, we can copy avatar that we have up in header or just create another one, the choice is up on you, I’ll use one from header section.

Go over at header, select avatar folder in layers panel and use ALT + down arrow command to create copy. Grab that copy and put it in about section folder in layers panel. Now we just need to relocate avatar layer between 2950px and 3050px guides.

Under this avatar, we are going to put some about me text, I’ll use some Lorem ipsum but you can use whatever you wish. Hit T and use 14pt PT Sans with #b2b2b2 color and Faux Italic options selected in character panel, and select Center text in toolbar or in paragraph panel, next to character panel.

If you don’t see it, you can turn it on with Window > Paragraph command.

But before we create this text, we need more guides on 3100px, 3350px and 3450px.

Create our text in between 3100px and 3350px guide.

Our about section looks like this:

Designing contact section

Last section of our portfolio website is going to be contact section. In this section we are going to put some contact information and some social icons.

Let’s start!

First, head over at layers panel and under our last folder create one more and name it contact section.

In this folder we need 5 more folders: heading, contact informations, social menu, copyright and bg, go and create them.

Select bg folder and select Rectangle Tool from tools panel or just hit U, select #80a894 for color and make one rectangle shape that’s going to be our background for this section.

Since we ran out of guides, we need to create some: 3550px, 3650px, 3700px, 3750px, 3800px, 3900px, 3950px, 4000px, and 4050px.

Let’s create heading for this section. Select heading folder in layers panel, grab Horizontal Type Tool and create our heading between 3550px and 3650px guides, with the following settings.

Under this, put a little subheading, with text “Let’s be friends”, use 15pt PT Sans, for color select white and turn on Faux Italic in character panel.

Our heading looks like this:

Hit T again and use type settings like for subheading and select Center text from toolbar, create some info text between 3700px and 3750px guides.

After this little info text, put some e-mail address. Use 24pt PT Sans with #6d8f7e color, select Faux Italic from character panel and type: “crag.keller@gmail.com” between 3750px and 3800px guides.

Our info text looks like this:

Ok, next thing is our social menu and a little text above it. So, go to layers panel and select social menu folder, hit on keyboard and use same settings as for subheader and info text. Type “or on social networks:” between 3800px and 3900px guides.

Now, let’s handle our social menu. For icons we are going to use Simple social icons from Pixeden.
Open and choose four social icons of your choice, I’ll use Facebook, Dribbble, Twitter and Pinterest.

Next thing, use Rounded Rectangle Tool and create one 30px x 30px circle shape and add a 2px white stroke.
Now, copy that shape four times, for space between shapes use 25px. For shape colors use colors of selected social networks. I’ll use #3b5998 for Facebook, #df3e7b for Dribbble, #00b9f4 for Twitter and #cd1e25 for Pinterest.

Head over to layers panel and in social menu folder in social section folder create four folders, rename it to your social menu of choice and place our shapes in it.

We just need to add our social icons to our shapes and social menu is finished.

In layers panel, this is how our social menu folder looks like:

Few last things and we are finished. Let’s add our copyright. Hit T, and use 14pt PT Sans with #6d8f7e color and Faux Italic selected. Type “© 2014 – Crag Keller” between 3950px and 4000px guides. All that’s left is our bottom border of contact section.

Select our bg rectangle and with ALT + down arrow, duplicate it. Select that duplicated layer, change color to that shape to #6d8f7e and locate it under our bg rectangle.

Move it down to 4060px guide and that’s it, we are done! Congrats!

Finished design:

Click on the image below to see full view.

Download Free PSD

Did you enjoy this post?

Never miss a blog post. Subscribe below to get more posts like this sent straight to your inbox as soon as they're published.

Powered by ConvertKit