Web Design

To wireframe or not to wireframe?

Posted on February 28, 2014 at 12:11 pm

There are many ways to improve your efficiency when working in any media based industry. One of the simplest and most effective ways I’ve found is to “draw your map”. Drawing your map is essentially the process of taking your task at hand, and mocking it up into a visual form. This can be anything as simple as writing down words with arrows and create a visual workflow, to creating a series of thumbnails or storyboards to show the progression of an idea. When relating this to web design, developers will often use a method known as wireframing.

website wireframe sketch on digital tablet screen
Image Source: Wireframe Sketch via Shutterstock.

If you don’t know what a wireframe is, it’s basically a generalized mockup representing the layout of a website. There are no definitive rules for this process, and that is why it is so effective and adaptable. Some people will make quick paper sketches of simple shapes and scribbles for text to show elements and their general orientation to each other. Others prefer to create digital wireframes that can be more precise and contain more detail. As long as it succeeds in creating a foundation for your mind to flow off of and reference quickly, it’s doing its job.

There is a bit of a debate on whether wireframing is worth your time or not. As you have likely gathered from my previous statements, I find wireframing to be very much worth the time. That being said, there are a few things that should be considered and taken into account that make wireframing worth the effort.

Don’t be clingy, keep an opened mind

Some designers dislike wireframing because they feel it limits creativity and creates boundaries. You may put a lot of heart, thought, and time into the initial wireframe and don’t want your time to be wasted, and thus push the final design in a direction that works with your original concept.

To avoid this passive mental crutch, you need to create a separation between wireframe and final design. Know the wireframe is a nothing more than a reference point, and if you come up with a design that better suits the user experience, or will in anyway alter the site for the better, don’t be resistant to change. Your best idea is seldom your first.

Gauge your time

The overall purpose of a wireframe is to save time in the long run. There is nothing more frustrating than being happy with a final design, and then finding out you forgot to account for an extra set of text, or a specific call to action. You then have to push things around, or redesign elements to accommodate. This is your chance to give yourself a visual checklist that minimizes that additional time wasted.

The question must then be asked, how much time is acceptable to spend on this mockup phase? Well, this changes depending on your situation and preference. If you are making a site for a client and have a very small time budget, you probably don’t want to spend more than 10-15 minutes so you have more time allotted to the more detailed art and design. If you have more of a flexible timeframe or it is a personal project, it may be beneficial to flesh out your ideas a little more and even mockup multiple wireframes. Overall, this is something you will have to weigh for yourself on a case by case basis, and find what suits your best interests.

Find your own flow

Like anything else you do on a regular basis, as you make a habit of wireframing, you will become better at it. The key to improving the efficiency and effectiveness of this process is for it to feel so second nature you start establishing a system that works. Maybe it is using a consistent naming convention for large amounts of labeling, or the use of quick symbols to represent elements that are unique but consistently used. My point is, do not be discouraged if you feel you are not fast enough. You can only get better, and will.

Simple pixel perfect browser frame for presenting your prototypes and portfolio works to clients
Image Source: Browser Frame via Shutterstock.

After getting used to this pre-planning mindset, you will likely start to connect the dots on ways “Drawing your map” can be applied to other aspects of your work. Using myself as an example, I am both a designer and front end developer. Starting out skinning, with my first few websites I began to realize the majority of my time was wasted on backtracking due to something that initially seemed simple, but ended up using a CSS trick, and altered HTML.

Since then, whether it is for my own design or someone else’s, I always start by making a wireframe of my skinning process. Rather than overall design elements, I layout my div structure, mark up my common classes, and jot CSS notes for dimensions, main colors, or positioning. This easily cuts my skinning time by a quarter or more, depending on the sites complexity. I’ve gotten to the point where I can code out the HTML and CSS and have the skin 80% finished and flawless the first time I load it up in a browser. It took time to nail my system, and I keep adapting it, but you can apply the same concept to anything you do. You are your most valuable asset, make yourself evolve.

Your mind is a terrible thing to waste

Employers love to see your thought process and how you handle the entirety of a project. No matter if you are fresh out of college or just looking to upgrade your current career status, wireframes can be a great tool to have in your back pocket. It sends a really strong message when you can go into an interview with a few wireframes, a couple of digital designs mocks, and a final product.

Doing this, you can walk through the mentality behind one or two of your best pieces of work, rather than pulling up your two best sites and a few better than average ones in a browser. This plays on the simple principal of quality over quantity. If you explain the way you work, it separates the thinkers, from the drones.

With this idea in mind, be sure to save your wireframes and various design compositions, even if your final design ended up nothing like your original wireframe. Approaching projects with this kind of mentality, gives even more justification to wireframing. Now not only are you mocking up your thoughts for the immediate task at hand, but also making a personal investment that you can later utilize to market yourself and display how you can work a project in full, from start to finish.

This mindset also works off of the first two issues I brought up. If you feel that diverging from your original wireframe makes your original time and effort wasted, you are sadly mistaken. When referring to a portfolio, this simply shows that you are willing and able to adapt your own creativity. It also shows that you can prioritize the website’s quality over your own sense of perfection to ultimately produce the best possible end product.


Overall, it does not really matter what I or anyone else tells you, the decision to wireframe is yours alone. Most designers tend to be very “right-brained”, so mapping out your ideas in a visual fashion will make it easier to channel your thoughts. However, if you tend to be more calculating and work best from memory and written words, perhaps this would be more cumbersome than what you feel it is worth. If nothing else, I hope you can take away a different sense of what wireframing can be. A tool, that if properly used, can increase efficiency, make you a psychologically better designer, and assist in marketing yourself in the years to come.

Posted in Web Design

Freebie: Stripes & Co – A Line-Styled Icon Set (65 Icons)

Posted on February 26, 2014 at 12:11 pm

This weeks freebie has been created and kindly released by Nick Zoutendijk, a graphic designer based in Amsterdam. What we have for you is a versatile and modern line/glyph styled icon set called Stripes & Co.

In total there are 65 icons in the set and they come in both AI and EPS formats so you can edit and re-size the icons as per your needs. You can also freely use these icons in both your commercial and p[ersonal projects.

Here they are:

Stripes & Co line glyph Splash Preview

Stripes & Co Icon Set Preview

Click on the preview below to view the full-size screenshot:

Stripes & Co line icon set Small Preview

Download & License

You are free to use the Stripes & Co Icon Set in your commercial and personal projects.

About the Designer

The Stripes & Co icon set has been created by Dutch designer Nick Zoutendijk. You can view more of his work on Behance.

Posted in Web Design

Weekly Design News (N.220)

Posted on February 24, 2014 at 12:11 pm

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

Worth Reading

David Walsh writes about 5 ways that CSS and JS interact that you may not know about
5 ways that CSS and JS interact - Weekly Design News

Viljami S. published a dive into plain JavaScript
dive into plain JavaScript - Weekly Design News

Nicolas Bevacqua talks about how to design great programs
design great programs - Weekly Design News

LESS vs Sass? It’s time to switch to Sass according to Zing Design
 - Weekly Design News

Evan Brooks wrote about how to make syntax highlighting more useful
LESS vs Sass? - Weekly Design News

Håkon Wium Lie shares CSS regions considered harmful
CSS regions considered harmful - Weekly Design News

Wireframing is NOT prototyping according to Vandan Desai
Wireframing is NOT prototyping - Weekly Design News

Denis Potschien wrote about the capabilities and limitations of styling SVG with CSS
capabilities and limitations of styling SVG with CSS - Weekly Design News

Umar Hansa wrote about working with LESS and the Chrome DevTools
LESS and the Chrome DevTools - Weekly Design News

CatsWhoCode published a bunch of handy and reusable jQuery code snippets
handy and reusable jQuery code snippets - Weekly Design News

We published a tutorial on building a simple Reddit API webapp
dive into plain JavaScript - Weekly Design News0

Vectortuts published their A to Z of Illustrator
dive into plain JavaScript - Weekly Design News1

Elena Simionescu shares 15 powerful social media tips
dive into plain JavaScript - Weekly Design News2

New Resources & Services

TmTheme Editor – A color scheme editor for SublimeText
dive into plain JavaScript - Weekly Design News3

jQuery.keyframes – Generates and plays CSS3 keyframes quickly and easily
dive into plain JavaScript - Weekly Design News4

scrollReveal.js – Declarative on-scroll reveal animations
dive into plain JavaScript - Weekly Design News5

nanoGALLERY – Easy to implement jQuery image gallery
dive into plain JavaScript - Weekly Design News6

highlight.js – Javascript syntax highlighter
dive into plain JavaScript - Weekly Design News7

jquery-lazyload-any – A jQuery plugin for lazyloading anything
dive into plain JavaScript - Weekly Design News8

Designer Freebies

Meroo Flat-Styled Icon Set (110 Icons, PSD)
dive into plain JavaScript - Weekly Design News9

Twitter GUI Template (PSD)
design great programs - Weekly Design News0


Minimalist FIFA World Cup Poster Series
design great programs - Weekly Design News1

Unforgettable Brands in 2014
design great programs - Weekly Design News2

…and finally…

Comic Sans Criminal – There’s help available for people like you!
design great programs - Weekly Design News3

Posted in Web Design

40 Recently Released Free Fonts

Posted on February 22, 2014 at 12:11 pm

Struggling to find that particular font that matches your creative vision? Well, you have came to right place. For today’s post we have collected 40 recently (last 4-5 months) released fonts that will hopefully make your search that little bit easier.

All of the fonts in this post are free to use in both your personal and commercial projects. But please do check the licenses of each just to be clear, as they have been known to change from time to time.

Remember that typography has and always will play a critical and definitive role in how a user/reader interacts with your project. So when it comes to selecting your fonts please do “choose wisely“.

Bebas Neue by Ryoichi Tsunekawa

Bebas Neuefont designed by Ryoichi Tsunekawa free typeface

Bebas Neue

Posted in Web Design

Markup-Service Giveaway – Winners Announced

Posted on February 20, 2014 at 12:11 pm

Last weeks Markup Service giveaway ended a few days ago and it is now time to announce the winners

Here are our randomnly chosen winners:

1st Place Winner ($300 worth of services)

Name: Šefik Mujkić
Comment URL: http://speckyboy.com/2014/01/17/giveaway-comment-to-win-psd-to-html-coding-from-markup-service/#comment-1208924107

2nd Place Winner ($200 worth of services)

Name: Rahul Joshi
Comment URL: http://speckyboy.com/2014/01/17/giveaway-comment-to-win-psd-to-html-coding-from-markup-service/#comment-1206773090

Hopefully by now you would have received our winner information email, if not please get in touch with us here: mail@speckyboy.com.

About Markup-Service


Markup-Service is a team of professionals that takes your designs and converts them into valid fast-loading XHML/CSS code. These guys are also good at JavaScript, jQuery, WordPress, Joomla, Drupal, email templates and much more. They offer an easy ordering process, fast quality work, high level customer support, money-back and non-disclosure guarantees.

Just check out some examples of their code and what their clients have to say.

Posted in Web Design

15 New Responsive Frameworks

Posted on February 18, 2014 at 3:56 pm

It has been a long time coming, but here is part 4 in in our continuous series of articles that takes a look at the latest and greatest responsive frameworks. We’re back with another 15 for you to consider.

Looking back at our previous posts and comparing them to the current batch of CSS frameworks, you will notice that as RWD matures the frameworks have become more robust and reliable. And perhaps inspired by the popularity of Bootstrap, Foundation and Gumby, many new frameworks have evolved into all-in-one feature-rich solutions by including many extras, including reusable components and widgets (icons, modals, pagination, breadcrumbs, navigation…).

Of course, not all of the frameworks are jam-packed with features, some just like to give you a solid layout foundation.

Here are the frameworks:


Girder CSS framework grid responsive UI kit

Built with Sass, Girder is a minimalistic grid toolkit that builds flexible layouts divided into logical sections. It uses silent classes (placeholders) to structure content in HTML (to keep your markup free of excess presentational classes) and it can scale based on your project’s needs as it includes support for complex media queries using the Breakpoint() compass plugin.



Cardinal CSS framework grid responsive UI kit

Cardinal is a small mobile first CSS framework with its focus primarily on responsive web applications. The purpose of Cardinal is to ‘make it easier to rapidly prototype, build, scale, and maintain CSS’ for responsive web apps. It does omits many aesthetic design decisions that will often drag down larger, more complicated CSS frameworks, leaving the design to you.



Typeplate typography CSS framework grid responsive UI kit

Typeplate is a typographic starter kit that doesn’t make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.



Gridism CSS framework grid responsive UI kit

Gridism is a simple CSS grid that comes with in-built patterns for responsive design.



Furatto CSS framework grid responsive UI kit

The flat styled Furatto is a front-end framework for rapid web development based on other frameworks, such as Twitter Bootstrap, Foundation…, as a start point.



PocketGrid CSS framework grid responsive UI kit

PocketGrid is a lightweight (0.5kB) pure CSS responsive grid system that allows for an unlimited number of columns and breakpoints. Instead of creating grids with rows and columns, PocketGrid has a more flexible system with blocks and block groups. Block groups are similar to rows, and blocks are similar to columns, allowing for more flexibility than traditional grids.



Fitgrid CSS framework grid responsive UI kit

Designed for rapid prototyping (but also runs well in production environments), .Fitgrd is a solid foundation for designers that don’t want to have their pages look like they are “bootstraped”. The grid is divided into twelve columns with percentual widths, with each column having a two percent margin on both sides.



Kraken CSS framework grid responsive UI kit

Kraken is a lightweight, mobile-first boilerplate that includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons; Basic form styling; Optional add-ons for more functionality.



Markup CSS framework grid responsive UI kit

Markup is a simple collection of layouts, widgets, UI styles and other components that you can make use of in your projects in order to code rapidly and efficiently.



Topcoat CSS framework grid responsive UI kit

Topcoat is a fully themable and open source CSS framework to help you work with and create web apps with ease.



Cardinal CSS framework grid responsive UI kit0

Cascade Framework operates by splitting your CSS into seperate files based on features rather than selectors and by implementing a modifier design pattern inspired by SMACCS and OOCSS.



Cardinal CSS framework grid responsive UI kit1

Responsable is a responsive grid system based on Semantic.gs and powered by LESS.



Cardinal CSS framework grid responsive UI kit2

Ratchet lets you prototype mobile apps using simple HTML, CSS and JavaScript components.



Cardinal CSS framework grid responsive UI kit3

Clank is an open source prototyping framework that helps you work with mobile apps.


Responsive Web CSS

Cardinal CSS framework grid responsive UI kit4

Responsive Web CSS helps you layout your web pages within minutes. You can specify target devices and resolutions for responsiveness, and then easily download the site skeleton.

Responsive Web CSS

Posted in Web Design

Weekly Web & Mobile Creativity n.49

Posted on February 18, 2014 at 12:11 pm

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.


Kaipoche - Web and Mobile Creativity

The Pattern Library

The Pattern Library - Web and Mobile Creativity

Future Collective

Future Collective - Web and Mobile Creativity

The Flutenizer

The Flutenizer - Web and Mobile Creativity

Casse-Tête Chinois L’Expérience

Casse-Tête Chinois L

Grand Prix Cycliste de Gatineau

Grand Prix Cycliste de Gatineau - Web and Mobile Creativity


Ripple - Web and Mobile Creativity

BBC News (Mobile App Concept)

BBC News Mobile App Concept - Web and Mobile Creativity

Posted in Web Design

Minimalist FIFA World Cup Poster Series

Posted on February 16, 2014 at 12:11 pm

With only five months to go until the kick-off of the 2014 FIFA World Cup we thought we would get the ball rolling (pardon the pun) by sharing with you these minimalist football posters from Brazilian designer Andre Fidusi. He has designed a poster for each of the previous 19 world cups with each poster having a small historical cryptic message that you need to decipher.

We only managed to decipher 10 of the posters, how many did you?

Minimalist FIFA World Cup Posters

1930 Fifa World Cup Minimalist Poster Series
1930 – Uruguay

1934 Fifa World Cup Minimalist Poster Series
1934 – Italy

1938 Fifa World Cup Minimalist Poster Series
1938 – France

1950 Fifa World Cup Minimalist Poster Series
1950 – Brazil

1954 Fifa World Cup Minimalist Poster Series
1954 – Switzerland

1958 Fifa World Cup Minimalist Poster Series
1958 – Sweden

1962 Fifa World Cup Minimalist Poster Series
1962 – Chile

1966 Fifa World Cup Minimalist Poster Series
1966 – England

1970 Fifa World Cup Minimalist Poster Series
1970 – Mexico

1974 Fifa World Cup Minimalist Poster Series
1974 – West Germany

1934 Fifa World Cup Minimalist Poster Series0
1978 – Argentina

1934 Fifa World Cup Minimalist Poster Series1
1982 – Spain

1934 Fifa World Cup Minimalist Poster Series2
1986 – Mexico

1934 Fifa World Cup Minimalist Poster Series3
1990 – Italy

1934 Fifa World Cup Minimalist Poster Series4
1994 – USA

1934 Fifa World Cup Minimalist Poster Series5
1998 – France

1934 Fifa World Cup Minimalist Poster Series6
2002 – Japan/South Korea

1934 Fifa World Cup Minimalist Poster Series7
2006 – Germany

1934 Fifa World Cup Minimalist Poster Series8
2010 – South Africa

Minimalist FIFA World Cup Posters

Posted in Web Design

15 Powerful Social Media Tips

Posted on February 14, 2014 at 12:11 pm

Social media is ever-changing and ever-growing. Of course, this is true of the internet in general, but even more so when talking about social media. Facebook, Google+, Twitter and countless others are constantly evolving and changing based on their users’ reading, browsing and posting habits. Of course, this is good news. It does mean that social media will continue to be relevant in the years to come.


It’s also a challenge, though. The landscape is continuously changing, and that’s a fact. Sometimes it can feel like you’re in sinking sand and don’t quite know what to do in order to keep your public engaged. Well, fret no more! This is an exciting time for social media users and brands alike. Old patterns of user-brand interaction are breaking down and new ones, better ones, are emerging.

“Too many brands treat social media as a one way, broadcast channel, rather than a two-way dialogue through which emotional storytelling can be transferred.” – Simon Mainwaring

What follows is an inside look into how you and your brand can keep ahead of all the changes and be as relevant as you can be. It will help you better engage with your target audience, make sure that your followers see your posts, and that they reflect a good image of you and your brand. And, on top of all that, we’ve made sure to break it down into a handy, bite-sized list of 15 tips. So, what are we doing still mucking about with the introduction? Let’s get started with #1, shall we?

1. Don’t Broadcast, Discuss!

This is one of the most important rules of social media. And still, it’s one of the most neglected ones, as advertisers and brands with experience in traditional, one-way media have taken to social media.

Don’t just tell your audience a bit of news and leave it at that. Instead, engage them by proposing topics for discussion and answer as many of the questions and comments as you can. Take in and absorb suggestions. Social media gives you a huge opportunity to know exactly what people think, what they want to know and what they want to see you doing. Make sure you don’t squander that chance by giving them dry, newspaper-ad like content.

Reddit AMA logo

Do a Reddit AMA (Ask Me Anything). More and more artists and business officials have taken to this format in order to bridge the gap between their audiences. It’s a great way to let your followers know that you’re an actual real person, rather than a cold impersonal brand, that is doing something you’re excited about and that you want to share this with the world.

2. Don’t Ever Post “Like vs. Share” Posts

There’s a very unsettling trend amongst big brands. This is the “Like if you X, share if you Y” type of post. It’s a transparent ploy to increase your posts’ reach and everyone can see through it. All it serves to do is alienate those who see the post and, while it does increase post reach, to what end?

If you look at some brand pages, they’re only posting this type of thing. It’s reach for the sake of reach. It will just get more people to see your next “Like vs. Share” post, which will only make you look like an attention-grabbing brand.

Instead, post things your viewers might actually like and share organically. It’s like White Hat SEO vs Black Hat SEO. Of the two, Black Hat usually has better results in the short term, but, in the long term, the only thing that can boost client interaction is White Hat: good content, updated frequently. Stay away from quick fixes for your reach and instead focus on posting quality content. It will, in the end, triumph. And, most importantly, it will do so without making you look condescending and soulless.

3. Hashtags Are Your Friends

Not only does Twitter and Google+ support hashtags, Facebook has recently implemented a searchable hashtag service. So make sure to add targeted hashtags to your posts in order to increase your visibility and enhance your online presence!

4. Facebook Replies

Another recently added Facebook feature is replies on pages. If someone writes a comment on one of the posts on your page, you, or another page follower can reply to that specific comment, creating a subthread for the discussion of that particular post. Use this feature to engage your users!

5. Twitter Trends

Twitter has introduced Twitter Trends for over 160 locations. This means that you can now see exactly what people in a certain area are talking about. This is a great tool to increase your visibility.You can now see what people in a particular area you’re interested in are talking about and you can generate some relevant content related in order to maximize your user interaction.

6. Re-post Your Content

When you’re linking to a blog post, an article on your site, a video you made or a product in your web store, make sure to re-post it from time to time. This makes sense, as it will increase the posts’ visibility and thus generate more traffic. It will make the post visible to more timezones (which can be an issue if yours is a global audience) and it will make sure it reaches new followers that weren’t around when you first shared it.

If your content is relevant (and it should be!), then, for the love of god, re-post it!

7. Post More on Sundays

Studies indicate that, while most people post on Thursdays, the best day to post new content is on a Sunday. As you can see from the graph below, the best day to post is, indeed, the last day of the week and the worst day to post new content is Friday. This makes sense, as people tend to stay in and check the internet more often on Sunday and tend to go out on Fridays. The rest of the week is pretty much even.

graph the best day to post new social media content is on a Sunday

8. Keep It Short!

When writing for social media, brevity is key. Longer posts tend to perform badly. This is hardly news, as “tl;dr” has been a thing for years all over the internet and it’s obvious that once your followers see that “read more” button on any social network, they will probably skip over your post.

So keep your posts brief and engaging!

tl;dr: Nobody shares long-winded walls of text. What they do share is short, concise and interesting posts.

9. Share Content Throughout the Day

Studies have shown that the average life of a social media post is about 3 hours, out of which, the first one accounts for the most interaction. So don’t fuss about the best time to post new content. Just post frequently!

10. Twitter Keyword Targeting

Twitter has recently introduced keyword targeting to its ad platform. Now you have extra targeting at your disposal. For instance, if you’re posting an ad about, say, graphic design, people who post about graphic design will be more likely to see your ad. This helps maximize the impact of your ads.

11. Don’t Put All Your Eggs in the Social Media Basket

Social networking takes up about 20% of all the time people spend online. That does mean that you can’t ignore it as an advertiser or brand. Still, there’s another huge chunk that isn’t spent on social networks and you shouldn’t ignore that either. You need a website. Just relying on a social media profile is a bad move. So don’t make that mistake.

12. Get Your Followers to Recommend Your Brand

People trust recommendations from their friends more than they would an ad. That’s a fact. So what you want to do is get your followers to tell their friends about you. So you should probably spend less on ads and more on quality content.

13. Scheduled Posts & Tweets

Facebook and, more recently, Twitter, have introduced the scheduling of posts. This means that you can now plan a whole weeks’ worth of posts in a few hours. Don’t be afraid to use this great tool in order to maximize your impact.

14. Get a Verified Page

Facebook has now introduced a page verification system that allows users to discern the official page of your brand or public personality from the fake ones that are run by fans. You should use this feature in order to lend your page a little bit more authority. It will make a world of difference.

15. Twitter for Businesses

Twitter has recently introduced Twitter for Businesses. This is a website set up to help companies new to Twitter and ones that are already using it alike. It provides you with great tools that help you make sure that your social media practices are optimum and are generating as much visibility and user engagement as possible.


That pretty much wraps up our list of 15 tips. Now it’s your turn: what are your favorite social media practices and ground rules for social media content? Let us know in the comments section below!

Posted in Web Design

The ZeroBundle Bundle – The Greatest Freebie Bundle for Designers Ever

Posted on February 12, 2014 at 3:56 pm

We have teamed up with WebDesignerDepot to offer our readers one of the greatest freebie bundles for designers ever! The bundle is called the ZeroBundle, and it is packed full of high quality icon sets, beautiful fonts, time-saving PS actions, and many useful templates.

To download the package just click the big blue button below. You should note that this bundle is freely available for a limited time only (ending on the 14th of November 2013), so get downloading now!

Download ZeroBundle

Posted in Web Design

Next Page »