Posts Tagged ‘Web Design’

May 1st, 2013

35 Website Designs with a Great Concept

You may very well be wondering what we mean by the title of this article! Aren't all websites built on a concept? Well, yes, of course they are, but this collection is full of designs that you wouldn't necessarily marry up with the product or service being offered, or are just very off-beat or different in terms of scrolling, images used or just general presentation.

Some tell a story as you scroll through the site, some give an insight on the product being offered, then others grab your attention by being too busy, too bright, too big, etc. These types of designs can make you determined to figure out how they work – of course, on the other hand, they can simply make you move on if you really don't have time right now!

35 Website Designs with a Great Concept

Website Designs with a Great Concept

James Bond 007 Cars Evolution
James Bond 007 Cars Evolution

My Hangover Hoody
My Hangover Hoody

Visit Bruges
Visit Bruges

CoolApps
CoolApps

Don & Dona
Don & Dona

Kinder Fotografie
Kinder Fotografie

Sanissimo
Sanissimo

Jacqui Co
Jacqui Co

Apologie Paris
Apologie Paris

Bullet PR
Bullet PR

Rit Team
Rit Team

Kunal Chhajer
Kunal Chhajer

Cilantro Cafe
Cilantro Cafe

Ben the Bodyguard
Ben the Bodyguard

Jan Ploch
Jan Ploch

Cascade Brewery Co
Cascade Brewery Co

Amazee Labs
Amazee Labs

Accept Joel
Accept Joel

Nintendo: Mario Cart
Nintendo: Mario Cart

Bagigia
Bagigia

FK Agency
FK Agency

Asics: Stop at Never
Asics: Stop at Never

Design Made in Germany Magazin
Design Made in Germany Magazin

Tag Reaction
Tag Reaction

TokioLab
TokioLab

The Horizontal Way
The Horizontal Way

Ladio
Ladio

SkullCandy
SkullCandy

Carmilla Vampire
Carmilla Vampire

Skittles – Experience the Rainbow
Skittles - Experience the Rainbow

Paolo Cavanna
Paolo Cavanna

Eutem
Eutem

Sensi Soft
Sensi Soft

Ted Rosedale
Ted Rosedale

Layrr
Layrr

Conclusion

Hopefully, if you have visited some of the selected websites, you now understand the title. Whether the concept is in the graphics, the scrolling, the animation or just the general overall design, these sites have great concepts!

April 25th, 2013
Comments Off

The Best UI Kits for free

Web & Mobile UI Kits

WireKit – App Prototyping with Photoshop

WireKit – App Prototyping with Photoshop - Web Design Freebies

Download Page →

Metro UI Kit

Metro UI Kit - Web Design Freebies

Download Page →

Flat UI Kit

Flat UI Kit - Web Design Freebies

Download Page →

Flat UI Kit

Flat UI Kit - Web Design Freebies

Download Page →

Flat Dashboard UI Kit PSD

Flat Dashboard UI Kit PSD - Web Design Freebies

Download Page →

App UI PSD

App UI PSD - Web Design Freebies

Download Page →

HD UI Kit PSD

HD UI Kit PSD - Web Design Freebies

Download Page →

Beach – Pastel Color GUI

Beach - Pastel Color GUI - Web Design Freebies

Download Page →

Leather UI Kit

Leather UI Kit - Web Design Freebies

Download Page →

Light User Interface Kit

Light User Interface Kit - Web Design Freebies

Download Page →

iOS UI Kit

iOS UI Kit - Web Design Freebies

Download Page →

Spotify Flat UI

Spotify Flat UI - Web Design Freebies

Download Page →

Free Web & Mobile Elements

10 Navigation Bars (PSD)

10 Navigation Bars - Web Design Freebies

Download Page →

Multicolor Rollout Submenu

Multicolor Rollout Submenu - Web Design Freebies

Download Page →

Upload Buttons (PSD)

Upload Buttons PSDs - Web Design Freebies

Download Page →

Drop Down List (PSD)

Drop Down List PSD  - Web Design Freebies

Download Page →

iPhone Notes Cover PSD

iPhone Notes Cover PSD - Web Design Freebies

Download Page →

Bookmark Ribbons (PSD)

Bookmark Ribbons PSD - Web Design Freebies

Download Page →

Free Download Buttons

Free Download Buttons - Web Design Freebies

Download Page →

Free Web Templates

Minimal & Clean Magazine-Style WordPress Theme

Minimal & Clean Magazine-Style WordPress Theme - Web Design Freebies

Download Page →

Fonzo PSD Theme

Fonzo PSD Theme - Web Design Freebies

Download Page →

Webpaint Homepage (PSD)

Webpaint Homepage - Web Design Freebies

Download Page →

Responsive Wireframes (PSD)

Responsive Wireframes - Web Design Freebies

Download Page →

Flat Style Web Template (PSD)

Flat Style Web Template - Web Design Freebies

Download Page →

Free Icon Sets

20 Flat Icons (PSD)

20 Flat Icons - Web Design Freebies

Download Page →

Free Cartoon And Gaming Icons Set

Free Cartoon And Gaming Icons Set - Web Design Freebies

Download Page →

Rounded Social Media Icons

Rounded Social Media Icons - Web Design Freebies

Download Page →

Rhombus-Shaped Adobe Icons

Rhombus-Shaped Adobe Icons - Web Design Freebies

Download Page →

Flat Design Icon Set

Flat Design Icon Set - Web Design Freebies

Download Page →

Shapes, Textures, Backgrounds…

Free Seamless Textures

Free Seamless Textures - Web Design Freebies

Download Page →

Free Paper Textures Pack

Free Paper Textures Pack - Web Design Freebies

Download Page →

12 Grunge Stamp Borders & Textures Pack (AI & EPS)

12 Grunge Stamp Borders & Textures Pack - Web Design Freebies

Download Page →

15 Custom Badges & Shield Photoshop Shapes

15 Custom Badges & Shield Photoshop Shapes - Web Design Freebies

Download Page →

Free Wooden Backgrounds

Free Wooden Backgrounds - Web Design Freebies

Download Page →

Vintage “Chocolate Kiss” Backgrounds PSD

 - Web Design Freebies

Download Page →

General PSDs

Corporate Identity Mockup PSD

Corporate Identity Mockup PSD - Web Design Freebies

Download Page →

100+ Infographic Elements (Vector)

100+ Infographic Elements - Web Design Freebies

Download Page →

Four Vintage Retro Badges (PSD)

Four Vintage Retro Badges - Web Design Freebies

Download Page →

5 Retro Badges (PSD)

5 Retro Badges - Web Design Freebies

Download Page →

April 25th, 2013
Comments Off

10 Story-Driven Websites That Will Blow Your Mind

Ever since the fall of Flash and the rise of HTML5, we’ve seen a lot of developers experimenting with the possibilities of HTML5. One trend that has gained popularity is the creation of a story-driven website that takes viewers through a series of pages connected with story elements and creative navigation.

10 Story-Driven Websites That Will Blow Your Mind

Here, I have compiled a list of the best story-driven websites that will blow you away. Let’s begin the journey:

Story-Driven Websites That Will Blow Your Mind

1. Find Your Way to Oz

This is a website for a new movie, The Wizard of Oz. It’s a collaboration between the Chrome Experiment team at Google and Disney. The website will take you through a circus allowing you to play with objects inside the circus.

Find Your Way to Oz

2. Black Negative

This is a website that combines creative layouts with beautiful soothing sounds and interactive navigation. Each page contains its own navigation allowing you to experiment around and discover more content as you play around with it.

Black Negative

3. Pi’s Epic Journey (Life of Pi)

This website illustrates the epic journey of Pi from the movie “Life of Pi”. The whole experience is navigated using only the scrollbar so you can sit back and enjoy it. As you scroll down, you will see a series of pictures and illustrations in a comic strip layout. The content of the website consists of clips from the movie, facts and behind the scenes that viewers might find interesting.

Pi's Epic Journey (Life of Pi)

4. Ben the Bodyguard

Although this might be old, it is still a very good example. Ben the bodyguard is an iPhone app that protects users’ data. As you scroll down, you will see Ben walking down the street explaining the use case scenarios and the benefits of the app. A very well executed website that serves its purpose very well.

Ben the Bodyguard

5. Hexaedro

This is a simple website with creative navigation and a very subtle way of telling a story. The story is driven by big images and outline illustrations.

Hexaedro

6. My Life in 20 Years

This is a very cool website that will tell the story of you, the viewer.. in 20 years. First you need to login with Facebook and it will use your Facebook data to predict what will happen to you in 20 years and present it in a fun way for you to enjoy. Trust me, you’ll love this.

My Life in 20 Years

7. NASA Prospect

This is one of the websites that really pays attention to music and how it transitions between each scene. This website will take you through the life of an astronaut, drifting away throughout space. Each planet this astronaut lands on has its own unique music that expresses the story of the planet really well. I suggest you go through each planet slowly and enjoy the music.

NASA Prospect

8. ParaNorman

ParaNorman is the perfect example of how a comic should be presented on the web. As you scroll sideways you’ll see text that annotates each scene. You can click on other characters to interact with them and converse.

ParaNorman

9. Google Guidebook

This website was created by Google and shows how you can get creative using Google’s products such as Youtube and Maps. The website is presented as a guidebook. As you flip through each page, the content will fold in and form a page for you to interact with. Each page has its own animation and interaction.

Google Guidebook

10. Get Going – Drexel University

This is one of the university websites that I admire. Finally, an education institute that cares about design. This website will take you through the life of the students, each with one sentence of wisdom. Combining the perfect visual, words of wisdom and very subtle inspiring music, it’s like you are really there.

Get Going - Drexel University

Conclusion

As you can see, it requires a lot of effort to design the right visuals and sounds in order to create an immersive storytelling experience. These examples have struck the perfect balance between visuals and sounds that I think not many have been able to do.

April 25th, 2013
Comments Off

So You Want to Be a Freelance Web Designer?

Have you absolutely had it up to here with your boss?  Sick and tired of the demanding schedule, the stressful deadlines, the abysmal pay and office politics? Dreaming of days when you can work anytime, anywhere while still in your pajamas?  Looking forward with gusto to long, creative-fueling walks spent with exotic coffee in hand?

Well, be forewarned – freelancing is not all sunshine and roses.  It has its own unique set of advantages and challenges.

As someone who started doing freelance web design back when the web was relatively new, and has continued doing it for over 10 years, I’d love to  go back in time and  pull starry-eyed 20-year-old fresh freelancer me aside and share a few realities, tips and advice with them.  Since time travel isn’t yet a possibility, I’ll share these valuable points and tips with you instead, in the hopes that you’ll be able to cut through the clutter and myths and get straight to the truth about working in the freelance world.

Let’s get started!

Know Yourself

The truth is, not everyone is cut out for life as a freelancer.  There are people who play with the idea in their head, but are miserable the moment they let go of the security and stability of their 9-to-5 job.  There are also those who start freelancing, but don’t take it as seriously as they would a job where they have to report to a superior.  Some people thrive on that kind of structure and routine, and there’s nothing wrong with that.

But realize that you’re going to have clients who are scattered across a dozen time zones, projects that require more time and effort than you originally planned for, and people who will stubbornly drag their feet to get you what you need so that you can finish the project and get paid.  These are the realities of working freelance, and if you’re the kind of person who is self-disciplined, flexible, and accommodating when it comes to a few bumps in the road – you’ll find that freelancing suits your personality well.

 

Stretch Your Comfort Zone

I’m assuming that you already have the skills you need to make a serious go of web design work. But you should know that not every project you do will be strictly web design.  Some of the projects will involve logo design, WordPress or other content management systems, basic search engine optimization and even print design and layout.  Don’t be afraid to step out of your comfort zone to try your hand at these things and see how you like them.

I found out quite by accident how much I enjoyed copywriting, split testing different websites against each other, and understanding how demographics and psychology play a role in getting people to take action.  In short, I found my niche as a conversion optimization specialist, with web design going from the bulk of my work, to a small part of the overall package.  Try out different things and see which type of design work really appeals to you!  You can always change and refine the scope of the work you do over time.  No one ever said you had to get it 100% right, right from the start!

 

Sell Yourself!

Truth be told, even though you might be a phenomenal web designer, you have to be an even more phenomenal marketer.  No one’s going to sell your services for you, so it’s up to you to pound the digital pavement and reach out to your ideal customers.   Take the time to discover who this “ideal customer” is.  They could be fellow start-ups like yourself, or people who already have a website but are in dire need of a redesign.   They could even be members of a specific profession like lawyers or chiropractors.  Whatever your chosen community, you’ve got to reach out and make sure your name is top-of-mind when someone thinks “web designer”.

Find online forums, local events, social communities or other places where your customers spend their time.  By meeting them on their level, you’re more likely to connect with their colleagues, associates and others.  Referrals can do wonders for your client roster, so it pays to network and get to know people both online and offline who can send business your way.

One of the things that really helps me win over clients to this day is a good proposal.  It doesn’t have to be full of numbers and complicated diagrams – just something simple and straightforward that lays out the whole process in a way that’s easy for the client to understand.  It also has to be the kind of proposal that’s quick and easy to create.   I’ve closed many high paying projects on account of having a professional estimate sent to the client within hours.

 

Have a Backup Plan, including Finances

I was fortunate that when I started freelancing, I was attending a local university and still lived at home while paying toward my share of utilities, groceries and basic rent.  Many people start freelancing while working at their normal job or even splitting their time between part time work and moonlighting as a freelancer.  Whatever the case, have a few months worth of savings stashed away so that you aren’t living on crackers and Ramen noodles if things fall through.

 

Take Note of Important Tax and Insurance Differences

If you live in the U.S., and you quit your full-time job to freelance, there will be a few notable differences.  If you’re not on your parents’ or spouse’s insurance, be prepared to have to pay a higher premium for rather basic insurance as someone who is self-employed.  Also bear in mind that you will need to pay quarterly self-employment taxes.  At your normal job, your social security and Medicare contributions were taken out of your check automatically.  As a self-employed business owner (also known as a sole proprietor), you’ll be responsible for taking care of these fees yourself.  I highly recommend consulting a tax advisor once you decide to take that leap into full-time freelancing.

 

Choose Your Brand Well

I cringe when I thought of the domain name I first registered in 1999, thinking how cool and edgy it sounded. It never occurred to me what a pain it would be to try and spell it to clients over the phone. Thankfully, by 2002, I had my current domain and business name, and it was much more memorable.

That being said, consider your domain name and brand – avoid domains with hyphens, unusual spellings or numbers.  If you’re not confident designing your own logo, hire a reputable company to do it for you.

 

Set Your Prices

This part could be a topic in and of itself, but setting prices is another one of those points that hardly anyone gets right, right from the start.  Here’s a helpful online calculator that factors in many of the monthly living expenses you’ll need to consider.  Also keep in mind the hourly rates that are consistent with your particular skill-set, demand for your service and so forth.  Create a base pricing figure you can easily work from and then adjust as necessary.

 

Create a Routine that Works for You

Remember that part about working in your pajamas?  Well, there is a slice of truth to that.  One of the advantages of being a freelancer is that you can develop your own routine.  After a few weeks, your body will settle into a natural schedule of highs and lows throughout the day. Whether you feel your best tackling tough projects first thing in the morning, or you get your best ideas at midnight, it pays to listen to your body and group your work into chunks or tasks accordingly.

 

Now It’s Your Turn!

It is my hope that you’ll not only be able to learn from this list, but also set about forging your own career path with confidence! 

April 23rd, 2013

21 Inspiring Clean Website Designs | Web Design Ledger

It’s always nice to browse some nice and clean websites. It is a good way to get inspiration for future projects and also to see how designers are delivering clean designs. Today we gathered some inspiring examples to show you that clean layouts don’t need to be plain and boring, you can have colors, textures, illustrated elements and much more. Remember that the concept of clean design is to have something simple, striped from allegories and unnecessary elements, not something boring. So check out the examples we have here and let us know what you think of them.

living edge

21 Inspiring Clean Website Designs

Shane Prendergast

21 Inspiring Clean Website Designs

Wallmob

21 Inspiring Clean Website Designs

Wootten

21 Inspiring Clean Website Designs

Oli Llisher

21 Inspiring Clean Website Designs

Pitchbox

21 Inspiring Clean Website Designs

Thankful

21 Inspiring Clean Website Designs

kippt

21 Inspiring Clean Website Designs

Studio Brun

21 Inspiring Clean Website Designs

Coastal Conservation League

21 Inspiring Clean Website Designs

Peachey Photography

21 Inspiring Clean Website Designs

Richard Photo Lab

21 Inspiring Clean Website Designs

mixpanel

21 Inspiring Clean Website Designs

Joyride Coffee Distributors

21 Inspiring Clean Website Designs

Lars Tornoe

21 Inspiring Clean Website Designs

Knock Knock Factory

21 Inspiring Clean Website Designs

Cedric Vella

21 Inspiring Clean Website Designs

Amy Woodside

21 Inspiring Clean Website Designs

Instrument

21 Inspiring Clean Website Designs

Michiel de Draaf

21 Inspiring Clean Website Designs

The Clocksmiths

21 Inspiring Clean Website Designs

April 22nd, 2013
Comments Off

Testing the Success of your Web Designs

It’s Friday. I’m hungry. One of my friends recommended a new trendy restaurant and, hey, it’s right around the corner. However, knowing that “trendy” can mean “a sole sprig of lettuce and a sprinkling of truffle oil” and I wasn’t joking about this whole hunger thing, I head to the restaurant’s site to check out the menu before making any firm plans. But, when the graphic and video-heavy site finally loads, the menu is impossible to find, as are directions to the entrance, which I’ve been told is hidden down some strange back alley. In fact, I can’t even figure out how to enter the site, mired as I am in this gorgeous yet impossible to navigate landing page, with earthy music blaring through my speakers. Frustrated, I choose another old standby just around the corner (probably ten feet from this new restaurant, but who can tell?), just to spite the first one.

I know I’m not the only person who feels this way. And yet, I appreciate beautiful design just as much as the next person, and dislike those hyper-corporate sites that are all business and no personality. That’s why I think it’s so important to test the success of your web designs — not just to see whether or not users actually find the site compelling, easy to navigate, and even easier to buy from, but also to see how far a designer can push the envelope before that bottom line begins to suffer.

To accurately measure the success of a website, Google Analytics is a must. There’s a lot to it, so I highly recommend this analytics guide for both an initial grounding in the subject and for more advanced, deeper investigations. As a start, here are just a few key things to look out for when testing the success of your web designs.

Conversion Rate

When it comes to determining the effectiveness of a website’s user interface, there are few measures as telling as conversion rate. Whether it’s an actual purchase or simply downloading a pamphlet, conversion rate is an effective way to gauge just how engaged in the site users are, and where in the sale funnel they might be encountering roadblocks.

Of course, basic measures like keeping a headcount of newsletter sign-ups are useful, but to really dig into the nitty gritty, consider using Google Analytic’s Advanced Segmentation tool. As you can see in this case study of a company called WBC, advanced segmentation can really help you dig down into subtle measures that are powerful yet easy to miss. For example, this particular company found that, lurking within a generally low conversion rate were loyal users with high conversion rates. This lead to a redesign that displayed a greater range of products most desired by loyal customers, and established industry authority.

This tool is most powerful when paired with content experiments, which, despite the title, can be applied not just to content but to various elements of design as well. As a designer, you already know that on a landing page the most crucial information and any forms or other means of conversion should appear above the fold. But how much information should appear? Should the content be wordy and informational or highly visual? How clean is too clean, how packed too packed? With content experiments, you’ll randomly send visitors two or more versions of your site while tracking conversion rates, enabling you to test everything from major layout differences to the color of a headline. Whether that creative, totally new layout works or not will entirely come down to the data.

Event Tracking

Let’s say a design is working and a customer has added the desired product into the cart or started to fill out a form field. But then they get frustrated with just how long the form is, or they type something incorrectly, or the cart responds with an error message. Make no mistake: web users are fickle and these kinds of frustrations are likely to turn them away.

Google Analytics’ event tracking can both identify and help mitigate the problem. With the ga.js tracking code, you’ll be able to see and record just how users are interacting with website elements, and you can classify those interactions with web page objects. So, whether your forms are too long or your checkout process is too cumbersome, event tracking can help you identify user experience and sales funnel roadblocks and move them out of the way.

Site Speed

By most accounts, the average user expects a web page to load in no more than 2 seconds. Yep, all of those jaw-dropping photos and helpful videos and interactive features you’ve added to a site in order to up conversions and engage users (and just generally keep things fun and cool) have all of a couple of seconds to load and become totally functionally. Not only that, but they also have to work on a variety of devices; fair or not, users will blame the site for not loading on their ancient iMac, and all of that design genius of yours will be thrown out of the window.

First order of business a site speed test for every site you produce. The Site Speed menu under Content in your Google Analytics dashboard will also provide a look at specific page load times, as well as that of the overall site. If the results are disappointing and you’ve got a high percentage of visitors coming to you from around the world, consider hosting your site on a Content Distributed Network like MetaCDN. As the name implies, CDNs distribute storage of a site across a worldwide network, so that users will always be downloading page elements from the nearest server to them, rather than waiting for it to download from some server halfway across the world. CDNs also automatically account for the demands of different devices, making for an overall much speedier experience (and a higher likelihood that visitors will stick around).

Bounce Rate

Bounce rate analytics are easy to find in your GA dashboard both for landing pages and specific pages on your site. However, just what bounce rate means is a little more confusingStrictly defined, bounce rate measures the percentage of users who leave the site rather than clicking links that bring them deeper in.

But if you’ve designed for, say, an expertise blog, this could just mean that users are finding exactly what they want and leaving. You’ll know this for sure if they’re staying awhile on the site — something you can see for certain when you take a look at site times in the Engagement tool. This all may mean that the content and layout in themselves might be great, but there may not be, for example, a nice display of related articles in the sidebar, or enough featuring of services to show the reader that there is more on offer. Other causes of high bounce rate might include loading and error issues, boring content and design and poor usability.

Google Experiments can again prove crucial not just in upping conversions but also in getting users to stay there in the first place. Use the bounce rate to identify and pin down the problem, and Experiments to determine just what to do about it.

Take-Away

Creativity, artfulness, and fun are all crucial elements of good web design. But users won’t appreciate any of that if they can’t find what they’re looking for — and fast. Rather than fearing the numbers, web designers should use them as the source of their creativity. In fact, many times the most creative and inspiring solutions are those that come from within real world constraints. In that way, analytics and web design are perfectly paired.

April 21st, 2013

100+ Best Tools and Apps For Web Design And Development

The great thing about being a Web Designer & Developer is that it is a constantly changing field, full of bright minds that are also constantly changing and innovating. This has yielded not only a fun work environment for creatives, but a useful, informative, and fun web for everyone!

There’s An App For That.

Popout

Remember that Apple ad from 2009? “There’s an app for that”. Man, that was forever ago, but it doesn’t feel like it (maybe I am just getting old haha)! Well it was true then, and it is even truer now, no matter what task you set out to do in the design and development realm, someone (either an individual, or a company) has probably created an app, or a tool, or some kind of workflow to help you achieve the task in a more efficient and timely way. Thanks Internet! We can definitely use the help though – in this world of ever advancing technology, it can be pretty tough to keep up with everything and these tools definitely help. Even more, it is hard to keep up with all the tools out there! What is new? What is the best? Good questions, and we are here to help you find the best new tools out there! Today we have rounded up some of the best tools to get the job done for modern web development. We hope that you find them helpful and welcome additions to your current Design & Dev workflow! Enjoy!

Axure

Great tool that goes beyond mockups, allowing you to make interactive HTML prototypes of Websites & Apps!

PlaceImg

Hate hunting for images to use as placeholders? So did these guys. Now they made this awesome tool to do it for you!

WebFlow

Brace yourselves for the release of this awesome visual responsive design app. Webflow enables you to create responsive layouts and pixel-perfect designs directly in your browser, without writing a single line of code.

Antwork

Pesky html email troubleshooting getting you down? Don’t let it! With this awesome framework you can easily create bulletproof responsive email layouts with dynamic content in mind. Finally, you can make your responsive emails exciting, beautiful, while working across all devices (Even Outlook)!

Parsley.js

Awesome framework that lets you validate your forms (and make them look nice) without writing a single javascript line on the FrontEnd!

Retina.js

Makes it easier to sit back and drool over those hot retina graphics you are serving up!

Genericons

Need generic icons that look awesome and are vector, in web font form?! Bingo! Genericons is a free, GPL, flexible icon font for blogs!

Indigo Studio by Infragistics

Arguably one of the best wireframing/prototyping tools of its kind – if you need to mock something up give it a try!

Browser Stack

Awesome app for the dreaded task of cross browser testing sites. As the video suggests, avoid zombie nightmare situations and just check it live in the browser. Simple! haha.

Breezi

A Powerful design app, a website builder that is different from all the rest. It gives you full design control, super-flexible apps, visual CSS editing, layout builder, FTP & Dropbox syncing, and more!

Adobe Kuler

Awesome tool for quickly getting a set of colours to work with. Cuz we all love colors AMIRITE!?

Am I Responsive

Really cool site that lets you preview your responsive web design in real time on all those little screens! :D

QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework. So powerful it can even test itself! Test-ception!

The Responsive Calculator

This is for the designer that must translate a PSD into a responsive web design with pixel perfect precision!

Wood Cuttr

Helpful tool for assisting with tweaking the queries of your responsive designs

Responsive Design Grids Generator

Really awesome tool for generating the code for different responsive grid designs

Even More Web Tools!

Need more awesome (and fresh) web design & dev tools? Check these out!

What’s new for designers, January 2013

10 Wireframing and Prototyping Tools for 2013

The 20 best new tools for web design and development of 2012

Useful Code Editors For Web Designers And Developers

85 Top Responsive Web Design Tools

April 21st, 2013

20+ Inspirational Web Hosting Designs

If anything makes the web go round, it is Web Hosts. Without them we wouldn’t have anywhere to put our sites (easily) and the web may not have grown so exponentially if it weren’t for the abundance of affordable and reliableWebsite Hosting on the web. So if you are tasked with creating a web design for one of these clients (or for yourself) you better make it count!

A Host of Web Design Inspiration!

Like I said there are plenty of web hosts out there, but that doesn’t mean they are all good (by any means!) or have good designs! It can sometimes be hard to find great web hosting designs out there to get inspired by, but that is why we are here today! Today we have rounded up some of the slickest, hottest, and most awesome-est Web Host Designs we have found on the web lately to inspire your creative juices to make the hosting world look as great as their service! Whatever you are working on, there is something here to get inspired by – so I hope that you enjoy!

Datahaus Web Hosting

WeLoveMail Premium Mail Hosting

Goodnse

WeboxIT – Web Hosting

MK Host

Home.pl Hosting Provider

hoseo.pl SEO Hosting

The Hosting Factory

ServerLux Proffesional Hosting Web Design

5ITE Hosting Company

Web Design Pitch for Ezpz Hosting

Xhosting Multipurpose Creative Unique PSD Template Design

That’s All Folks!

April 20th, 2013

Free Fonts for Web / UI Designers

Friday Fresh Free Fonts - Laika, Distractor, ...

Friday fresh free fonts is a series of free fonts posted every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on this FFFF post and make sure to comeback for more next week.

Laika

by Zootype

Download Laika

Friday Fresh Free Fonts

Distractor

by Simon Stratford

Download Distractor

Friday Fresh Free Fonts

Brixton

by Luke Ferrand

Download Brixton

Friday Fresh Free Fonts

Leckerli One

by Gesine Todt

Download Leckerli One

Friday Fresh Free Fonts

August 16th, 2011

What’s New for Web Designers

thumb

New apps and websites seem to be appearing on an almost daily basis, but trying to find the good ones among them can be tough, especially considering how many are not that great.

That’s why every month we research and showcase some of the best and latest resources available for web designers.

Here’s the newest installment of what’s new for web designers in the past few weeks. This month we’ve covered everything from new fonts to useful web apps to some new resources for you to use in your own designs, all recently launched!

As always, if we’ve missed something, let us know in the comments. And if you know of an app you’d like included in the next roundup, please tweet it to @cameron_chapman.

Please feel free to share your views on the products and services that we’re featuring this month, in the comments area below…

The Great Typekit Table

Sleepover has published this chart that shows us which Typekit fonts are good for long blocks of text. In addition to listing appropriate fonts, it also tells us whether the fonts are OK for Windows, whether they include extra weights and opticals, and more. All the fonts included had to meet certain criteria: they had to be available in bold, italic, and bold italic styles, and they couldn’t be handwriting, script or monospace.

Instagram

Instagram is a new camera app for iPhone. It’s free, and lets you snap a photo and then apply filters to it before sharing it via Facebook, Twitter or Flickr.

Curio 7

Curio 7 is the newest version of the Curio app for Mac, which allows for better organization of creative projects. This version adds a bunch of new features, and is easier to use than previous versions.

Sublime Video

Sublime Video is a new embeddable HTML5 video player, still in private beta. It will be a paid app once the beta is over, but aims to be more cost-effective than free apps by removing the need to manage or maintain the app, or go through complicated integration procedures.

Alertful

Alertful is a simple, free reminder service. Just enter a task, holiday, meeting, or other event and your email address, and it will remind you on the appropriate day. You can tell it whether to just remind you once or on a daily, weekly, monthly, or yearly basis.

BrushLovers.com

BrushLovers.com is a new sister-site to Webdesigner Depot that offers a huge collection of both free and premium Photoshop brushes. The brushes included are all exclusive, so you won’t find them anywhere else!

MailerLite

MailerLite is a low-cost email newsletter program that uses a drag-and-drop content editor and doesn’t require HTML skills. Pricing starts at just over $.01/email sent, and goes down from there, depending on volume.

Wibba

Wibba is a new social sharing service for tech products, both online and off. You can share anything related to the tech industry: news, apps, videos, and more, and follow people to see what they’re sharing.

PicsEngine

PicsEngine is a new photo storage and sharing service. They offer a 30-day trial, but after that the charge is 5 Euros per month (or 50 Euros per year) for unlimited storage and up to 10GB of bandwidth per month. Photo galleries can be viewed with any browser, while the library service only works on Chrome, Safari and Firefox.

Observer

Observer is a new analytics app, currently still in private beta. It has a very elegant UI, and can give both a high-level view as well as a detailed view of what you need to know about your website traffic.

Weet for iPhone

Weet is a new, $.99 Twitter app for iPhone. It offers a clean interface, a number of built-in services (like Bit.ly, Posterous, Twitpic and TwitVid), and Read Later support. It also supports multiple accounts, and supports twitmore.

Awesome Fontstacks

Awesome Fontstacks is a great site for finding and creating failsafe font stacks that can be used with @font-face. Just pick a font to start, and the site will then show you compatible fonts.

Gitwrite

Gitwrite is “Blogging. For Nerds. Done right.” It’s basically a blogging platform built on Git. You sign up with Github and can then can update either via git or using their web interface.

Desks Near Me

Freelancers often work from home, which is great. Except when you’d like to get out of the house and work somewhere else for the day. That’s where Desks Near Me comes in. Enter your location and it will tell you of available places nearby where you can work for the day.

Owe Me Cash

Owe Me Cash is an online “collections” service that will send reminders via phone, text and email to those who owe you money.

RailsWizard

RailsWizard simplifies the creation of new Rails apps, by using a wizard to walk you through setting up the initial elements of your app. You can enter everything from the Database/ORM to the JavaScript framework and plugins to the templating engine and more.

foxGuide

foxGuide is a Firefox plugin that lets you add Photoshop-esque guides to webpages. It saves the guides you make for each page, too, so you don’t have to recreate them the next time you need them.

NULL Free Font

NULL is a new free font from Font Fabric. It’s a bold, sans-serif, display-style font, perfect for headlines.

Roke 1984

Roke 1984 is a new display-style font with a really unique look. It’s based on a geometric forms and mathematical symbols, and includes both numerals and accents.

Spatha Serif

Spatha Serif is a beautiful, slightly-rounded serif font with a vintage feel to it.

Unobtrusive Ajax Free Ebook

Here’s a free ebook from Jesse Skinner, and published by O’Reilly, for learning to use Ajax and JavaScript unobtrusively.

Verify

Verify is a new app for gathering feedback from users on mockups or screens. It gives clear, actionable results, and can be used for A/B testing among other types of tests. They offer a 30-day free trial, and then plans start at $9/month.

Cirkel Pro Font Family

Cirkel Pro is a funky new font family, that includes a number of unusual forms, all based on circles.

Skyhook Mono Font Family

The Skyhook Mono font family includes a variety of font weights and styles of this angular, monospace typeface. The regular weight is free to download, though other styles run about $20 each.

I Slabbed the Seriff Font

I Slabbed the Seriff is a new free font created with FontStruct. It’s a slab serif typeface, and includes numerals and accents.

Simple Booklet

Simple Booklet is an easy-to-use flipbook creator, that lets you include images, text, video, audio, and other content in your flipbooks, without any coding knowledge.

WordPress Snippets

WordPress Snippets simplifies theme creation and customization by providing pre-built code for a variety of functions and features. You can browse or search included code, or share your own code snippets.

The Square Grid

The Square Grid is a new CSS framework that works based on 35 equal-width columns. It also provides a 28px baseline-grid for smooth vertical rhythm.

Ai -> Canvas

Ai -> Canvas is a plug-in that lets Adobe Illustrator export vector and bitmap artwork directly to an HTML5 canvas element for rendering in a canvas-enabled browser. It provides drawing, animating, and coding options for creating interactive and well-designed canvas-based apps.

Markup

Markup is a bookmarklet that lets you draw on any webpage to share your ideas with others. You can draw with the Magic Marker or write with the Text tool, and then publish your ideas.

yfrog Widget Personalization

yfrog now lets you create a customized, personalized widget for sharing your yfrog photos in a blog or website sidebar.

Twilert

Twilert is a free app that lets you create automated email alerts for tweets. Just enter the search term, hashtag, or other criteria, and the time you want to receive your alerts, and Twilert will email you with any mentions.

Ontwik

Ontwik is a site that showcases lectures, screencasts, and conferences for web designers and developers. You can search or browse by tag (like creativity, Django, Github, JavaScript, jQuery, etc.). You can also submit videos of your own.

Yogile

Yogile is a new photosharing service that lets you create both private and public albums. Yogile stands out, though, by allowing friends and family to also submit images to your albums.

Capturely

Capturely makes it easy to create coming soon pages for your unlaunched websites aimed at getting visitors to submit their email address for updates.

Written exclusively for WDD by Cameron Chapman.

What do you think of these new tools for designers? If we missed something, please share it in the comments below!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: n5UR0E

Source