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

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!

Michael John Burns

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.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Rew says

    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?

  2. says

    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! :)

  3. Julian says

    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?

  4. Arbon says

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

    • says

      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.

  5. Cindy says

    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?

  6. Jay says

    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!

  7. says

    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.

  8. Shah Faisal says

    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???

  9. Ramon R says

    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.

  10. Jay says

    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.

  11. owa says

    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!

  12. says

    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.

  13. PicasoDoesntLiveHere says

    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.”

  14. says

    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.

  15. Zlatko says

    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.

  16. James says

    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/

  17. Roy E says

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

    • Michael John Burns says

      Hello Jigar,

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

      • Mountif says

        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).

  18. Helen says

    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.

    • Michael John Burns says

      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.

      • Zlatko says

        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

      • says

        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.

        • Michael John Burns says

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