Download Yours Now: Free Email Template! (PSD + HTML)

It’s Valentine’s Day and because we [HEART] our customers and blog readers we’re giving away a free email template in a fully editable PSD format, available for download for your personal or commercial use. Edit away and have your mobile-optimized template coded and ready for your next email campaign. Perfect for advertising your next event!

Download a Free PSD Email Template!

It’s Valentine’s Day and because we [HEART] our customers and blog readers we’re giving away a free email template in a fully editable PSD format, available for download for your personal or commercial use. Edit away and have your mobile-optimized template coded and ready to go for your next email campaign.

Perfect for advertising your next event.

SXSW 2014, anyone? Whether you are in marketing, event planning, or just need to send out a modern email to your mailing list, we’ve got you covered with this free email template – created for marketing and promoting events. We’ve designed a great looking email ready for viewing on all major devices and email clients, whether iOS, Outlook, or Gmail.

Mobile-optimized.

This email template was designed with mobile in mind. As of now, more than half of emails are opened on mobile devices! It’s imperative your email reaches your audience when it’s convenient for them to view and act on it… without compromising the desktop aesthetics. We’ve put great effort into ensuring the CTA button is thumb-clickable, the text is legible, and the imagery makes an impact, all within a minimalist and modern layout.

We hope you’ll enjoy editing and using this freebie email template, shared as a fully editable PSD and provided with example markup – we’ve included the HTML for a variation of this template so you can see how this might translate to code. If you need your completed PSD email design converted to code, we can help!

Download

What’s Included:

Fully editable Photoshop file (PSD)
Example HTML markup of a variation we made
Image comp (JPG)

DOWNLOAD HERE

Preview

Placeholder image used in design is shared under Creative Commons. Source: Unsplash.

Top 5 Web Design Mistakes of Modern Websites

These days, when we stumble upon a website that doesn’t grab our attention or immediately meet our needs, we surf away faster then you can say “HTML.” So how do new sites grab and keep a user’s attention? One of the first steps in creating a compelling and useful website is by avoiding the 5 remarkably common web design mistakes detailed in this post.

In 2013 U.S. internet users spent nearly 70 hours online per month, and U.K. users spent 43 hours online per month. We are so tied to the internet that many of us would rather lose a toe then our modem. Consequently, to some extent, we have all become web experts — or at least, very good at knowing how to find what we want.

1. The site is outdated

While webpages don’t need to be trendy, they do need to be current, both in terms of aesthetics and information. A webpage is the public face of your company. If it looks outdated, consumers may assume that you no longer offer the services you claim to offer, or worse, that you are no longer in business. Unless you’re going intentionally retro, you don’t want images of flip phones or clunky computers. Use bright, contemporary images and design. And be sure, of course, to keep your information up-to-date.

2. The site has no clear call-to-action

The call-to-action accomplishes two things:

It encourages users to further engage with your business.
It allows you to capture leads.

Place the call-to-action on your landing page. Often, the call-to-action is a form where users can leave email and request further information. But if a form is too complicated, at least be sure to encourage users to contact you. And be sure to make your contact information very accessible.

3. The site has no social media component

Facebook now has over 1 billion active monthly users. Twitter and Instagram are undeniable forces, along with Pinterest and LinkedIn. With the rise of social media, traditional disruptive marketing has been further replaced with the concept of content marketing: attracting customers by creating and curating useful and relevant content. You may do this by creating a deep library of texts and tools in your field for your customer; this, however, is not an immediate requirement. What is essential is that you begin to create a community around your field — a community in which you are the experts. Social media is the best tool available for this project.

4. Your site has a non-responsive web design

See our earlier post, “Why Responsive Web Design? Here’s 3 Reasons.” Non-responsive web design limits SEO, discourages on-the-go users, and can cost unnecessary time and money. Moreover, non-responsive web design is outmoded — users have come to expect, and need, responsive websites!

5. Bad UX: Your site is cluttered, incoherent and/or inconsistent

It amazes me how many websites still throw up incomprehensible walls of text. Or they use difficult-to-read fonts. Or they ignore the value of empty space. You want your information to pop, and usually, it will do so with the help of good graphic design. But unfortunately, good graphics don’t solve all of your design problems. Sites may look gorgeous, but because they are inconsistent in their use of font, color and general tone, they become unreadable. Moreover, if they lack good web-sense — that is, interactivity and smart layout — they can become just another pretty picture to surf past.

Remember that by the time you have collated all of your website’s content, organized it in a useful manner, and thrown in some nice graphics, your eyes have become tired. Ask for help. New eyes will see typos and inconsistencies. Moreover, outside experts can bring in new ideas that just may solve intractable communication issues you didn’t even know you had. There are several services you can use to test your site, such as Amazon’s Mechanical Turk, UserTesting, and TaskRabbit. We here at The Site Slinger also help out designers all the time with courtesy design or development feedback for a project you’re prepping. Want us to review something? Just let us know.

The Benefits of Flat Design

Flat design, which is often touted as the future of web design, is a trendy, minimalistic design aesthetic that eschews more complicated design techniques for a more simplified, classic appearance.

If you are planning to design a new website and are trying to decide what type of design is right for you, check out this post. It contains many of the benefits you will reap if you choose to design with flat design.

If you’ve paid attention to what is happening online, you’ve probably heard the term “flat design” – but what is flat design, exactly? Flat design, which is often touted as the future of web design, is a trendy, minimalistic design aesthetic that eschews more complicated design techniques for a more simplified, classic appearance.

Flat design is easy to identify when you spot it; it is often described as clean, and it incorporates straight, crisp edges, bright colors, and 2D illustrations (hence, the name “flat”). Not only is flat design appealing to the eye and easy to read, it also is known for its emphasis on usability and user-friendliness, and it is a great choice for anyone who wants their website to be easy to use for all of its visitors.

If you are planning to design a new website and are trying to decide what type of design is right for you, check out the list below. It contains many of the benefits you will reap if you choose to design with flat design.

1. Great for usability.

It’s just a fact that messages communicated simply and clearly are more easily digested by a viewer. Thus, flat design trumps in terms of usability, since it shuns complicated design elements and excess decoration for the bare essentials – just what the user needs to grasp or see to make the site function. Sites with flat design choose functionality while espousing modern style.

2. Better for Small Screens.

In today’s digital age, people are accessing the Internet via a huge range of devices – from desktops to laptops to tablets to mobile phones. Flat design is helpful because it tends to be both aesthetically pleasing and functional when adapted for a smaller screen. The reason flat design adapts well is because it incorporates a lot of white space and often uses large, clear buttons — which tends to “work,” and appear clear, even when viewed on a smaller screen or device. The latest developments with iPhone have even incorporated flat design, finally.

3. Alleviate Technical Issues.

Flat design can alleviate common technical website issues. Websites designed with flat design require fewer images to design, and they also need far less complicated coding, which often results in faster loading times and a site with less risk for glitches.

4. Better SEO.

A site’s SEO ranking determines how high it appears in search engine results – which in turn increases the likelihood of new customers finding it. There are countless variables that go into calculating a site’s ranking, but one important one is a website’s speed (Basically, faster websites have higher rankings). When a site uses fewer images and smaller images, it takes a lot shorter time to load – which means, in general, that a site designed with flat design will have a shorter loading time and a higher SEO ranking.

5. Focus on content.

One of the best benefits of flat design is that it puts the website’s focus on content or function and not merely its design. You don’t want people visiting your site only because it looks cool or because they want to play with all of its bells and whistles – only to leave after appreciating its style and design. A flat-designed website’s simplicity makes clear its sole purpose, ensuring that people who visit, use its functions or complete a business transaction – ultimately making your site a tool that serves solely to help you increase your business or cause.

Image(s) source: All images in this post were obtained via Creative Commons license from Pixels Daily.

Why Responsive Web Design? Here’s 3 Reasons

In today’s digital age, If you want to make sure your business succeeds, you have to make sure that you have an effective online presence. There are lots of ways to engage customers online – including social media and e-mail marketing campaigns – but one of the most important and effective ways to maximize your online business is through a well-designed website – and, more specifically – a responsive one.

In today’s digital age, If you want to make sure your business succeeds, you have to make sure that you have an effective online presence.

There are lots of ways to engage customers online – including social media and e-mail marketing campaigns – but one of the most important and effective ways to maximize your online business is through a well-designed website – and, more specifically – one using responsive Web design.

A website designed responsively is able to detect what screen size is being used to view your site and adjust itself accordingly so the user has an optimal experience. User experience is the main, and perhaps most obvious, reason behind responsive design.

A responsive site functions at its best possible level, no matter what device the user is viewing it on, and it guarantees the smoothest, most cohesive experience for a user. This encourages people to have a pleasant experience while checking out your service or product – leading to a greater chance at conversion.

UX and “wow” factor aside, there are some great behind-the-scenes reasons to implement responsive design on your website. Need more proof? Keep reading.

Reasons You Should Use Responsive Web Design

1. SEO

One of the best ways to attract new customers online is by appearing in search engine results – and to make sure you do that, you need to make sure you have a high SEO ranking. SEO rankings control how high you show up in search engine results, and they are essentially a measure of a website’s popularity and quality.

One factor that influences your SEO is by the number of clicks it gets, and if you have to design multiple versions of your website – for mobile and non-mobile devices – then your clicks will be split across multiple links. Also, responsive design helps boost SEO because your content isn’t duplicated across multiple sites on the web – which is another factor that can decrease your SEO ranking. If you have a high SEO ranking, you will show up high in search engine results, increasing the chances that you attract new customers online.

2. Time & Money

If you don’t design responsively, you’ll have to design multiple versions of your website, so that it works for customers trying to use your site across a huge range of devices: desktop, tablet and mobile. Developing multiple sites requires multiple updates every time you update your site, which means your developer will have to take more time and energy updating your site.

With a responsive site, you only have to make one update, and all versions of your site will appear with that update. Paying a developer to update multiple versions of a site inherently takes more time and in turn will cost you more money in the long run. A responsive design is more cost-effective and, calculating cost over time, a responsive site is much more financially and resource-efficient.

3. Tracking

If you have multiple versions of your website for mobile and non-mobile devices, it is hard to track the number and type of visitors you are getting accurately. Keeping track of site statistics is important for an online company in order to tailor your business to the people who are actually interested in it – because they are often not the people you were originally targeting or expected to attract. Am I right?

Site statistics can both allow you to see where people are using your site and at what time, which will allow you hone it to suit who is actually using it – and convert potential customers to paying customers. Having a responsive site makes tracking easy, since your traffic will be coming through one site version and not split across multiple – so you won’t have to do the work required to piece together statistics from different sites.

A Necessity, Not a Trend

Responsive design is the forerunner in web design strategies today – and if you want your business to succeed online, it’s important to realize that responsive Web design is more than just a bandwagon. You’ll save yourself time, money, and headaches by choosing to have your site designed and coded responsively. There are multiple approaches – you can do this with or without a framework. Just ask us for more info!

How to Create Awesome Landing Pages

The landing page is perhaps the second most important page on any website (besides the Checkout page, of course!). This is where casual lurkers turn into prospects and actionable leads. Building landing pages is part science, part art. In this blog post, we’ll tell you everything you needed to know about making landing pages that soak up leads like a sponge.

The landing page is perhaps the second most important page on any website (besides the Checkout page, of course!). This is where casual lurkers turn into prospects and actionable leads. Think of it as the wide mouth of a sales funnel, the part where you get to introduce your products and services to a hungry audience.

Building landing pages is part science, part art. In this blog post, we’ll tell you everything you needed to know about making landing pages that soak up leads like a sponge.

What is a Landing Page?

A landing page is just that – a page where a visitor lands.

That’s not very helpful, is it?

To be more precise, any page built specifically to capture visitor information and communicate a specific message is called a landing page, and is used by just about every online marketer. This leaves out your blog posts, home page and product listings, which are basically content pages. A product page with a big shiny ‘Buy Now’ button? That’s not necessarily a landing page, either.

Almost every landing page will have a form of some sorts. This can be a simple “Hey, we’re launching soon. Let us know your email and we’ll drop you a line when we’re live” form, or an in-depth form with over a dozen fields.

But enough talk. Let’s see what a landing page actually looks like:

As you can see, both these pages have a form. In fact, that’s the primary focus of the two pages – to get the visitor to give up some contact information.

This is exactly what a landing page is: a tight, controlled environment designed to capture leads.

Where Can You Use Landing Pages?

Landing pages can be used anyplace where you want to turn general user interest into something more concrete – an email or a telephone number. Mostly, they are used for:

Under Construction Pages: Your website may be under construction, but that doesn’t mean you won’t have stray visitors stopping by for a minute or two. Stick an email capture form and you can turn those stray visitors into prospects and customers.
Coming Soon Pages: Launching a new product or service? Why not add a lead capture form to turn casual interest into actionable leads?
Targeting an Audience: This is where you’re most likely to see landing pages in the wild. Suppose you’re starting a new ad campaign. Since you are a very savvy marketer, you want to make sure that every visitor who lands on your site leaves behind something – preferably an email address/phone number – so you can pitch him your products later. To do this, you can ad a lead capture form to the page, turning your marketing pitch into a landing page.

You can check out some landing pages yourself. Just type in a lucrative keyword like “online MBA”, “credit check”, or “online car loan” into Google, click on the sponsored results at the top, and note the kind of pages you see. More than likely, they’ll be sales pitches with a lead capture form built-in – that is, landing pages.

Or you can do the easy part and check out the inspiration gallery below.

Inspiring Examples

How to Build a Killer Landing Page

Creating landing pages can be hard – not rocket-science-brain-surgery hard, but fairly difficult. This is because every landing page must accommodate two very divergent schools of web design:

Conversion Centric Design: The objective here is to maximize conversion rate. Brand colors, overall site design, etc. can all take a walk. If it doesn’t help get more leads, it gets tossed out the window.
User Centric Design: This is the type of design you’re likely familiar with where users come first. You design to keep users happy and make your brand as appealing as possible. Conversion rates will be the last thing on your mind.

This doesn’t have to be an either-or situation. It’s perfectly possible to create high conversion landing pages that don’t look like one of those scammy “make $1M in 2 hours” sales letters, as we will learn below.

UI and UX for Landing Pages

People don’t read online. That’s a fact backed by solid research. Most of us scan a webpage from left to right, stop when we see something interesting, and move on. This is something you can use to your advantage when designing landing pages.

Grab the visitors with a BIG BOLD HEADLINE.
Your website visitors will scan the page from left to right. Make sure that you organize your information in the same way: all benefits and features of whatever you’re offering go on the left, the sign-up form goes on the right.
Don’t overcomplicate the page with too many bold shapes. Keep it simple – the visitor’s attention should be focused on the offer, not the graphics. Follow the guidelines in our list of pro tips for web design.
Keep as much information as possible ‘above the fold’.
Take out the top navigation menu, perhaps. Don’t give click-happy visitors a reason to leave the landing page.
On that note, remove all external links from the page. Now is not the time to go on a Wikipedia quoting spree.
Stick the necessary pages – About, Contact, Prices, etc. – at the very bottom. Again, these provide visitors a way to leave the site. You may have to include them because of ad network guidelines, but that doesn’t mean you have to make them prominent.
The lead capture form should dominate the right side of the screen.
Include a big sign up/submit button below the lead capture form.
Everything should “flow” naturally towards the lead capture form. It isn’t cheating if you stick a giant arrow pointing to the submit button.

Based on this, let’s take a look at the world’s ugliest sign up form:

Granted, it won’t win any web designing awards, but it should give you an idea of the barebones structure of any landing page.

Choosing Colors for Your Landing Page

Believe it or not, colors can actually affect your conversion rate. Some colors make you doze off, others literally scream “CLICK ME!”

Follow these guidelines when choosing colors for your landing page:

Use contrasting colors; it makes your copy easier to read. If in doubt, remember that you can never go wrong with black text on white background.
Pick up the basics of color theory. As per this theory, some colors trigger specific psychological reactions. Red, for instance, makes you pumped up (hence the idiom, “seeing red”), while black stands for luxury and sophistication. Yellow makes you perky because you associate it with the sun, while blue is a soothing color because it reminds you of lapping ocean waves and a clear sky.
Use a bold, contrasting color for the sign-up/submit button (arguably the most important element of a landing page). Orange seems to work exceptionally well in this role.

For more ideas and inspiration on using color, check out our list of 35 best web design resources.

Writing Copy for Landing Pages

A stunning landing page with poor copy is like a machine gun that shoots only blanks. Writing copy, of course, is an art (just ask Donald Draper), but there are a few guidelines you must follow in all your landing pages:

Write, then rewrite. The first time, you’re writing to put your own thoughts to paper. The second time, you’re refining it for the actual audience. Or, as Stephen King puts it: “Write with the door closed, rewrite with the door open.”
Keep it Short: Chop off any words that aren’t absolutely necessary.
Keep it Simple: This isn’t the place to bring out the thesaurus. Keep your copy simple and easy to understand.
Spend a lot of time refining the call to action (CTA). This is the first thing visitors will see on the landing page; make sure that it keeps them glued to their seats.
Create several alternative CTAs for testing purposes (see testing section below).
CTAs should be short – anything over 15 words goes straight into the trash can.
Use active voice. “Do it!” is far more effective than “This should be done!”
Humor is always good. Just make sure not to overdo it.
Headlines that begin with “How to…” can be very persuasive.
“Free”, “Secret”, “Quick”, “Discover”, “Fast”, “Proven”, “Results”, “Guarantee” are among the most persuasive words in your arsenal; use them judiciously.
Headlines that are also questions work great. This also gives you a chance to provide the answer in the benefits section.
Appeal to the readers emotions.
Magazine covers are a great way to learn how to write short, crisp copy. Us, People, and Cosmopolitan have this practically down to a science.
Follow the copywriting conventions and voice of your industry; landing page copy for enterprise CRM customers shouldn’t read like copy for a video game manufacturer.

Best Practices for Landing Page Design

Now that you know how to work the UI/UX, copy and colors, let’s consider some more best practices for landing pages:

People are hesitant to give away their private data for free. Give away stuff – an eBook, a phone consultation, a whitepaper, a discount code – to make them feel that they’re getting something in return.

Minimize “page leaks” – that is, links leading to other parts of the site, or worse, an external page.
Your call to action (CTA) should grab all eyeballs. Make sure that it is big, bold, and occupies major screen real estate above the fold.
Directional cues can be used to control how visitors read through the page. Arrows work great in this role, though you can also be more subtle by including a figure looking or pointing towards your target element (usually the lead capture form).
The submit button should tell the visitor what he stands to gain by clicking that button. Make sure it says something like “Get Free eBook” or “Get Free Phone Consultation” instead of a generic “Submit”.
Videos work great. Just make sure not to host them publicly on YouTube – your visitors will most likely leak away as soon as the cat videos load up.
Don’t do too many things on the landing page. Focus entirely on getting the visitor to submit user data.
List out major benefits of your offer. If you’re giving away a free eBook, for instance, include the top three things the visitor stands to gain from the book.
Testimonials from customers work great as social proof.
If you’ve got some major press, add an “As seen in” or “Featured in” section along with publication logos below the benefits.
Three words: ‘Always Be Testing’ (see below).
Use bullet points whenever possible.
Add a phone number along with working hours.
Include a link to your privacy policy or a disclaimer directly above or below the ‘Submit’ button (which you’ve hopefully changed to something more attractive). This reassures users that you aren’t just going to use their private data for nefarious purposes.
Responsive landing page designs can be efficient, but difficult to pull off perfectly. Small screens demand a unique approach to landing page design. If resources permit, skip responsive design and create separate pages for different screen sizes. If you’re unsure what responsive design is, check out this post.

Testing Your Landing Page

You can follow all the above landing page design guidelines and still struggle with poor conversions. This is why you need to keep testing landing pages until you arrive at something satisfactory.

Testing refers to split or A/B testing. In split testing, two different versions of a web page are shown to different users. The page that converts better is used for the final design (or further testing). It’s a lot like taste-testing; different combinations of ‘flavors’ are combined and a roomful of judges (i.e. your users) is asked the flavor that works the best.

There are many variations in testing which are beyond the scope of this tutorial. For the purpose of designing landing pages, you only need to know the following:

Create multiple versions of the same landing page, each with minor variations.
Create landing page ‘recipes’ with different ‘ingredients’. Say, one ‘recipe’ includes a long CTA with short copy, another with short CTA and long copy, and yet another with a video and sign-up form.
Keep on making changes until you come to see an agreeable conversion rate.
Small changes can often lead to big rewards. Changing something as simple as submit button color can increase conversions dramatically. Check out how 37Signals improved its conversions dramatically by making little changes.
Before you launch, make sure that your landing page is working perfectly. Use Amazon Mechanical Turk (MTurk) for user testing, for example, or UserTesting.com.

Coding Your Landing Page Design

You now know the secrets to creating a great looking, high converting landing page. It’s now time to go live with your very own custom coded landing page. This isn’t something everyone is looking to take on by themselves (see our 10 reasons for not coding your own HTML). So, let The Site Slinger help turn that amazing landing page design to code! With our PSD to HTML, PSD to Responsive, and PSD to Bootstrap services, you can create pixel perfect pages in no time. Be sure to try us out for that awesome landing page you just learned to create!

If you have an idea for an app but are unsure where to start, try our tutorial on how to create a web app.

Enjoy 10% Off, from The Site Slinger!

Test promo code

For October 2013 only, enjoy 10% off your PSD to HTML project of 3 pages or more! We offer personal service, fast delivery, and expert code.

Submit your Photoshop designs for a FREE Quote today. Just mention promo code: SLINGERFALL13 on the order form to receive your discount.

Get a Quote Today!

Wireframing Tools, Design Inspiration, and Resources

Wireframing is often the first step in any web design process, where elusive ideas take starting taking a concrete shape. Long before the Photoshop mockups and the actual website, the designer will sit down with her favorite wireframing tool and sketch out different layouts and design ideas. Wireframing can also be a wonderful source of inspiration. Most professional designers swear by wireframing, which means this is one skill you wouldn’t want to go without. Read on for all things wireframe, plus tools and other design resources.

Wireframing is often the first step in any web design process, where elusive ideas take starting taking a concrete shape. Think of a wireframe as a very rough first draft of a novel, or a hastily drawn outline of a new sketch. Long before the Photoshop mockups and the actual website, the designer will sit down with her favorite wireframing tools and sketch out different layouts and design ideas. These will then serve as a ‘map’ guiding the designer throughout the website creation process.

Wireframing can also be a wonderful source of inspiration. Learning from wireframes made by others can help improve your design skills while also giving you new ideas on layouts, UI and UX. Most professional designers swear by wireframing, which means this is one skill you wouldn’t want to go without.

What is Wireframing?

Imagine you have to make a skyscraper. You have all the raw materials you’ll ever need and a construction crew that will work non-stop, without pay. You start off with a lot of enthusiasm but quickly learn that building a skyscraper is a lot more difficult than it sounds. You place blocks in the wrong place, struggle with interior design and misplace the elevator shaft. As you sit on the crumbling rubble of your failed skyscraper, you wonder, “if only I had a blueprint to guide me”.

This is exactly what wireframing is: it is a blueprint that helps you build your own skyscraper website. Just like you need a blueprint to construct any building more complex than four walls and a roof, you also need a wireframe to build larger, more complicated websites.

Website wireframes don’t include any real copy or graphical elements – just like a blueprint. Instead, wireframes are usually made up of placeholder elements that describe the basic structure and layout of a website.

How to Create Wireframes

Wireframing is like sketching; there is no prescribed method for doing it. Some like to create freehand drawings, some like to use professional wireframing software, while some others are happy to cobble things together in Photoshop. Some of the most popular methods of creating wireframes are:

Freehand Sketching: Despite the ubiquity of software tools, drawing wireframes by hand still remains one of the most popular methods. It’s easy to see why: it’s fast, quick, cheap, and creating a new ‘canvas’ is as easy as turning over a page. One disadvantage, however, is that hand drawn wireframes can’t be shared easily. This is why most designers like to start off drawing wireframes by hand before moving onto digital wireframes that are easier to edit and share.
Dedicated Wireframing Software: Designers have a number of options to choose from when it comes to wireframing software (which we will cover below). These may be free or paid, cloud or desktop based. The wireframes thus created are easy to share, edit, and annotate – must have features when working with large teams and demanding clients.
Image Editing Tools: Some designers eschew professional wireframing tools in favor of image editing tools like GIMP, Photoshop, or even MS Paint. The only perceptible advantage to using such tools is that they cost nothing extra (i.e. if you’ve purchased the software already), whereas dedicated wireframing tools can cost several dollars a month.

The Four Step Wireframing Process

For professional web designers, creating wireframes is usually a four step process:

The Brief: Before you can put the (metaphorical) pen to paper, you must first understand what your client really wants. The first step, therefore, is a client interview where you try and learn the client’s requirements. Ask direct, pertinent questions – “Do you want an image slider on the homepage? What navigation elements will you need?, etc.” – but also consider conceptual questions such as the client’s expectations from the website (drive traffic, inform audience) and its purpose (showcasing products, selling, generating leads). This will help you immensely during wireframing and the actual website building process.
The Rough Sketch: In step two, you’ll create rough sketches, usually by hand, of the website. Grab a notebook and a pen and start cranking out prospective website layouts. Use popular websites as an inspiration and the client brief as the roadmap. Ideally, you should have several different website layouts up and ready for the next stage. Don’t be afraid to use different colors in your sketches to denote different sections.
The Final Wireframe: Step three is where you turn your rough sketches into something more concrete. Use your dedicated wireframing tools to create the final version of the website layout and structure. Make sure that it can be easily shared and annotated.
Feedback and Reiteration: In the final step, you’ll share your wireframe with your client and gather feedback. You may have to alter the wireframe, depending on the client’s feedback. This is where a professional wireframing tool comes real handy as it can not only capture notes and comments, but can only be edited to easily accommodate the client’s requests.

The process is slightly different for creating web apps, as there is much heavier focus on UX and UI. Refer to our previous post on launching a web app for more information.

Once the wireframing process is complete, you can start creating the first mockup in Photoshop. After the client’s approval, you can turn the mockup into an actual, live website using HTML and CSS. Some wireframing tools also have the capability to create dynamic, interactive HTML webpages from simple wireframes.

Getting Inspired

With wireframing, as with much of web design, you must stand on the shoulders of giants to create something new and extraordinary. Gathering wireframing ideas from top web designers is an essential part of the learning process and can help you to:

Kickstart the Visualization Process: Creating functional, yet attractive wireframes is essentially an exercise in visualization – to imagine how the eventual website might look from its flimsy, monochromatic, wireframe origins. And the best way to kickstart this process is to observe and learn from fellow web designers. Take a peak at our resources list below to get inspired now!
Understand UI and UX: UI (User Interface) and UX (User Experience) are the two most misunderstood concepts in web design. What might be pleasing to the eye might not necessarily be functional, and vice versa. Great designers seem to strike a balance between designs that are aesthetically pleasing but still navigable – a fact reflected in their wireframes.
Understand Conversion Flow: Websites aren’t merely beautiful placeholders for contact information; they are also meant to generate leads and make sales. By picking apart others wireframes, you can understand the conversion process and incorporate it into your designs – a must have skill for any modern web designer.
Keep Up With Trends: Web design trends change almost as often as winter fashion. Sure, there are a few layouts that’ll always remain popular – like a 2-column, justified webpage – but new trends emerge almost on a monthly basis. Parallax scrolling and jQuery sliders, for instance, are the two most popular trends currently. Another new buzzword is ‘responsive design’ (learn about it here). By observing others’ wireframes, you can stay abreast of the latest trends and incorporate them into your designs. Our previous post on 7 pro-tips for web design should serve as a good reference.
Learn Best Practices: There’s a reason a few layouts tend to dominate the web design marketplace – they simply work. Understanding best web design practices will go a long way in helping you create functional, beautiful websites. After all, as the Dalai Lama said, “Know the rules well, so you can break them effectively”.

“But”, you ask, “how do I find and learn from other designers?”

The answer, as we’ll learn below, is rather simple:

Break it Down: When you find a new, interesting website (online inspiration/CSS galleries are full of them – check out our ‘resources’ section for more information), try to understand how every element works structurally. Where is the navigation bar located? How far is it from the main website logo? Are there any sing-up forms in the navigation bar? Does the website include a static header or a dynamic image slider on the home page? How “busy” is the primary content section? How does the footer design differ from the overall layout?
Asking questions like these will be help you build a stronger understanding of the web design concepts outlined above.
Sketch it Out: The best way to learn anything is by actually doing it. When you see a great website design, sketch the layout on a piece of paper. See how all the elements stack up. You can also port this design to wireframing software to play around with it further.
Make it Live: To truly understand how great designs work, take your wireframe and turn it into a mockup. Feel free to copy actual design elements – logo, images, graphics, etc. – from the original design since you’ll be using this only for learning purposes. Try to understand how the wireframe turns into a full-fledged, functional website with the addition of various design elements. This will help you a great deal in turning your wireframes into actual websites. You can even try coding it to HTML, though that isn’t generally a good idea (learn why in this blog post).

These tips apply to not just websites, but web/mobile apps and email newsletters as well. In fact, designing email newsletters poses an altogether new design challenge, as our previous post on 10 tips for designing HTML emails notes.

Tools

Designers are spoiled for choice when it comes to picking wireframing tools. There are dozens of tools in the market, some online, some desktop-based, some free, and some paid. We’ll take a look at some of the most popular tools below:

1. Balsamiq Mockups: Long held as the gold-standard in wireframing, Balsamiq is immensely popular with web designers and comes in both desktop and web-based avatars. Although it is packed with features, including many plugins, it does cost a pretty penny – $79 for the desktop version, and web-based plans starting at $12/month.

2. Pidoco: Pidoco is a web-based wireframing tool that’s quickly rising up the popularity charts. It boasts an extensive library of drag-and-drop web elements. Finished wireframes can be easily shared with clients, who can also leave notes and comments on the designs. Prices start at $9/month for a basic package.

3. Visio: Visio, a part of the Microsoft Office family, is more than just a wireframing tool – it is a complete diagramming software that allows anyone to create powerful, data-linked diagrams and flowcharts. Of course, it can be used for wireframing as well, though the interface does get a bit clunky, especially for large, more complicated websites. Prices start at $599, making it a poor choice for most web designers.

4. Axure: More than a simple wireframing tool, Axure is a powerful mockup software that helps you turn your wireframes into interactive, HTML websites. It is available for both Mac and Windows with prices starting at $289.

5. Adobe InDesign: InDesign, as you might be familiar, is Adobe’s flagship desktop publishing software. While the software is primarily used for creating magazine/book layouts, it can also be used for creating wireframes. But with limited functionality, you’re better off using a dedicated wireframing tool, especially considering the price.

6. iPlotz: iPlotz is a simple, web-based mockup tool with drag-and-drop functionality. Although somewhat limited in features, it’s a great tool for creating wireframes on the fly. You can also leave notes and discuss design elements with other team members. iPlotz offers a free version, though you might want to at least get the single-user license ($15/month).

7. PencilProject: For a free, open-source alternative, look no further than PencilProject. Available for both Mac and Windows, PeincilProject is feature rich, powerful, and most importantly, completely free!

8. OmniGraffle: OmniGraffle started out as a Mac favorite before making the transition to the iPad. It’s a great looking, feature-rich wireframing tool priced at $49.99 that’ll help you create website prototypes, conversion flow charts, sign-up process charts, etc. The only downside is that it’s not available for Windows.

9. MockFlow: MockFlow is a web-based wireframing tool you can try for free online. Besides the familiar drag-and-drop model, it also supports extensive collaborating capabilities, making it a great choice for larger teams.

10. Adobe Photoshop: Last, but not the least, is Adobe Photoshop. Every designer worth his salt is already familiar with the software. Which is why it works quite well as a wireframing tool (although larger websites can get a bit cumbersome). On the price side, however, Photoshop doesn’t exactly come cheap.

Resources

Want some inspiration and help in creating wireframes? Check out our list of helpful websites and resources below:

Phew! That’s it for our guide to wireframing. Check this space for more tutorials, tips and advice on web design, development and wireframing in the future!

Photo credit (top): Mike Rohde / Foter / CC BY-NC-ND

Bootstrap 3 Released!

The long awaited update to the premier responsive framework has arrived! On August 19th, the folks behind Twitter Bootstrap took the latest version out of beta and announced the release of Bootstrap 3, coinciding with the two-year anniversary of the original release. Here’s a few things about the release worth calling out.

The long awaited update to the premier responsive framework has arrived! On August 19th, the folks behind Twitter Bootstrap took the latest version out of beta and announced the release of Bootstrap 3, coinciding with the two-year anniversary of the original release.

Here at The Site Slinger, we’ve received many inquiries about Bootstrap 3 and have been waiting to get our hands on the latest, stable version. We’re excited to code up more responsive websites using the new Bootstrap, with all of its great improvements! Submit your PSD to Bootstrap 3 project today!

Here’s a few updates in the release worth calling out

Mobile first and always responsive! Nearly everything has been redesigned and rebuilt to start from your handheld devices and scale up. With Bootstrap 3 we’ve gone deep on responsive and mobile first—it’s built in and no longer requires a separate stylesheet. That’s great for most folks, but not everyone needs or wants an adaptive web site or application. To help, we’ve added some documentation and an example that disables the adaptive or responsive features with some extra CSS. Check out the Disabling responsiveness section or head right to the non-responsive example to learn more.

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

Super-powered grid system. With four tiers of grid classes—phones, tablets, desktops, and large desktops—you can do some super crazy awesome layouts.

New Glyphicons icon font! While they were gone for a while, we’ve since restored the Glyphicons to the main repo. In 2.x, they were images, but now they’re in font format and include 40 new glyphs.

Overhauled navbar. It’s now always responsive and comes with some super handy and re-arrangable subcomponents.

Modals are way more responsive. We’ve overhauled the modal code to make it way more responsive on mobile devices

Dropped Internet Explorer 7 and Firefox 3.6 support. For Internet Explorer 8, you’ll need to include Respond.js for all the media queries to work correctly. You can read more about browser support in the docs.
Source: Official Bootstrap Blog 

You can read the official Bootstrap blog post about the release, complete with a celebratory Montell Jordan – “This is How We Do It” music video — AWESOME!

In case you’re wondering what the heck Bootstrap even is…

Twitter Bootstrap was created by a couple of guys at Twitter to maintain consistency across many internal tools. In public form, it’s a free, yet powerful framework for front-end development of websites and web applications. It uses HTML and CSS-based layout templates for typography, and interface components like forms, buttons and navigation elements. The key is that it’s a highly flexible framework built for the new era of responsive web design. Learn more about our PSD to Bootstrap conversion process here.

Have questions or a design ready for us to review? Submit your Bootstrap 3 projects today!

The Site Slinger Affiliate Program

Join The Site Slinger Affiliate program today! We’re looking for the best affiliates to work with, ask about the program today.

Affiliate Login | Join Now!

The Site Slinger Affiliate Program

Amazing Payouts.

How it works:

30% of sale, average is $200!
Large orders from businesses generate thousands of dollars in payouts!
Commissions are paid monthly.

Biggest Payouts!

We crush other affiliate programs with our minimum payouts! The Site Slinger is the only PSD to HTML company that makes building custom websites easy. Send us your Photoshop designs and we return HTML code in 5 business days or less. You can use this code to create custom websites, WordPress themes, web apps, enterprise software or whatever else you can think of.

Click to Join.

First-Class Affiliate Network

We use the most feature-rich affiliate management network available, ShareaSale! When you join our program and login, you’ll be presented with an easy-to-use interface to view your reports, and choose your links and banners.

ShareaSale also gives us the ability to easily improve the affiliate program for you as standards change, so if something isn’t working we can fix it. Their support for affiliate payments and advanced features means we can focus on making our offer convert better for you!

High Quality Tested Banners!

Our creative has been tested, retested, tested again! We continually design and test our display ads against each other to see what performs the best so you don’t have to. Of course, you can use your own banners too if you’d like!

Interested in becoming an affiliate?

Click Here to Join Now!

Have questions or feedback?

Contact our affiliate manager.

Top 35 Free Web Design Resources

We love working with designers, and we know that you never can have enough free web design resources. Today we’re sharing a list of 35 of the best resources on the web for design freebies. Whether you’re looking for “plug and play” visual content, a beautiful new font, or some design inspiration, you’re bound to find a new favorite web design resource on our list.

Here at The Site Slinger, we help talented web designers like you turn your gorgeous concepts and layouts into fully functional websites. This gives you more time to do the work you’re best at – web design, of course! – by handling the coding for you.

We love working with web designers, and we know that you can never have enough free web design resources. Today we’re sharing a list of 35 of the best resources on the web for design freebies. Whether you’re looking for “plug and play” visual content, a beautiful new font, or some design inspiration, you’re bound to find new favorite free web design resources on our list.

Inspiration

Let’s face it – even the most talented among us get creatively stuck from time to time. So when it comes to sources of quick visual stimulation and idea generation, the more you know about, the better. Here are seven of our favorites.

