Hacker News new | past | comments | ask | show | jobs | submit login

The responses to this comment seem a bit unnecessarily condescending, but they share an underlying point - unlike the more realistic design trends, this one does not require Illustrator/Photoshop tutorials (except, perhaps for the icons, but that's more about learning precision with the pen tool). The flat design trend is more about an overal feel than exact design technique. Color plays an incredibly prominent role here - you'll notice that the same teal, dark blue, burnt orange, etc. shows up in the popular examples of "flat design". Note this UI set, the Layer Vault site, Built by Buffalo, Spelltower, etc. In comparison, Craigslist theoretically uses a "flat" design, but it would not be grouped in the same category because it doesn't have the same feel. If you start with a similar color palette and forgo the use of gradients and drop shadows, you will be well on your way.

Typography plays a large role in this trend as well, although not as prominently. You'll notice the heavy use of sans serif fonts, although some examples (Medium sticks out in my mind) have nicely used serif fonts for body copy. Larger line heights and font-sizes (18px+ for base font size and line heights between 1.2 and 1.5 em) utilize white space well to make the design seem less compact - an excellent practice, because without other cues for depth, the flat visuals can look quite cramped.

I would advise creating a dummy page and playing with these different styles. This trend is great for learning by doing, rather than learning by recreating (you don't need to get that perfect gradient to pull the design together). Tools like color.hailpixel.com can help you pull your color scheme together, and resources such as Symbolset.com can provide nice icon fonts that will tie your flat design together. You can also download the "What Font" extension to Chrome (do they have one for Firefox too?) to see the dominent fonts being used in these designs. I've been seeing Lato (http://www.google.com/webfonts/specimen/Lato) pop up a lot recently.

Anyway, best of luck!




Consider applying for YC's Summer 2025 batch! Applications are open till May 13

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: