Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 03 2013

19:48

35 Stylish WordPress Themes With a Flat UI

Advertise here with BSA


I think it’s obvious by now that ‘flat’ is not just a new design trend or style that will go away next year. It’s here to stay and I think it’s great.

The idea behind what we call ‘flat design’ is to remove the noise. This means anything that is not necessary to a design. Things like heavy gradients, not-so-subtle drop shadows, 3d graphics, and the heavy use of skeuomorphism, can be replaced with more muted color schemes, solid colors, and a stronger focus on typography – a flat design focusses on the essentials.

In this post we have collected a total of 35 great WordPress themes that sport a flat design style. I hope you enjoy this post, feel free to chime in via the comment section!

Colangine

“Colangine

Flatsome

“Flat

Lorencia

“Lorencia

Rocco

“Rocco

Marble

“Marble

Coffee & Cream

“Coffee

Sketch

“Sketch

Omni

“Omni

Kumaon

“KUMAON,

Swatch

“Swatch

Vertex

“Vertex

Kyte

“Kyte

Glider

“Glider

Flat

“Flat:

Peddlar

“Peddlar

Blogist

“Blogist

Discover

“Discover

Hardy

“Hardy

Blogify

“Blogify

Satellite7

“Satellite7

Doctype

“Doctype

Falco

“Falco

Hayden

“Hayden

Keylight

“Keylight

Flatco

“Flatco

GoodInc

“GoodInc

FlatBook

“FlatBook

Flat

“Flat

Flat

“Flat

Hypertext

“Hypertext

Amada

“Amada

Alfie

“Alfie

Baylie

“Baylie

iMagPress

“iMagPress

Breathe

“Breathe

Conclusion

I hope you enjoyed this post. Please feel free to share your thoughts in the comments below.


Advertise here with BSA

November 24 2013

04:16

Introducing the FlatPix UI Kit

Advertise here with BSA


The ‘flat‘ design style is one we hear about everywhere now, and I believe it’s here to stay. I don’t see flat design as something trendy or flavor-of-the-month – rather it’s what design should be; focussing on how things work rather than how things look, keeping things clean and minimalist.

So, we decided to create our very own UI kit, it’s called FlatPix and it is available to purchase exclusively through the DesignM.ag network.

FlatPix UI Kit

The FlatPix UI Kit contains a lot of commonly used user interface elements. Things that we, as designers, need for every single web project we work on. The download includes a normal-res version as well as a full retina version, all in PSD format of course. Most of the elements in this kit come in 4 color schemes (red, green, blue and grey) with various states (normal, hover, active, focus):

  • Large and small buttons
  • Various icons
  • Progress bars
  • Checkboxes and radio buttons
  • Star and heart ratings
  • Video player
  • Pagination
  • Breadcrumbs
  • Input fields
  • Search field & autocomplete
  • Upload file form
  • Toggle switches
  • Login / registration boxes
  • Navigation bar with dropdown
  • Pie chart with legend
  • Various tooltips

FlatPix UI Kit

You can purchase the FlatPix UI Kit right here for $6. This is a special introductory price and it’s valid only for 2 weeks. After the introductory period the price will go up to $9 – so act now before the price goes up! We hope you like this UI kit, of course feel free to let us know what you think in the comments below.


Advertise here with BSA

September 30 2013

06:30

August 26 2013

06:30

August 05 2013

06:30

How To Create a Set of Vector Weather Line Icons

Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a weather app. Follow this step by step Illustrator tutorial to see how the most simple of tools can be used to create a set of trendy glyphs.

Creating a cloud icon

Let’s begin with a basic cloud. Open up Adobe Illustrator and draw three circles on the artboard. Overlap each one but pay attention to its outline along the top edge.

Drag a selection around all three objects and use the Align palette to make sure they all sit along the same baseline.

Draw a rectangle to fill in the gaps on the lower edge. Turn on Smart Guides (CMD+U) to help align the rectangle to the circles then hit the Unite option from the Pathfinder tool to merge everything together.

Clear out the fill colour and increase the stroke weight to around 5pt. Turn on the round cap and round corner options to create a smooth outline.

Creating a sun icon

Elsewhere on the artboard draw a circle using the same stroke configuration options, then add a short line above it.

Copy (CMD+C) and Paste in Place (CMD+Shift+V) a duplicate then move it vertically to sit underneath the circle. Copy/Paste the two lines then rotate the duplicate by 90° (hold Shift to constrain the angle).

Paste in two more duplicates and rotate these shapes by 45° to form a set of evenly spaced ray lines. Group all these individual lines together.

Select both the group of lines and the inner circle and align the objects along the horizontal and vertical axis to centre them up.

Combining the icons

One advantage of working with basic style icons is elements can be reused to aid consistency between the icons. A “sunny spells” icon can be created by combining the cloud with the sun. Rotate the sun slightly to balance the gaps between the ray lines.

Use the Scissors tool to clip the path of the sun’s circle, leaving a small gap between each element. Select and delete the unwanted portion.

Ungroup the set of sun ray lines then delete any unwanted copies.

The combination of the two separate icons creates consistency between the icons.

The same principle can be used to create other icons based on existing elements, such as a “heavy cloud” icon.

A moon icon is often used to represent “clear skies” at night. Use duplicates of the sun circle to create a crescent moon shape with the help of the Minus Front Pathfinder option.

Variations of the weather icons using the moon create nighttime alternatives for the cloudy icons. The rounded edges and the even spacing continues the consistent style of the set.

Draw one short and one long line at 45° underneath a copy of a cloud to represent “heavy rain”. Select and drag out a duplicate of these lines while holding the ALT key, then repeated press CMD+D to repeat the transformation.

A “light rain” variation of this icon can be created by deleting some of the rain symbol lines.

Create a small stylised snowflake by crossing two short lines. Duplicate the flake symbols into a 45° pattern, then select and rotate each flake randomly to reduce the uniform appearance.

“Light Snow”, “Thunder Storms” and “Sleet” variations can also be created by altering and combining existing icons.

The final icon pack

Vector weather line icons

The final icon pack contains a set of consistently styled icons to represent various common weather conditions (plus a special one for “British Summer”). Download the source file to get to grips with how they’re put together in Illustrator or to use the icons in your own projects.

Download the vector weather line icon pack

June 17 2013

07:00

June 13 2013

06:30

To Hope Beyond Hope: iOS 7 Concepts Jony Ive Should Definitely Draw Inspiration From


  
ios1 Flat and very, very colorful is Apple's new approach to iOS. Reactions are partly flat, partly very colorful, too. "Love it or leave it" seems to be the only option. Yet, iOS 7 is only a beta version, nothing needs to be carved in stone by now, Jony. We have collected numerous different concepts to show you and our readers, how iOS could turn out to become. Some are somewhat resemblant, some are totally different, but all are - much more beautiful! Please, draw some inspiration from these creations, if only a little...

April 08 2013

07:00
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl