Tags Posts tagged with "Flat"

Flat

0
Enfuzed Free Flat UI Kit v 1.0

We at Enfuzed have released our very first free flat UI kit. This flat user interface kit comes loaded with most of the essentials you need to help in designing a user interface. The kit includes both eps and ai formats in the download so you have fully scale-able vectors. Also included in the zip folder is the free font used in the kit.

Most of the colors used in this kit are from the flatuicolors.com website. This was designed to be a square UI kit, none of the elements included have a border radius (with the exception of the toggle on one style of the slider).

This UI kit was designed using the flat style UI to go with current design trends. The kit includes:

  • 2 different styles of buttons in a variety of colors
  • 2 different search bar styles
  • A set of 45 social media icons (in both color and in grey scale)
  • Check Boxes
  • Radio Buttons
  • Toggle Switches
  • 2 different styles of tool tips
  • Drop down menus in 2 styles and 3 colors
  • Calender
  • Video Player
  • Menu with drop downs
  • Page Navigation in 3 styles
  • Sliders in 4 different styles
  • Tags in 3 colors
  • Text Box
  • Inputs (active, not active, and Error styles)
  • Headers (Header 1-5)
  • Ratings using stars and hearts
  • Modal Box

This is free for both personal and commercial use (YA!). You are not allowed to distribute or offer this kit on any other website. If you wish to post about this you may, but you must include a link for download back to this page.

If you would like to see more things added to this kit please feel free to comment below and we’ll see what we can do. As well if you see any bugs or mistakes comment below and we will fix them as soon as possible. Enjoy!

Flat UI Kit v 1.0 by Enfuzed

Enfuzed Free Flat UI Kit v 1.0

**You can click the title or image to download via pay with a tweet or if you don’t want to give any credit for this you can click the download button below.**

[wpdm_file id=1]

0
48 Free Vector Icons by MediaLoot

This set of 48 free vector icons is brought to you courtesy of MediaLoot. These flat icons are free for download and come in PNG and PSD formats. This set will go great with any flat style graphic or website because of the vector style of these icons. Being vector means they can be scaled to any size to fit any type of project, large or small. Happy Freebie Friday!

48 Free Vector Icons by MediaLoot

48 Free Vector Icons by MediaLoot

**Click the title link or the image to direct to the download page**

8
What Classifies as Flat Design Featured Image

What classifies as flat design? As this trend has quickly risen in popularity, so has the abundance of people claiming “flat” and “not flat” on various designs.

About a week ago I came across a Twitter post by a design blog that had to do with the new GoDaddy redesign, asking people what their thoughts were on it. Curious to see what it looked like, I went over to GoDaddy to check it out. It’s nothing special, just a simple redesign using some flat elements. What I did like, and what was most noticeable, was the amount of clutter they got rid of (the old GoDaddy website was a mess).

After seeing the new design, I went back over to Twitter to give my thoughts on it. Before doing so however, I decided to read some of the comments others had on it. A few of the users exclaimed that the new design was “not flat”, citing “too much white” and “bad font choice” as the reason. This had me scratching my head, are people confused on what flat is?

That really got to me (enough so that I have decided to write an article about it) because, to me, flat can be considered many things. The term “flat” is somewhat politically incorrect because there is such a broad base on what could be considered “flat”. As designers we need to find some common ground and agree on what exactly defines a flat design.

I want to start by looking at the dictionary definition of flat, which is defined as “smooth and even”. Even by the definition, flat could be considered a multitude of things because it’s definition is so broad. So what I did was made a little list here of some elements that are usually included (or not included) in a design that make it “Flat” :

  • Uses solid colors
  • Has less gradients
  • Looks two dimensional
  • Has squared or sharp Edges
  • No bevels
  • No textures
  • Sometimes without shadows (some include long shadows)
  • No skeuomorphic details that give it that realistic or three dimensional look
  • Utilizes function and simplicity
  • Has minimal design elements

I’m sure the list is missing a few things, but after reading it and reading the above definition of flat, I hope to give you an idea of what flat design is. Now it’s time to do some comparisons so we can see what classifies as flat and what does not.

Flat vs Not Flat

The app icons in this design are a great example for comparison between the skeuomorphic design of iOS 6 and this flat concept design of iOS 7 by SimplyZesty. Notice how the icons in iOS 6 have the glare across them with various gradients and much detail giving it the ‘pop’. Just the opposite, the iOS 7 concept icons are simple with solid colors, squared edges, and a flat look.

iOS 7 Concept Designs by SimplyZesty

Flat

Awhile back we did a company spotlight on Fostr, a creative project app, so I will use their website as perfect example of flat web design. Notice how simple it is, no flash involved and it incorporates flat design elements perfectly. It even shows off some flat vector style graphics on the landing page.

Fostr The Creative Project App for Designers

Flat vs Not Flat

Here is another great example of flat design versus “not flat” design, the clock app icon for apple iOS devices. As you can see the new clock app icon for iOS 7 (left) is much more simplistic and easier on the eyes than the iOS 6 clock app icon (right).

iOS 6 app icon compared to iOS 7 app icon

Flat

What better way to show what flat design is that with the company that helped bring this trend to life, Microsoft. Defining it as “Metro”, Microsoft gave a fresh breath to the flat design trend with their Windows 8 UI and it’s simplistic design.

Microsoft Website 2013 Screenshot

Flat vs Not Flat

Staying with Microsoft, when they launched their new logo in 2012 they incorporated the metro look to it. Check out this comparison of the old Microsoft logo (left) versus the new flat Microsoft logo (right)…

Old Microsoft Logo versus New Microsoft Logo comparison

Flat

Taasky, an up and coming task management app, has a great example of flat design for their website. It is simple and incorporates the popular flat colors and minimal design.

Taasky Task Management App

Flat vs Not Flat

Jay Kwong, a web and graphic designer from Hong Kong, designed the app icons for Lightly. As you can see in the image below, she has the app icon for iOS 6 (left) next to the newly designed icon for iOS 7 (right). This is a perfect example of Flat vs Not Flat design and how much simpler the flat trend makes designs.

Lightly iOS6 vs iOS7 app icons

Flat

The Cubicle Ninjas website is a great example of being flat, but being subtle about it. It doesn’t flaunt the usual flat color palette and vector style graphics, it uses flat as a means to make the website more minimal and give the user an easy yet appealing experience.

Cubicle Ninjas Website

Flat vs Not Flat

Some of you may have come across it by now, the new Google logo is what I’m talking about. This comes a a great recent example of a flat redesign. The old logo (pictured on top) incorporated a bevel on all of the letters giving it dimension and a “pop”. As you can see below, the new logo (bottom) has removed the bevel giving it a flatter look that is worlds better.

Old Google Logo versus New Google Logo 2013

Flat vs More Flat

Some designs that are flat, like the new iOS7 for example, are not as flat as they could be. I’ll show you what I mean by using this iOS7 redesign by Wellgraphic. They created this side by side comparison of the new iOS7 (left) and their version of iOS7 (right) in a redesign. Notice how much flatter and more minimal Wellgraphic made the icons in their design.

iOS7 Redesign by Wellgraphic

Conclusion

As you can see, some flat designs are different from others. It’s not to say that the new iOS7 design by Apple is not flat, parts of it are because it encompasses some of the qualities of a flat design that I listed above. It’s just not the greatest example of what a flat design could be in my opinion.

The point I’m trying to make with this article is that there are many different takes on flat design, some designs are an obvious flat, while others are sleepers and don’t really come off as flat. As I knew (and was hoping it would), this article is going start some controversy, good controversy I hope, that can help us figure out what this trend really is. So feel free to comment your take and opinions on the matter of flat design below.

6
14 Flat Free WordPress Themes

The age of flat design is among us, everywhere you look companies are re-branding and re-designing to stay with this trend. Although some consider the trend of flat design to be overrated and overused, I believe it is one of the few trends that needs to be used more. Flat design isn’t just about the color or the non-beveled look, it’s about usability and drawing the users focus to what matters.

That said, having a website that is clean and user friendly is a must. Most people aren’t fortunate enough to be able to afford for someone to build them a flat website or decent looking trendy website though. That is why I’ve put together this collection of flat WordPress themes that are all completely free, so all users have to do is upload one of these themes to their WordPress site and they’re now trendy :). All of these themes have two things in common, they encompass the flat design trend and they’re modern looking.

1. Revera by Fab Themes

One of my favorite themes in this list, revera utilizes a large homepage image slider to showcase posts. This theme sticks with the simplicity all around and shows off the 4 latest portfolio items and the 4 latest blog posts in sections below the slider.

Revera WordPress Theme by Fab Themes

2. Duena by Duena Studio

Duena utilizes some beautiful typography along with flat design elements and bright colors. This theme is perfect for personal blogs, it includes a homepage slider and is fully responsive.

Duena WordPress Theme by Duena Studio

3. Current by Site Origin

An extremely minimal and flat theme, Current is a great theme to help you show off your creative work in simple fashion. This is great blank canvas for developers and designers to build off of.

Current WordPress Theme by Site Origin

4. BirdFLAT by sysbird

BirdFlat is a very simple flat theme that is built in a pinterest style layout. This theme is fully responsive and is perfect for showing off your images.

BirdFLAT WordPress Theme by sysbird

5. Fizz by Site5 Themes

Fizz is the prefect example of modern and flat mixed together. One thing that stands out on this theme is the horizontal image slider on the homepage. This theme is fully responsive and great for a corporate style or business website.

Fizz WordPress Theme by Site5 Themes

6. Time by Site5 Themes

Beautiful and simple, Time is a great theme to use for a personal portfolio and blog. Time is a fully responsive WordPress theme and is widget ready.

Time WordPress Theme by Site5 Themes

7. Oceanus by Fab Themes

Oceanus is a great flat WordPress theme to use for a news style blog. It comes with a jQuery style slider on the homepage that displays a title and featured images from a selected category.

Oceanus WordPress Theme by Fab Themes

8. Mordor by Fab Themes

