Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

Posted in Tutorials, Web Interface1 year ago • Written by 35 Comments

Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content. It’s also very flexible, which is really ideal for responsive web design. If you, like me, love flat design, make sure to check out 40+ Flat Web Design Inspiration. I’m pretty sure you will get goosebumps after seeing several flat designs.

Feeling inspired seeing those designs? Good! Today I will teach you how to design a portfolio landing page- an almost an hour long free video tutorial!


Build Flat Responsive Website from Scratch – Complete Course


It doesn’t matter if you just started using Photoshop. I will guide you throughout the video, step by step using the basic tools and techniques like using  the Text Tool(T), Shape Tool(U) plus quick tips to align elements and masking and manipulating an image.

Resources to complete this Tutorial:

Make sure you download all the resources! Are you ready? Let’s get started!

Flat Web Design Portfolio Landing Page Tutorial

That’s all guys, we’ve just finished our awesome portfolio. We hope you learned something from this tutorial. If you have questions feel free to drop them below. Don’t forget to share this article. Thanks!

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

35 Comments Best Comments First
  • PicasoDoesntLiveHere

    Monday, July 29th, 2013 16:57

    13

    I was a graphic/digital designer well before I started front-end developing. One of my professors in college told me something that has always stuck with me. He said, “Anyone can play with the Net, software, or even pencil and paper. They may create something, but it takes a keen eye and real talent to give it that aesthetic spark that draws people to it.” I know that aesthetics are in the eye of the beholder, but I really feel the line is being blurred here. Developers are supposed to be programmers and vice versa. It’s about the equivalent of the same guy that rebuilds the engine is supposed to also be an expert in painting the car. If he’s skilled in both, hooray, but he’s very rare. I really feel that attention to design is being sacrificed on the chopping block of UX/UI. Just think about it this way: You have identical items sitting next to each other on the shelf. You are given the choice to buy either one. The only difference is, one is boxed in plain brown and says “Item X” in black letters. The other is a carefully designed, fully aesthetic package that is vibrant with color, images of the product, and literature concerning what’s inside. 90% of the people will choose the high end packaging if for no other reason than it is eye catching and gives the feeling of professionalism and dedication. It is my hope that Web Development doesn’t go for the “plain brown wrapper” just because it happens to be a little easier to get a site cranked out that is “gadget friendly.”

    +10
  • Fabian Golle

    Monday, July 29th, 2013 05:27

    11

    Nice Design, but against all odds “Holla” is written “Hola” ;-)

    +5
  • James

    Sunday, July 28th, 2013 08:24

    9

    I just wanted to let you know this tutorial has helped me a lot, thanks for the video, it helps to look over the shoulder of someone that knows what they’re doing in Photoshop.

    I’m learning Photoshop for web design & it’s going slow since there’s so many options in Photoshop. Sometimes it’s difficult to learn even simple task, Photoshop has a lot of hidden shortcuts. Once I learn the shortcuts it gets easier.

    Thanks gain & I hope you’ll consider showing us how to code the html for this psd file tutorial. Right now I’m learning skeleton 960 grid, that’s how I found your site when searching Google, I found your other psd/html tutorial.

    http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/

    +4
    • alex

      Sunday, August 4th, 2013 08:14

      16

      Try Fireworks. This is what is intended to be used for web design unlike photoshop.

      -2
      • Maxime

        Friday, October 18th, 2013 20:45

        35

        Forget about Fireworks. Adobe announced that there will be no further development of their Fireworks application

        -1
      • Jay

        Thursday, August 8th, 2013 14:04

        23

        Sucks that Adobe killed Fireworks, though.

        +4
  • Vivek Kumar Poddar

    Wednesday, August 7th, 2013 12:08

    21

    Great tutorial and great design. Just wanted to request for wordpress theme development tutorials. Will there be any such guide in the future & if so thanks in advance.

    +2
  • Ramon R

    Tuesday, August 6th, 2013 04:50

    19

    So when creating the mock up with the 960 grid I get confused on the size. What is the common size to make a layout. 1600 x 2800 just seems big. Could you please explain a little more. Thanks.

    +1
  • Jay

    Thursday, August 8th, 2013 04:32

    22

    Great tutorial. Something that i struggle to understand is how you arrive at the baseline grid dimensions in relation to text size and line spacing. I love grid based layouts but the math of setting them up still confuse me. Can you explain this further, or maybe explain further in an in depth tutorial? Thanks!

    +1
  • Anna

    Friday, August 30th, 2013 14:43

    31

    Hi Michael,
    Thanks for the tutorial, I’m new in flat design and I think it’s very interesting and useful.
    However, I have some questions for you:
    – How can I convert this .psd into a web with links, animations (for portfolio), pages, etc?
    – Why you mainly use 120px distance between elements? Is it more user friendly then?

    Thanks a lot! :)

    +1
  • Big Orange

    Monday, July 29th, 2013 11:19

    12

    hi- I’ve run a web design company for 10 years and had never heard of the concept of flat web design before seeing this- no kidding here.
    I guess you really do learn a new thing every day..
    Anyway just googled the term and its a pretty straightforward concept. Not sure if I’m in to the concept but at least now know what it means- kudos for bringing it to my attention.

    +1
  • owa

    Monday, August 5th, 2013 11:17

    17

    Hey Michael!

    Thanks for this tutorial. I use HTML / CSS directly for my lay out that’s why it takes me a lot of time to create a single page. From this I learned so much, I didn’t really expect photoshop can make a big help. Now I’ll practice more on photoshop.

    astig!

    0
  • ahadaily

    Tuesday, July 30th, 2013 09:58

    15

    Michael

    thanks for giving insight about flat design, the much hyped niche amongst web designers and developers.

    I agree, there is no harm in revising the known stuff with different resources available as who knows if you could create things differently but in a better way. The outproduct might seem familiar but the process could be much simpler than what is known. So, keep your mind open for ideas and let it flow.

    I am in the process of listing out best of flat design tutorials and this surely makes up the list.

    0
  • Jay

    Tuesday, August 6th, 2013 03:49

    18

    Thanks for sharing, I’m learning a lot from your tutorials and from the site in general. Keep up the good work it is appreciated.

    0
  • Bogdan

    Saturday, August 17th, 2013 17:34

    27

    Nice man. Thanks a lot!

    0
  • Julian

    Tuesday, August 27th, 2013 11:35

    30

    Great tut!
    I have a question that why you used the 6px patten as a baseline grid?Why not a 4px pattern or 2px? Is it more convenient to adjust the layer’s position by using 6px?

    0
  • Rew

    Monday, September 9th, 2013 00:23

    32

    Hello, I’m a beginner web designer so forgive me for not knowing all the rules of the web. Since you posted this would I be allowed to use your portfolio design to hold my designs?
    Or is this for learning purposes only?

    0
    • Rean John Uehara

      Monday, September 9th, 2013 02:29

      33

      Hi Rew, feel free to use it the way you want!

      +1
  • Nguyen Minh Khoi (UpReseller)

    Friday, August 23rd, 2013 06:08

    29

    Flat Design is new style which we need to try. I hope on next future we can find more resources regarding this kind of style.

    Thanks again for sharing, but I hope you can make more tutorials on same :)

    0
  • Shah Faisal

    Tuesday, August 6th, 2013 05:00

    20

    thank you so much i m graphic designer now moving to web can u plz suggest me what is the best full page of chrome or firefox size i m creating website in photoshop and next part how to make HTML or coding i done know what you say???

    0
  • Janos

    Friday, September 27th, 2013 08:44

    34

    Nice tutorial. I’d love it. Thanks.

    -1
  • Cindy Therenciel

    Monday, July 29th, 2013 23:16

    14

    Hi.

    Are you using Photoshop CS6?

    -1
  • Zlatko

    Monday, July 29th, 2013 00:27

    10

    Actually, it would be interesting to see how would guys and gals manage to do something in ps from jpg. Than we would see a much more on ways of producing.

    -1
  • Cindy

    Friday, August 9th, 2013 00:16

    25

    Hello. I love your guide.

    However, you know how you made underlines under the links at the top, right? How exactly can you convert all of that, plus the sliding images to HTML?

    Is there any way to convert it with a fluid/liquid layout?

    -1
  • Roy E

    Sunday, July 28th, 2013 02:07

    3

    flat-web-design-portfolio-preview.jpg really looks bad when viewed in IE 10 but looks fine in Firefox and Chrome.

    -2
  • Arbon

    Saturday, August 10th, 2013 14:47

    26

    I hate this type of design it seems lazy. This is a horrible trend and needs to stop.

    -6
    • Robin

      Tuesday, August 20th, 2013 05:34

      28

      Why is it lazy? Because you don’t get to spend time doing gradients and dropshadows? It takes the same considerations about color, lines, plane division, shape and typography. Trust me, you can do this wrong even without all the effects.

      +4
  • Helen

    Saturday, July 27th, 2013 13:32

    1

    It’s pretty easy to design a single page website without real content. I guess I could make a dozen of these in one hour.

    -17
    • Michael John Burns

      Sunday, July 28th, 2013 02:25

      5

      Hello Helen,

      Yes it is for us who already know. But how about to those people out there who just started? When I was just started I learn it from video tutorial as well and following tutorials step by step. Even a simple layout looks hard to do if you don’t have enough knowledge.

      +32
      • Zlatko

        Sunday, July 28th, 2013 04:56

        6

        I think that there is still a lot to learn from these tuts. Actually this tut is good for beginners but also to remind some skilled guys on basics, and maybe to pull something more from it (smile as you want, but once you will face it). Its’s nice work Michael.

        Thanks

        Zlatko Vujicic

        +6
      • Designer Ledger

        Sunday, July 28th, 2013 06:08

        7

        Totally agree with you Michael here.
        Don’t judge the book from it’s cover. May be there’s one technique used in this video tutorial which you never knew. I watch tutorials even I know how to do the things. This way I see how others handle the same work.

        +8
        • Michael John Burns

          Sunday, July 28th, 2013 07:42

          8

          Exactly Designer Ledger. I love to examine psd as well. I wanted to see how other designers handle the layers and styles :)

          0
  • Jigar Makwana

    Sunday, July 28th, 2013 00:55

    2

    Hello Michael,

    Nice Design & Tutorial.

    -79
    • Michael John Burns

      Sunday, July 28th, 2013 02:18

      4

      Hello Jigar,

      Thanks! How do you find the tutorial? I hope you learn something from it.

      +3
      • Mountif

        Thursday, August 8th, 2013 21:00

        24

        When I insert the flat ui on Photoshop he writes me: the polices of certain copies of text are missing. She owes etre replaced has at the end which copies can etre used for a vectorial exit(release).

        -3
  • Janos

    Friday, September 27th, 2013 08:44

    34

    Nice tutorial. I’d love it. Thanks.

    -1
  • Rew

    Monday, September 9th, 2013 00:23

    32

    Hello, I’m a beginner web designer so forgive me for not knowing all the rules of the web. Since you posted this would I be allowed to use your portfolio design to hold my designs?
    Or is this for learning purposes only?

    0
    • Rean John Uehara

      Monday, September 9th, 2013 02:29

      33

      Hi Rew, feel free to use it the way you want!

      +1
  • Anna

    Friday, August 30th, 2013 14:43

    31

    Hi Michael,
    Thanks for the tutorial, I’m new in flat design and I think it’s very interesting and useful.
    However, I have some questions for you:
    – How can I convert this .psd into a web with links, animations (for portfolio), pages, etc?
    – Why you mainly use 120px distance between elements? Is it more user friendly then?

    Thanks a lot! :)

    +1
  • Julian

    Tuesday, August 27th, 2013 11:35

    30

    Great tut!
    I have a question that why you used the 6px patten as a baseline grid?Why not a 4px pattern or 2px? Is it more convenient to adjust the layer’s position by using 6px?

    0
  • Nguyen Minh Khoi (UpReseller)

    Friday, August 23rd, 2013 06:08

    29

    Flat Design is new style which we need to try. I hope on next future we can find more resources regarding this kind of style.

    Thanks again for sharing, but I hope you can make more tutorials on same :)

    0
  • Bogdan

    Saturday, August 17th, 2013 17:34

    27

    Nice man. Thanks a lot!

    0
  • Arbon

    Saturday, August 10th, 2013 14:47

    26

    I hate this type of design it seems lazy. This is a horrible trend and needs to stop.

    -6
    • Robin

      Tuesday, August 20th, 2013 05:34

      28

      Why is it lazy? Because you don’t get to spend time doing gradients and dropshadows? It takes the same considerations about color, lines, plane division, shape and typography. Trust me, you can do this wrong even without all the effects.

      +4
  • Cindy

    Friday, August 9th, 2013 00:16

    25

    Hello. I love your guide.

    However, you know how you made underlines under the links at the top, right? How exactly can you convert all of that, plus the sliding images to HTML?

    Is there any way to convert it with a fluid/liquid layout?

    -1
  • Jay

    Thursday, August 8th, 2013 04:32

    22

    Great tutorial. Something that i struggle to understand is how you arrive at the baseline grid dimensions in relation to text size and line spacing. I love grid based layouts but the math of setting them up still confuse me. Can you explain this further, or maybe explain further in an in depth tutorial? Thanks!

    +1
  • Vivek Kumar Poddar

    Wednesday, August 7th, 2013 12:08

    21

    Great tutorial and great design. Just wanted to request for wordpress theme development tutorials. Will there be any such guide in the future & if so thanks in advance.

    +2
  • Shah Faisal

    Tuesday, August 6th, 2013 05:00

    20

    thank you so much i m graphic designer now moving to web can u plz suggest me what is the best full page of chrome or firefox size i m creating website in photoshop and next part how to make HTML or coding i done know what you say???

    0
  • Ramon R

    Tuesday, August 6th, 2013 04:50

    19

    So when creating the mock up with the 960 grid I get confused on the size. What is the common size to make a layout. 1600 x 2800 just seems big. Could you please explain a little more. Thanks.

    +1
  • Jay

    Tuesday, August 6th, 2013 03:49

    18

    Thanks for sharing, I’m learning a lot from your tutorials and from the site in general. Keep up the good work it is appreciated.

    0
  • owa

    Monday, August 5th, 2013 11:17

    17

    Hey Michael!

    Thanks for this tutorial. I use HTML / CSS directly for my lay out that’s why it takes me a lot of time to create a single page. From this I learned so much, I didn’t really expect photoshop can make a big help. Now I’ll practice more on photoshop.

    astig!

    0
  • ahadaily

    Tuesday, July 30th, 2013 09:58

    15

    Michael

    thanks for giving insight about flat design, the much hyped niche amongst web designers and developers.

    I agree, there is no harm in revising the known stuff with different resources available as who knows if you could create things differently but in a better way. The outproduct might seem familiar but the process could be much simpler than what is known. So, keep your mind open for ideas and let it flow.

    I am in the process of listing out best of flat design tutorials and this surely makes up the list.

    0
  • Cindy Therenciel

    Monday, July 29th, 2013 23:16

    14

    Hi.

    Are you using Photoshop CS6?

    -1
  • PicasoDoesntLiveHere

    Monday, July 29th, 2013 16:57

    13

    I was a graphic/digital designer well before I started front-end developing. One of my professors in college told me something that has always stuck with me. He said, “Anyone can play with the Net, software, or even pencil and paper. They may create something, but it takes a keen eye and real talent to give it that aesthetic spark that draws people to it.” I know that aesthetics are in the eye of the beholder, but I really feel the line is being blurred here. Developers are supposed to be programmers and vice versa. It’s about the equivalent of the same guy that rebuilds the engine is supposed to also be an expert in painting the car. If he’s skilled in both, hooray, but he’s very rare. I really feel that attention to design is being sacrificed on the chopping block of UX/UI. Just think about it this way: You have identical items sitting next to each other on the shelf. You are given the choice to buy either one. The only difference is, one is boxed in plain brown and says “Item X” in black letters. The other is a carefully designed, fully aesthetic package that is vibrant with color, images of the product, and literature concerning what’s inside. 90% of the people will choose the high end packaging if for no other reason than it is eye catching and gives the feeling of professionalism and dedication. It is my hope that Web Development doesn’t go for the “plain brown wrapper” just because it happens to be a little easier to get a site cranked out that is “gadget friendly.”

    +10
  • Big Orange

    Monday, July 29th, 2013 11:19

    12

    hi- I’ve run a web design company for 10 years and had never heard of the concept of flat web design before seeing this- no kidding here.
    I guess you really do learn a new thing every day..
    Anyway just googled the term and its a pretty straightforward concept. Not sure if I’m in to the concept but at least now know what it means- kudos for bringing it to my attention.

    +1
  • Fabian Golle

    Monday, July 29th, 2013 05:27

    11

    Nice Design, but against all odds “Holla” is written “Hola” ;-)

    +5
  • Zlatko

    Monday, July 29th, 2013 00:27

    10

    Actually, it would be interesting to see how would guys and gals manage to do something in ps from jpg. Than we would see a much more on ways of producing.

    -1
  • James

    Sunday, July 28th, 2013 08:24

    9

    I just wanted to let you know this tutorial has helped me a lot, thanks for the video, it helps to look over the shoulder of someone that knows what they’re doing in Photoshop.

    I’m learning Photoshop for web design & it’s going slow since there’s so many options in Photoshop. Sometimes it’s difficult to learn even simple task, Photoshop has a lot of hidden shortcuts. Once I learn the shortcuts it gets easier.

    Thanks gain & I hope you’ll consider showing us how to code the html for this psd file tutorial. Right now I’m learning skeleton 960 grid, that’s how I found your site when searching Google, I found your other psd/html tutorial.

    http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/

    +4
    • alex

      Sunday, August 4th, 2013 08:14

      16

      Try Fireworks. This is what is intended to be used for web design unlike photoshop.

      -2
      • Jay

        Thursday, August 8th, 2013 14:04

        23

        Sucks that Adobe killed Fireworks, though.

        +4
      • Maxime

        Friday, October 18th, 2013 20:45

        35

        Forget about Fireworks. Adobe announced that there will be no further development of their Fireworks application

        -1
  • Roy E

    Sunday, July 28th, 2013 02:07

    3

    flat-web-design-portfolio-preview.jpg really looks bad when viewed in IE 10 but looks fine in Firefox and Chrome.

    -2
  • Jigar Makwana

    Sunday, July 28th, 2013 00:55

    2

    Hello Michael,

    Nice Design & Tutorial.

    -79
    • Michael John Burns

      Sunday, July 28th, 2013 02:18

      4

      Hello Jigar,

      Thanks! How do you find the tutorial? I hope you learn something from it.

      +3
      • Mountif

        Thursday, August 8th, 2013 21:00

        24

        When I insert the flat ui on Photoshop he writes me: the polices of certain copies of text are missing. She owes etre replaced has at the end which copies can etre used for a vectorial exit(release).

        -3
  • Helen

    Saturday, July 27th, 2013 13:32

    1

    It’s pretty easy to design a single page website without real content. I guess I could make a dozen of these in one hour.

    -17
    • Michael John Burns

      Sunday, July 28th, 2013 02:25

      5

      Hello Helen,

      Yes it is for us who already know. But how about to those people out there who just started? When I was just started I learn it from video tutorial as well and following tutorials step by step. Even a simple layout looks hard to do if you don’t have enough knowledge.

      +32
      • Zlatko

        Sunday, July 28th, 2013 04:56

        6

        I think that there is still a lot to learn from these tuts. Actually this tut is good for beginners but also to remind some skilled guys on basics, and maybe to pull something more from it (smile as you want, but once you will face it). Its’s nice work Michael.

        Thanks

        Zlatko Vujicic

        +6
      • Designer Ledger

        Sunday, July 28th, 2013 06:08

        7

        Totally agree with you Michael here.
        Don’t judge the book from it’s cover. May be there’s one technique used in this video tutorial which you never knew. I watch tutorials even I know how to do the things. This way I see how others handle the same work.

        +8
        • Michael John Burns

          Sunday, July 28th, 2013 07:42

          8

          Exactly Designer Ledger. I love to examine psd as well. I wanted to see how other designers handle the layers and styles :)

          0

Comments are closed.

54.90.230.125 - unknown - unknown - US