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

November 13 2013

14:00

60 High Quality and Free Responsive HTML Templates

Speed up your design process by taking inspiration from these free responsive HTML templates we gathered from around the web!

Everyone’s running around trying to hop on the newest trend: flat design, but before flat there was responsive web design. It was the craze two years ago, and 8/10 websites you will visit today are responsive. This is in response (tee hee) to the mobile web revolution, of course. It has become a standard, even if a web design client is not specifically looking for a responsive website, it’s already a given that you, as a web designer or developer, need to deliver responsive sites all of the time.

So, here are 60 responsive website templates to speed up your design/development process. Feel free to download and edit them!

Have fun!

1. Affection

Download and Demo

2. KataKlimt

Download | Demo

3. Vivid Photo

Download | Demo

4. zBoomMusic

Download | Demo

5. zMoonCake

Download | Demo

6. Deadstocker fashion

Download and Demo

7. Wee Responsive

Download and Demo

8. Verti

Download and Demo

9. Obscura

Download and Demo

 

10. Response

Download | Demo

11. Zeni

Download | Demo

12. Brownie

Download | Demo

13. AccentBox

Download | Demo

14. It Fits

Download | Demo

15. Travel Store

Download | Demo

16. Style Tile

Download | Demo

17. Diggy

Download | Demo

18. Serendipity

Download | Demo

29. Madison

Download | Demo

20. Azure

Download | Demo

21. Simple

Download | Demo

22. Vintage

Download | Demo

23. Gridly

Download | Demo

24. DopeTrope

Download | Demo

25. Curve

Download | Demo

26. Grid

Download | Demo

27. Agency

Download | Demo

28. Yasmin

Download | Demo

29. Balloons

Download | Demo

30. Acoustic

Download | Demo

32. zWebDesign

Download | Demo

33. Halftone

Download | Demo

34. zGallering

Download | Demo

35. Strongly Typed

Download and Demo

36. Telephasic

Download and Demo

37. Miniport

Download and Demo

38. Zerofour

Download and Demo

39. Brushed

Download | Demo

40. Mori

Download | Demo

41. Codester

Download | Demo

42. Legend!

Download | Demo

43. Appology

Download | Demo

44. Proximet

Download | Demo

45. Parallelism

Download and Demo

46. Shinra

Download | Demo

47. Di’Verso

Download | Demo

48. AQUEOUS

Download | Demo

49. Type and Grids

Download and Demo

50. Folder

Download | Demo

51. Response Eve

Download | Demo

52. Liquid Gem

Download | Demo

53. Modus

Download | Demo

54. Kroft

Download | Demo

55. Delphic

Download | Demo

56. zParalexy

Download | Demo

57. Striped

Download and Demo

58. Minimaxing

Download and Demo

59. Park Zone

Download and Demo

60. Astral

Download and Demo

What do you think about this collection? Should we gather more? Tell us what you think!

November 01 2013

13:41

Free Resources for Creating a Flat Design

Flat designs are taking over quite quickly it seems. I doubt anyone could argue against it being the latest and greatest for (fairly) new trends on the web, in mobile devices, and even in print. The simple description for a flat style of design is one that lacks 3D effects, such as bevels or drop shadows.

The stylistic details of a flat design can vary somewhat, just as with most design styles. Usually, though, a flat design is quite minimalist with primary-ish colors and lots of “white space”. The font is usually thin without too much flare. Boxes and buttons are, of course, without strokes or 3D effects. Some flat designs do contain shadows, but these are usually flat-ish as well.

Whether you are new to flat design or simply need some fresh, new resources for your next project, most should be able to find a few items below to help. The list below is divided into 5 categories: UI kits, icons, templates, WordPress themes, and tutorials. The best part? All are free. The ones that specifically mention “free for commercial use” are noted as well. Have fun browsing and be sure to let us know of any other amazingly free flat resources.

UI Kits

A UI kit is a user interface collection that comes with all the parts and pieces you need to design your own website. Usually they are PSD but sometimes will come with other components as well. While you can use the color scheme in the file, you can create your own color scheme. They also come with patterns, brushes, and much more. Hence, UI kits save a web designer a lot of time, improving workflow and decreasing time spent on projects.

DesignModo Flat UI

This free (commercial and personal) flat UI kit from DesignModo comes with all of the basics you’ll need to create a flat user interface – buttons, menu, input, tags, switches, icons, color swatches, glyphs, and much more.

Modern Touch UI Kit

PixelKit offers this flat UI kit. It comes with a very unique, slick look and feel and the free version is for both personal and commercial use.

