3 Flat Design Video Tutorials to Change Your Design Style

Posted in Quick Tips, Tutorials, Web Interface • Posted on 3 Comments

We truly live in a flat world! With iOS7, Android and even Windows Metro now adapting the flat design layout trend, the world has become a flatter place, indeed. Flat design video tutorials are a great help in the transition.

Website designs have followed the same pattern, transforming their sites to become easy-to-browse, colorful, responsive and simple. How is this made possible?

  • The use of larger and wider spacing
  • The use of simpler logos
  • The use of slightly desaturated colors
  • The use of thinner fonts

For starting and freelance web designers, it might be very difficult at first to learn the philosophy of flat design. Of course, you are born during the Skeumorphic Design Era, where all should be seemingly real and predominantly having 3D designs.

Here comes a new design trend, totally revamping all the ‘this-is-the-right-thing-to-put-on-your-page’ knowledge that you previously had and believed to be gospel.

Why shift to Flat Design?

  • Skeumorphic Design is so two years ago. More and more clients look at Flat Design web pages nowadays.
  • If you’re going to stick with something that’s old and out of style, clients will think that your company is the out of style too.
  • Flat Design is easier to look at in any web browser.

Why would you find it difficult to shift from Skeumorphic to Flat Design?

  • Because you’re too in love with depth. Depth, which is utterly removed in Flat Design, is the life and blood of skeumorphism. Removing it will surely give skeumorphists a hard time.
  • Because you want everything to look ‘real’. Again, with the death of depth, you will find every simply designed element as ugly because your usual design styles don’t seem to fit with the new one.

This will be very difficult, yes, but worry not. There are good samaritans out there who would help you change your innate design style! They will assist you in every way they can; all you need to do is to listen! Now, you would be able to learn practically anything without even leaving your computer screen. It has proven to be helpful, especially to newbies.

Flat design web tutorials are part of the probably billions of how-to’s on YouTube. I have found five great web design tutorials that would help you adjust to the new flat design trend!

Zach Swineheart’s Flat Design Tutorial (Part 1 and Part 2)

Flat Design Tutorial

The plus points of Zach Swineheart’s video tutorials:

  • Basically creatively oriented
  • It’s not too technical, unlike most video tutorials which focus more on the how-to’s
  • It’s a hybrid of a tutorial and commentary
  • These teach you beyond the how-to’s; these teach you how to become a good designer
  • It explains every step on how you can tweak on the designs to your advantage.

video tutorial

What you can get from these tutorials:

  • Perfect for starting web designers who want to know how to go around the design skills in Photoshop
  • Provides designers more understanding about how elements work together and correlate in a design
  • Explains the importance of design elements like colors, shapes, images, and their relationship with the texts in the web page
  • Teaches you how to design a good web layout.
  • Links to color palettes and other flat design web elements.

Watch these tutorials if you want to learn how to tweak your already-present knowledge of flat design or find inspiration in making your craft better.

Designmodo

Designmodo is an amazingly designed website which provides web designers, especially starters, with kits that they can download or buy. Premium downloads have better scaling quality- these are way larger in number than the free ones. Free downloads are usually just for trial purposes.

Flat Design tutorial

The plus points of Designmodo’s video tutorial:

  • Provide trainings and tutorials that could improve your craft in web designing and other facets of design
  • Recommended for those who want to see how a web page mock-up is actually made and designed
  • It is straight to the point
  • Good for those who have the actual knowledge of Photoshop and mock-up designs
  • If you wants some inspiration or refreshment of knowledge, this is a good video lesson to watch

Photo from Designmodo.com

What you can get from the tutorial:

  • The understanding of the flat UI icon pack for designing its web pages

The flat UI pack is pretty useful as it caters to every need of the designer. It contains flat UI text-boxes that can be used to fill texts or act as buttons; icons that can be used as links or just to accentuate the design; and even stock images to give life and variety to your page.

Flat Web Design Tutorial – Portfolio Landing Page by  Michael John Burns

