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

Flat web design tutorial from Designmodo. Used pack:
Free: https://designmodo.com/flat-free/
Paid: https://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.

source