Flat Design UI Components

A beautiful UI kit, this one from GraphicBurger comes in a well-organized PSD file. The color scheme is nice for when you need a darker look for a website or application.

Free Flat UI Kit

This amazing free kit includes flat icons, buttons, and more in a blue/white color scheme. Just be sure to contact the developer, Enes Denis, about commercial use.

Featherweight UI

Designed by Sarah Hunt of sarahjustine.com, this kit is completely free for both personal and commercial use. It is both vector-based and retina ready, and the font works both online and offline.

Flat UI Kit

Freepik.com created this aweome free UI kit for Webdesigner Depot. Enter your email address to download it for both commercial or personal use.

Icons

Flat icons are, as mentioned already, are those that have no 3D pop. They are simply flat. Most come in the normal, flat style of primary-like colors. However, you can find a few that are line style and others that are even a bit uniquely colored, for a flat design. Icons are another great way to save time in both web and print design.

Metro UI Icon Set

This fantastic set comes with 725 flat icons that also come with a reflective quality if you decide to go less flat in style. The designer, dAKirby309, has generously make them free for use as long as you credit him in your project.

180 FREE Flat Icons

On a mission to providing Open Source resources for the WordPress world, WordPress Design Awards created this icon set for anyone to use in commercial or personal projects.

Free Flat Icons

This collection does not contain very many icons, but they are very unique. These are free for both personal and commercial use and are perfect for adding a unique touch to any flat design.

Free Flat Icons by Studio 4

In this free collection, you will find 47 icons designed with flat colors and style. The details are phenomenal!

100 Free Vector Icons

This set of line icons work great for a flat design. The precision in the icons are superb, and the best part is that they are completely free.

90 Royalty-free Flat Icons

With round and square icons, social media icons, common objects icons, and more, this royalty-free icon pack is amazing!

Templates

For those with even less time, templates are a great way to quickly throw up a website in a matter of minutes. Unlike a UI kit in which you have to arrange every element onto a page, a template already comes with elements laid out. All you have to do is add content.

Free Flat HTML5 Website Template

This free template comes with a call-to-action section, header and footer, portfolio area, and menu. With it all located in a single HTML5 file, you can easily edit it for your own use.

Free Flat Design PSD Template

A very minimal, flat design, this template for a website is called Illustrate. A WordPress theme is also available in this design.

Free Flat Website Template

The colors in this flat template are very calming, making it a great website template to use for a company that wishes to instill trust in clients.

iPhone Flat Design UI Templates

This collection of iPhone templates come with different pages in a free sample project download. A sidebar, settings screen, activity feed, user profile, and login screens are all included. Each of the screens come with 2-4 design styles.

WordPress Themes

For those creating a WordPress website, there are a few new themes out there that fall under the flat category. All of the following themes, except the first one, are Open Source themes just like WordPress, so no need to worry about hidden prices or commercial-use.

Photo Free Responsive Gallery WordPress Theme

This absolutetly free theme is very minimal and flat in its design. It would be perfect for anyone needing a basic portfolio website.

Surfarama

Each of the content boxes in this Open Source theme can include an image to enhance the home page. You can even color code the categories, upload your logo, etc without coding.

StrapVert

This is a great flat theme for easily showcasing images with blocks of text. The theme now comes with the option to turn off either the featured section, just the top section, or just the secondary section off.

Attitude

This incredible Open Source WordPress theme is retina ready, responsive, and very clean. The other big bonus to this theme is that it is also available with 5 different translation options.

Iconic One

This WordPress theme is not only flat, clean, and simple but also it is responsive, has a page speed score of 95+, and implements SEO. It also uses Live customizer so that custom changes are easy to make.

Twenty Thirteen

This theme looks good on any device and comes in a blog format. The flat style gives it simplicity and the color scheme is a nice burnt look.

Tutorials

If you are just beginning or even if you have some areas in flat design you’d like to improve upon, the following tutorials are excellent. All give detailed instructions on how to create flat designs or flat elements in a design.

How to Create a Website in Flat Design Style

This 17 minute tutorial from Designmodo uses their free UI pack listed in the UI kits above. Learn how to create a flat website in Adobe Photoshop using an interface kit.

Flat Long Shadows

This step-by-step tutorial is from Awwwards and includes resources and examples as well. Easy to follow along, this is probably one of the best tutorials on flat shadow design on the web.

Make My Design Flat

This is not necessarily a tutorial but best fits under the “Tutorial” category simply because after using it several times, you will probably will learn how to change code around for flat designs. Using this tool, you can convert any button into a flat design. Simply upload your code to receive the “flat” version that you can then copy and paste or use as a guideline for your own flat code.

Flat Design Tutorial (part 2)

This video tutorial thoroughly walks you through how to create a flat design. The designer gets a little detailed on downloading the resources he uses, but once he gets to the designing part, he does a great job of making it easy to learn flat designing.

Mastering Flat Design

You’ll have to sign up on TutsPlus to see this full series, but it is very much worth it. TutsPlus provides a comprehensive video course on flat design comprised of over 2 hours worth of videos.

Remember to share in the comments below if you have a flat design resource you’d like to share with the rest of us!

October 18 2013

14:53

50 High Quality Free HTML5 And CSS3 Web Templates

Although, HTML5 still is a work in progress yet because of the reason that it has brought some extremely valuable and innovative features to the table, it has become extremely popular among the developers and designers. Furthermore, many recent versions of the leading web browsers support many of these features and they continue to add some new features.

This time, we are showcasing some high quality HTML5 and CSS3 web templates for you. So, scroll through this collection and find out something interesting for your website as well. Do have a look at these HTML5 web templates and do not forget to share your comments with us. Your comments are valuable for us. You can also share this post on social networking websites and in your friends’ circle as well. Enjoy!

Restaurant Website Template

( Demo | Download )

Website Template for Design Studio

( Demo | Download )

Tasty-Looking Skin for Culinary Site

( Demo | Download )

BisLite Html5 Theme

( Demo | Download )

CSS3 Gallery Garden

( Demo | Download )

My Hotel

( Demo | Download )

Nina Html5 Theme

( Demo | Download )

Photoartwork Bokeh

( Demo | Download )

Shinra

( Demo | Download )

CSS3 Colour4

( Demo | Download )

Real Estate Responsive Template

( Demo | Download )

CSS3 Design Two

( Demo | Download )

CSS3 Seascape Two

( Demo | Download )

Workit V.2 Free Website Template

( Demo | Download )

TechBusiness Free Template

( Demo | Download )

CSS3 Three

( Demo | Download )

CleanLines Website Template

( Demo | Download )

WorkAholic Website

( Demo | Download )

ImCreative Responsive Html5 Theme

( Demo | Download )

Competitive Website Template

( Demo | Download )

BurnStudio Responsive Html5 Theme

( Demo | Download )

Simplistic Website Template

( Demo | Download )

Striped Responsive Html5 Theme

( Demo | Download )

Elementary Website Template

( Demo | Download )

Obscura Responsive Html5 Theme

( Demo | Download )

Gallerised Website

( Demo | Download )

Txt Responsive Html5 Theme

( Demo | Download )

Modern Business Free Website

( Demo | Download )

HalfTone Responsive Html5 Theme

( Demo | Download )

Modular Business Template

( Demo | Download )

PlusBusiness Free Template

( Demo | Download )

Presentable Free Template

( Demo | Download )

Prestigious Free Website Template

( Demo | Download )

Retina Responsive Html5 Theme

( Demo | Download )

Girl Scouting

( Demo | Download )

Curve Responsive Html5 Theme

( Demo | Download )

Digy Responsive Html5 Theme

( Demo | Download )

Food Photographer

( Demo | Download )

Proximet Free Responsive Template

( Demo | Download )

Online Media Responsive Template

( Demo | Download )

Dark Folio : Single Page Responsive Template

( Demo | Download )

Elegant Green One Page Vcard Html CssTemplate

( Demo | Download )

Youth Cente

( Demo | Download )

HTML5 and CSS3 Web Templates

( Demo | Download )

iPhone App Website

( Demo | Download )

Stylish Hotel Website

( Demo | Download )

Animated Template for Web Design Studio

( Demo | Download )

Delphic Dark

( Demo | Download )

Kids Corner

( Demo | Download )

PhotoArtWork Light

( Demo | Download )

October 16 2013

06:30

Colors of Fall 2013: 21 Fresh and Free Design Resources


  

Hello designers, developers, web enthusiasts of the globe. We are back with another edition of our monthly collection of the freshest design resources the month of September had to offer. If you know our series already, you know you can expect the best HTML, CSS and PSD templates, as well as UI-kits for your next great web or native app. All of the resources showcased here are fresh, free and easy to download, suitable for experienced and amateur web designers, so be sure to download the ones you love and share them with everyone you know!

September 13 2013

06:30

Hotter than August: 26 Fresh Templates, Themes and UI-Kits from Last Month


  