Mordor is a great visual theme that focuses on imagery and a very minimal and flat design. This theme is sidebar widget ready and includes a full width homepage jQuery image slider.

Mordor WordPress Theme by Fab Themes

9. Helix by Fab Themes

Helix focuses on a full screen slider and has a flat style menu on the left side of the theme. The blog setup on this theme is beautiful and it’s perfect for a personal portfolio style blog.

Helix WordPress Theme by Fab Themes

10. Garvan by Fab Themes

Garvan is a great news and online magazine style theme for any kind of blog. Garman focuses a flat design in a very minimal aspect.

Garvan WordPress Theme by Fab Themes

11. Binary by Fab Themes

Binary is a blog style WordPress theme that utilizes a widgetized left sidebar. Blog posts include featured images and excerpts on the homepage.

Binary WordPress Theme by Fab Themes

12. Virtue by Kadence Themes

Virtue is a minimal and flat style theme perfect for ecommerce websites. This theme is fully responsive and Woocommerce ready, it is also retina ready. The homepage features a large image slider, a featured projects section, as well as a latest blog posts section.

Virtue WordPress Theme by Kadence Themes

13. My Flatonica by myThemes

Flatonica is a fully responsive, very simple, full width, and flat style WordPress theme from myThemes. This theme supports custom background images, colors, logo, and favicon so you can easily manipulate it to your personal style.

My Flatonica WordPress Theme by myThemes

14. Pelican by Fab Themes

Pelican is a WordPress theme that is image focused. It’s flat style and large typography help to catch visitors attention. My favorite part about this theme is the hover effect on the images, each blog post’s featured image displays the title and read more button that folds from the left on hover, a very cool effect. This theme contains sidebar and footer widget areas.

Pelican WordPress Theme by Fab Themes

0
Free Flat UI Design Kit by Ryan Bales

This lovely Freebie Friday brings us this free flat UI kit courtesy of designer Ryan Bales. Ryan is founder of bync and based out of Boulder, Colorado. This flat UI kit comes with headings & copy, alert boxes, buttons, various form elements, and a few other things. The download comes in PSD format. You can follow Ryan on Dribbble and Twitter.

Flat UI Kit by Ryan Bales

Free Flat UI Kit by Ryan Bales

**Click the title link or the image to direct to the download page**

1
Free Long Shadow Social Icons by Pierre Borodin

Good day all, you know the usual spiel, it’s freebie Friday once again. Today’s freebie is a set of long shadow social icons brought to you by Pierre Borodin. Pierre is a UI/UX Designer living in Prague. This set of icons go with current trends well, being flat and including long shadows, this download comes in PSD format. You can keep up with Pierre on Dribbble and Twitter.

Long Shadow Social Icons by Pierre Borodin

Free Long Shadow Social Icons by Pierre Borodin

**Click the title link or the image to direct to the download page**

1
WWE Superstar Illustrations by James White

There aren’t many illustration posts here are Enfuzed so we’ve decided to add one here. Below are some creative WWE (World Wrestling Entertainment) superstar graphic illustrations created by James White. James is a visual artist, designer and speaker living in Dartmouth, Nova Scotia, Canada.

So what made James decide to start a project like this? He is quoted saying on his website “I haven’t been into wrestling for about 2 decades now, kinda stopped watching around the early 90s. But getting into these illustrations re-opened just how INTO wrestling I was back then. From about ’87 to ’93 it ruled my life, mostly due to my childhood buddy Mike. We drew our own wrestlers, ran our own imaginary federations and watched a ton of the special WWF events”.

We are happy we came across this project and a big thanks to James for letting us showcase this on Enfuzed. James says he’s going to be adding more illustrations to this project so you can keep up with it through his blog, Facebook, Instagram, Twitter, and Behance.

Bret ‘The Hitman’ Hart

Bret ‘The Hitman’ Hart WWE Superstar Illustration by James White

Jake ‘The Snake’ Roberts

Jake ‘The Snake’ Roberts WWE Superstar Illustration by James White

Hawk and Animal, The Legion of Doom

Hawk and Animal, The Legion of Doom WWE Superstar Illustration by James White

Randy ‘Macho Man’ Savage

Randy ‘Macho Man’ Savage WWE Superstar Illustration by James White

The Ultimate Warrior

The Ultimate Warrior WWE Superstar Illustration by James White

‘Rowdy’ Roddy Piper

‘Rowdy’ Roddy Piper WWE Superstar Illustration by James White

Hulk Hogan

Hulk Hogan WWE Superstar Illustration by James White

‘The Million Dollar Man’ Ted DiBiase

‘The Million Dollar Man’ Ted DiBiase WWE Superstar Illustration by James White

Ricky ‘The Dragon’ Steamboat

Ricky ‘The Dragon’ Steamboat WWE Superstar Illustration by James White

The Junkyard Dog

The Junkyard Dog WWE Superstar Illustration by James White

‘Stone Cold’ Steve Austin

‘Stone Cold’ Steve Austin WWE Superstar Illustration by James White

Koko B. Ware

Koko B. Ware WWE Superstar Illustration by James White

André the Giant

André the Giant WWE Superstar Illustration by James White

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods