How to Create a Website in Flat Design Style (Video Tutorial)

Share it with your friends Like

Thanks! Share it with your friends!

Close

Flat web design tutorial from Designmodo. Used pack:
Free: http://designmodo.com/flat-free/
Paid: http://designmodo.com/flat/

First, you make a new document, 1200 wide and 2900 high. It is easier to design the main menu with the logo if the auxiliary line is 100px. Open the file with the logo. Drag and place the logo on the left side of your design. Now, create the main menu to have a Helvetica font. Create 4 buttons: home, work, blog and contact. Using the move tool, place the menu in the upper right corner. Set the style of the font to bold and the size to 14pt. To simplify the designing process, create a color pallet which you can import. Now, pick the dark gray in the color pallet for the color of the text in the main menu. Open your UI design elements pack and locate the button which you will use for your menu. Using the move tool, click and drag the desired element into your design. The default text can be changed by a double click on the icon in the layer and then write in it SIGN IN. The next step is adapting the size of the button to your text. When you are finished and the button is put into its position, select these layers and group them. In order to place them more easily, drag the layer called grid940 from the Design elements pack. Now, go over to the design of the header section. Make a rectangle about 760px high. Pick again the color from the pallet that suites your design. Rename the layer Bg-header so you can manipulate it more easily. Now, create the main title with white letters and make their size 38pt and create the subtitle by duplicating the layer with the title but set the font size to 24pt here. Pick Huge button from the Design elements and drag it to your design. This button will call to action, write on it Sign up with facebook. Name your group as you named your button. To make the button more noticeable, make the stroke 1px thick and make it a darker color than the header background. The size should be adapted to the written text. Locate in the design elements pack a facebook icon and drag it into your call to action button. Place it in the middle of the header section. Place the MacBook picture in the lower half of the header. Open the document with the picture and drag it into your design. Place the picture so that the header background section cuts it in half. Place the screen shot on the screen of the MacBook to be an example of your work. Drag the picture onto your design and position it. Draw a rectangle which will serve as a mask. Place it under the screen shot layer and, while holding the ALT key on the keyboard, click exactly between the two layers. Position it a little better, and voilà, everything fits in perfectly. Now, draw three circles which will control the layer which your have created so far. Make the first orange and the other two gray. When the header is finished, you can group its layers. Now, we move over to creating the content section. Turn the grid on so that positioning will be easier. I have already prepared a text you can copy. Make the title Helvetica light, size 36pt. Spread the content under the title on the entire width of the design and set the font to Lato regular, size 18pt. Make the title a dark blue color. Under it on the left side, create a rounded rectangle which will be the mask of the video example. Open and place the screen shot video material which should be on this spot. Hold the ALT key again and click between the two layers and the created mask. Now, set the size and the position of the picture and, of course, turn off the remaining border. Place the title and the description of the video on the right from the video material. Drag two buttons from the Design pack. One to call to shopping in the App store, the other to call to shopping on Google Play. Use the icons from the library for these two buttons. Now, you can group the layers you have created. Import and place a large sign under it which will split it into two sections. Create a title and subtitle under it. The title will be Helvetica medium 36pt, and the subtitle Helvetica light 25pt. You have received along with your packet a library of line icons which you can use as icons for your services. You will need LIGHTBULB, SPEAKER, PAPER PLANE AND A PLACE ICON. Copy the title and the subtitle first. The title will be in font Lato bold 22pt dark blue and the content will be Lato regular 16pt gray. Make 4 copies of the title and the content. Place the appropriate icons under each title. Position the whole section in the middle of the design and change three texts by copying your text document. Don’t forget to analyze and group the layers when finishing your design. Make a subscribe section under the Content section. Make a rectangle as a background first. Make the background light gray. Place over it in big letters Enter your e-mail. Drag the button from the Design packet to the right from the text with the Subscribe Now text on it.

Comments

balaji Sateesh says:

how to take design to html/dreamweaver

Michael Sanyaolu says:

Which adobe photoshpe-o do you use

Rodriguez Stark says:

So now that i made a design in for example photoshop. How do I make a website with that design?

Solar Flare says:

do you have to pay

Douglas Telles says:

No insert links?

Ralf Fettkenheuer says:

Website creation? This is just designing it, not creating it. The final stage is missing.

Bill Alexander says:

1:03 How do you make the space in between these word exactly equal? When I use tab, the space is inconsistent. Also, there is no grid 940 layer… or is that supposed to be the paid version? I guess I shouldn't expect an answer back because no one else here has been replied to.

Дядя Вася says:

Where can I download a grid?

Neelesh Rupear says:

Can i have the download link please :D

Alex Wohlbruck says:

Wow, you sloppily threw together a website design in Photoshop, and when you were finished all you're left with is a useless image. What kind of tutorial is this?

Império Fandoms says:

Perfect! This is much beautiful.

Curtis Smith (Shupshe) says:

Interesting Vid. But you can't download the pack listed without either buying it, or giving them control of your twitter, google+, or facebook account. Oddly very scam like, if you ask me.

There are really free element downloads out there. Be wary of this one.

Δωρα Τερπου says:

Copy the text below to three different places on the web!

sam boug says:

How to put an web design into a website?

AimOnTargets says:

now to the hard part for me ( how to I apply this to the website code) I know how to design but I don't know how to code :P)

Samih says:

The title of the video should be host to design on Photoshop 🙂 But that is beautiful work you've put together..

John PiaPian says:

plzz could you give me your all resources..?

OnlyLeprechaun says:

Link to font? Thanks would be very appreciated 

Mirjalal Talishinski says:

incredible!! thanks very much.

Guri sichinava says:

Nice man

Prince Sidhu says:

Explained a lot of things in just a short time!…Worth watching….Thanx..

Agnes YM says:

What is the point of doing webpage in photoshop? How are you going to transfer the design to html please? If the page is in psd format, the search engine can never find your content! 

Frederick Baeza says:

HTML is a good option to adopt. Video is quite vague 

verbindungsfehler says:

WTF that description. dude, u got a lovely voice but that description is just too much effort :D

Alessandro Tenconi says:

Amazing tutorial! Thank you for sharing

Daniel Clark says:

nice tutorial good job

Vuhdo GFX says:

This video is terrible in every aspect except for giving the basics to what a website needs… And even that can be found online.

benraouane tahar says:

create professional UI/UX designs for just  $5 Order now!
http://www.fiverr.com/creative4ever/do-ui-designs-for-you … 

Write a comment