How was the month of August in your area of the globe? Over here in Europe we definitely had (and still have) some hot spots. So, if swimming is what you aim for, come over to the Mediterranean and be happy. If you’d rather refresh some web designs than your worn-out body stay with us and read on. Once again we roamed about the webs, searching for the freshest elements a web designer could be interested in. This is what we came up with.

March 18 2013

16:26

Ultimate Collection Of Free Coming Soon And Under Construction Templates

An under construction or coming soon page will come into play when you need to inform your users that the web page they are trying to visit is in the construction process and they should visit it after some time. At times, when companies decided to make huge changes in their online profile; they need to redesign the whole website or the large portion of it. At the same time, they do not want their users to see a blank page. Therefore, they design an under construction or coming soon page.

In this collection, you will discover some inspiring and free templates to design coming soon and under construction pages. Browse through this collection and download as many templates as you want.

Free Coming Soon Page Template: Blue Horizons

( Demo | Download )

Free HTML/CSS Coming Soon Page

( Demo | Download )

Blue Coming Soon Page

( Demo | Download )

HTML5 Coming Soon Template

( Demo | Download )

Simple Coming Soon Page HTML

( Demo | Download )

Elegant Clean Under Construction Page

( Demo | Download )

Beback Theme

( Demo | Download )

Coming Soon Page Template

( Demo | Download )

Website Under Construction Template

( Demo | Download )

LaunchTime WordPress Theme

( Demo | Download )

HOLDING PATTERN

( Demo | Download )

PaperLaunch

( Demo | Download )

Free Coming Soon Template

( Demo | Download )

Changing Room

( Demo | Download )

LaunchPad

( Demo | Download )

Clean Under Construction Template

( Demo | Download )

Creative Under Construction Template

( Demo | Download )

Modern Under Construction Template

( Demo | Download )

Critical Mass

( Demo | Download )

Colorful

( Demo | Download )

Landis

( Demo | Download )

Fleepy

( Demo | Download )

Coming Soon WordPress Theme

( Demo | Download )

Premium Under Construction Template

( Demo | Download )

Sapling

( Demo | Download )

jQuery Countdown Script

( Demo | Download )

Ready2Launch

( Demo | Download )

WP Launcher

( Demo | Download )

Cool And Free Launch Page With Ajax Newsletter

( Demo | Download )

Coming soon page template download (PSD)

( Demo | Download )

Tutorials

Creating a Stylish Coming Soon Page with jQuery

In this tutorial we will learn how to create a Stylish Coming Soon Page with jQuery.

Create an Effective Coming Soon Page

In this article we will talk you through how to construct a very usable, applicable coming soon web page. We will also be discussing why we are doing certain things, and what we’re trying to achieve with each step. This way you’ll not only be able to create a similar design, but you’ll understand the importance of the details, and just how effective they can be.

How To Design A Coming Soon Page In Photoshop

In this tutorial we will show you how to create a coming soon page in photoshop. To design a coming soon page is really important if you are about to lunch a new website, and is a pretty good marketing tool.

Design a Bright & Fun Coming Soon Page

In this tutorial you will learn how to design a fun Coming Soon Page for a website.

Sleek Coming Soon Page Design

Here we will be showing you how to create a cool coming soon web page design. The designs features a dark feel with a cool count down timer. Lets get started…

How to Create an Effective Coming Soon Page

Coming soon pages are generally very simply when compared to regular websites. However, they’re notoriously difficult to get right. The simplicity of the concept can actually overwhelm many designers, as they end up with a boring, lackluster design. Here, we’ll look at how to design a simple, but effective coming soon page, and some of the theories to bear in mind.

Freelance Coming Soon Photoshop Tutorial

We will be walking you through the process of creating a Coming Soon Page for your Freelance website. We will be using a lot of basic techniques and simple layer styles to create an excellent look.

Design A Textured ‘Coming Soon’ Web Page In Photoshop

This web design tutorial will show you how to make a simple “coming soon” web page that has a nice background texture and a slick web form that you can easily adapt into contact forms, newsletter signup pages, and more.

Design And Code A Sweet Custom Coming Soon Page

In this tutorial you will learn how to Design and Code a Sweet Custom Coming Soon Page.

Conclusion

This compilation features some excellent and high quality templates for Coming Soon and Under Construction pages that you can use for free. We have compiled this collection to help you make your Coming Soon or Under Construction pages more appealing and visually enticing. We hope that you will like this collection. Feel free to share your opinion with us via comment section below.

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