Designspiration is a visual smorgasbord of high-quality designs. There’s an awesome little search-by-color feature worth trying out, too.
Pinterest Design Board is a nearly endless source of inspiration. This is the Design-specific board which is especially helpful.
COLOURLovers Web Color Trends presents the hottest new hues and color palettes in web design.
WebDesign Inspiration is a collection of beautiful web designs from around the world. Search by industry, type, style, color, and more.
The Best Designs gallery displays the best of designer-submitted websites.
Style Inspiration features a large database of attractive and innovative web designs. A new site is published to the database every single day.
We Love Typography is an excellent source of typographic inspiration.

Stock Photography

Choosing quality stock photos can make your designs come alive – but you already knew that, didn’t you? Make sure you get to know these six places to find great free images.

CompFight is a fast, easy way to search the Flickr image pool. The user-friendly interface clearly presents each image’s license agreement, available sizes, and a ready-mage HTML photo credit that you can copy and paste right into your site code.
Unsplash offers beautiful photos, free for use without restrictions. The site’s slogan is “10 new photos every 10 days.”
Foter makes it easy for you to search for, manage, and add photos to your online projects. The site includes useful search options for commercial and non-commercial use.
FreeStockPhotos.biz has a collection of free stock photography with more than 16,700 images from a range of sources.
stock.xchng is a free membership site with a gallery of close to 400,000 stock photos.
The U.S. Government Photos and Images database includes photos that are in the public domain or U.S. government works and may be used without permission or fee.

BONUS! Wikimedia Commons is a resource I came across recently (so I’ve updated this list!). An easily searchable database with familiar Wikipedia-esque format, you’ll find this site to be valuable, with its use of categories and filters for free images.

BONUS #2! Getty Images (yes, Getty) recently opened up the majority of their collection in exchange for an open-embed program that lets users drop in any image, and they get to append a byline at the bottom of the picture with a credit and link to the licensing page. A great, and somewhat surprising, alternative to the usual free stock house options!

PSD Elements, Icons, & Vectors

Sometimes you just don’t have time to create every visual element from scratch – and really, you shouldn’t have to. These five sources for non-photo design assets will help you when you’re short on time.

Web Designer Depot’s freebies section offers a variety of free visual elements. It’s a great site to bookmark and check from time to time.
Pixels Daily hosts a collection of free (via Creative Commons attribution license) and commercial (available for purchase through the Envato marketplace) design resources.
365psd makes a new, free PSD available for download every day.
Premium Pixels is a collection of free design resources curated by UK-based web designer Orman Clark.
psdGraphics is a graphic design library featuring fully editable Photoshop PSD files and high resolution graphics including abstract backgrounds, textures and patterns, and icons.

Fonts

They say “design is 95% typography!” Fonts can completely change the overall impression of your website. They can also be really expensive! That makes free fonts practically invaluable as design assets. Here are four places where you can stock up.

Font Squirrel features hand-picked fonts that are 100% free for commercial use. The site also includes a webfont generator.
Google Fonts has a collection of more than 600 open source fonts made specifically for the web.
Creative Bloq recently shared a curated collection of 110 free fonts.
FontSpace has great search matching – try ‘vintage’ or ‘retro’, for example – and a pleasing displayof their 21,000+ free fonts.

Video Tutorials

No matter how top-notch your design skills are, there’s always more to learn. Here are three of the best free tutorial resources to learn web design, particularly through videos.

TutVid offers a large database of Photoshop tutorials created by designer and photographer Nathanial Dodson.
Nettuts+ is dedicated to tutorials, videos, and articles on web design and development.
Team Treehouse’s Become a Web Designer Library allows you to watch, but not download, some videos for free.

Social Networks

Social networks are a fantastic place for web designers to meet new colleagues and potential clients, share work and get feedback, and learn about the latest design trends. Some social media platforms, however, can be a waste of time for designers. These four social networks will bring you the best return on your time investment.

Dribbble is a community of designers sharing screenshots of their work, process, and projects. It’s kind of like Twitter, but full of gifted artists and a lot nicer to look at.
Behance is a public portfolio site for designers, illustrators, and other creative professionals.
Twitter is a real-time information network that can connect designers and potential clients. Share/read interesting and relevant stories, ideas, images and news. Find, follow, and engage with your peers using this powerful micro-blog platform.
Google+ offers a Communities feature that helps you find groups of people who love web design, web development, etc… as much as you do.

Blogs

We know you spend the majority of your time doing actual design work, but it’s also important to stay on top of the latest news in the design industry. You can’t beat blogs for the latest in free design news, information, and links to other excellent resources. Here are six to check out.

Smashing Magazine’s mission is to educate readers on the latest trends and techniques in web design and development.
Hey, Designer! curates and shares resources for web designers and developers that you won’t see everywhere else.
Alltop Web Design aggregates the latest posts from popular web design sites around the web, including A List Apart, Logo Design Love, and Design Shack.
Blog.SpoonGraphics shares design tutorials, articles, and downloadable free resources.
Awwwards is both a web design blog and an opportunity for talented designers to submit their websites for recognition as Site of the Day, Site of the Month, and Site of the Year.
Hongkiat is focused on sharing tools, freebies, and articles that designers and bloggers want to read. Many articles from the site have been picked up by bigger platforms including Lifehacker and Gizmodo.

And last but most definitely not least, we share freebies, tutorials, and advice here on The Site Slinger blog and on our Facebook, Twitter, and Google+ profiles. Come join us – we’d love to talk web design and development with you.

Your Turn!

What do you think of our list? What did we miss? Contact us to let us know, or ask us about how we can help you turn your designs into code.

Additional Freebies

Check out these other lists of free web design resources we’ve shared on our blog!