Last, but definitely not the least, is 1stWebDesigner’s very own flat design web tutorial. Michael John Burns, the website’s ‘Design Guru’ gave clear instructions on how to make a stylish but very easy to make flat design portfolio web layout.

Flat Design Tutorial

The plus points of the Flat Web Design video tutorial:

  • Has clear instructions on the how-to’s
  • The layout design dominated by the color red, which, of course, you can customize to your preference.

What you can get from the tutorial:

  • It both a how-to-guide and commentary
  • Detailed
  • Easy to follow

Michael did a very good job fusing these two elements. He clearly discusses each step so that the viewers would not irritably rewind the video and play it again.

1stWebDesign also provides tutorials, inspirations and other cool facts, tutorials, and links related to web design and blogging. If you want, you could enroll in our flat design course right here.

Conclusion

With the emergence of flat design as a marketable and creative design trend, web designers should be equipped with creative philosophies of the flat design layout. They also need to be armed with the technical skills a designer should have. These will allow him to become a better designer who can sell better designs.

And with the tutorials, you really don’t need to spend a lot of years sitting in a classroom pondering on how these designs move. Everything you need hides under the play button and all you need to do is to hit it.

We truly live in a flat world!

94 Written ArticlesWebsiteGoogle+

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. He also loves basketball. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

3 Comments
  • G Lance

    Friday, March 21st, 2014 13:50

    3

    Your first paragraph is misleading and possibly uninformed. You would have the reader believe that Microsoft and Windows 8 “Metro” is just now “adapting” to flat design. Windows “Metro” has been on the forefront, and some would say one of the first major tech companies to embrace a flat UI and design language (alongside Google). “Metro” has been in development with flat design for over four years…not just “coming around” to it.

    I’m not really a fan of Microsoft, Windows or Google…but give them credit when it’s due and research your topic. At least don’t infer something not supported by facts.

    +4
  • Daniel C.

    Wednesday, March 19th, 2014 14:47

    1

    The arguments on why you should switch to flat design are just unprofessional. I believe you should learn more about styles and trends.

    The difference between flat design and skeumorphic design is that skeumorphic design is a well established STYLE, while the flat design is actually an updated minimalism TREND that’s currently on the top of the wave.

    Minimalism on the other side is a style that’s also established but was not as trendy as flat design.

    I believe when designing trends should be considered, but not as the most major part of your design. I love flat design, but skeumorphic design actually requires talent, a lot of it. While flat design can be easily replicated and aquired.

    +2
  • sanjay

    Thursday, March 20th, 2014 10:57

    2

    Those videos are all helpful, I like the design on the last one Portfolio Page. Thanks for compiling them!

    0
  • G Lance

    Friday, March 21st, 2014 13:50

    3

    Your first paragraph is misleading and possibly uninformed. You would have the reader believe that Microsoft and Windows 8 “Metro” is just now “adapting” to flat design. Windows “Metro” has been on the forefront, and some would say one of the first major tech companies to embrace a flat UI and design language (alongside Google). “Metro” has been in development with flat design for over four years…not just “coming around” to it.

    I’m not really a fan of Microsoft, Windows or Google…but give them credit when it’s due and research your topic. At least don’t infer something not supported by facts.

    +4
  • sanjay

    Thursday, March 20th, 2014 10:57

    2

    Those videos are all helpful, I like the design on the last one Portfolio Page. Thanks for compiling them!

    0
  • Daniel C.

    Wednesday, March 19th, 2014 14:47

    1

    The arguments on why you should switch to flat design are just unprofessional. I believe you should learn more about styles and trends.

    The difference between flat design and skeumorphic design is that skeumorphic design is a well established STYLE, while the flat design is actually an updated minimalism TREND that’s currently on the top of the wave.

    Minimalism on the other side is a style that’s also established but was not as trendy as flat design.

    I believe when designing trends should be considered, but not as the most major part of your design. I love flat design, but skeumorphic design actually requires talent, a lot of it. While flat design can be easily replicated and aquired.

    +2

Comments are closed.

54.161.133.166 - unknown - unknown - US