Design to Code Archives - The Site Slinger

Converting PSD to WordPress and Joomla Templates in 4 Easy Steps

The most popular systems on the modern web are Wordpress and Joomla, since they are the most versatile – with these CMS at hand you can easily create a blog with expandable menu, galleries, sliding images and other interactive elements. No expert knowledge is required either.

Yet, you need to add personal traits to your project to make it popular.

Creating a modern website is a project that involves generations of unique ideas and requires the author to handle large amounts of information. It is rather typical to opt for CMS use to save time and cut the amount of work overall. Content management software allows you to get your blog up fast and easy, and more importantly, no special expertise is required to perform basic operations. The most popular systems on the modern web are WordPress and Joomla, since they are the most versatile – with these CMS at hand you can easily create a blog with expandable menu, galleries, sliding images and other interactive elements. No expert knowledge is required either.

Yet, you need to add personal traits to your project to make it popular. No one is falling for another typical website, so it’s up to you to create a stunning design for your project. Once you have your ideas ‘on paper’ (or rather, in a PSD file), it’s time to convert the image to a fully-functional website.

What’s the difference between Joomla! and WordPress?

The main difference between WordPress and Joomla! content management software lies in the way they operate templates. WordPress pages are composed from a number of blocks: every single element is stored separately and used in a particular case. Once you make a change to an element (for instance, you alter background image for a menu) it takes effect immediately everywhere it is used.

Such ‘modular’ systems allow for faster work with complex projects. You create a set of components and assemble them at your wish.

Joomla, however, uses a different approach and handles every page as a separate set of components. This means that if you plan to use an identical item on every page (for instance, a navigation menu), you’ll have to add a separate menu to each one. If you change this component on a page, changes won’t affect the other parts of your website.

Every template should contain all the necessary code to make proper use of every single module type – authentication, navigation, text, images, video etc.

How do I convert a design project to a functional CMS template?

Working with CMS means you get to work with a product provided ‘as is’ by developers. Of course, there are advantages – you don’t need to hire a programmer to create frames for you, yet there is a drawback; you have to adhere to certain rules. Standard systems can be altered, but it takes time and certain web development skills; you would generally want to use a content-management system to save time and effort.

Converting a PSD project to a fully functional CMS template takes several steps:

1. Analyze your project. Split it into parts (separate pages and items – menu, text blocks, galleries etc.) and see which of them can be implemented by means of CMS systems. Generally, a WordPress or Joomla! website contains a header, menu, main block and footer. It is generally a good idea to stick with these modules to make further work easier.

2. Cut the PSD image into elements – buttons, triggers, decorations. Group up separate components – CMS will generally require you to place images in certain folders for the system to access it properly. For now, you have to handle components as separate parts (that are none-the-less tightly connected) and make them interactive.

3. Make every element work with the CMS of your choice. Assign each components its place on the page, qualities, set up the way it works (when it is shown, how it reacts to clicks and interacts with the user).

4. Run your website and enjoy the results of your work! You might have to check your code to get rid of unnecessary elements (some of them are implemented in the CMS, but you might never use them) to optimize memory and connection usage.

Keep in that you will be using classes to make your components work. Classes are basically unit types with a range of properties and functions – if you want to create a brand new item type, it should be compatible with the existing system. This is one of the limits set by CMS systems.

Is it worth using automated PSD to WordPress/Joomla converters?

There are a number of sites on the web that offer to convert your PSD file to a CMS template automatically. This option is certainly attractive if you are on a low budget, but it will ruin the whole project.

The process might be fast, but the result will leave you wanting more. Automated algorithms work with every project by a standard scheme. This results in a lot of non-optimized code with unnecessary components. Websites created by an automated system run slowly and lack functionality.

If you want an optimized website that runs fast and stable, you will want conversion to be done manually. It is a type of work that requires skill and knowledge; it’s best to let professional web developers to handle the project.

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.

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

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!

What is a PSD? The First Step to Web Design

As the top service for PSD to HTML on the Web, we throw around the term ‘PSD’ quite a bit. We’ve answered the question ‘What is PSD to HTML?‘ and provided a list of definitions of common web development terms, but now we break it down even further.

What is a PSD?

Simply put, a PSD is a Photoshop design file. Technically, it stands for Photoshop Document, which is a proprietary file type from Adobe. Adobe’s Photoshop is the software most widely used for web design and works best for the design-to-code process.

PSD files are typically opened and edited with Adobe Photoshop, but can be opened with Adobe Photoshop Elements, and even certain non-Adobe products such as Corel’s PaintShop Pro and GIMP. However, programs other than Photoshop will not be able to fully edit or even read the complex layers utilized in many PSD files. Other advanced features within a PSD design may not be properly recognized, either. We highly recommend working with Photoshop from the beginning to ensure it will be universally accessible by designers and developers who may be involved with your project.

If you’re interested in a free program to simply view PSD files as flat images (no layers), Apple’s QuickTime, which includes Picture Viewer, will do the trick, but you can’t use the program to edit a PSD file. It is purely for viewing PSD files as images.

How Can I Create a Website with a PSD?

PSD files can be “sliced” and turned into HTML code by a proficient web developer. PSD to HTML services, such as The Site Slinger, specialize in just this. We take the PSD files and hand back HTML/CSS markup that’s ready for implementation as a live site.

Sometimes other file types are used by designers. While we may be able to work with PNG, IDD, or AI file types, we highly recommend PSD files. Working form other file types can require the added step of converting designs to a PSD file.

A “good” PSD is layered, and well organized using folders and layer comps to show different pages and states. Be sure to design all animation states, and button states (click, hover, off). Read more of our web design tips and check out the other resources below. In the end, we take your design and turn it into code, producing a website that matches your design pixel-perfect.

Technical Stuff

The PSD file type supports all image modes (Bitmap, Grayscale, Duotone, Indexed Color, RGB, CMYK, Lab, and Multichannel), which is part of the reason it is so widely used. It also supports clipping paths, channels, transparency information, and multi-level layers while other formats merely present ‘flat’ images.

The PSD file type preserves a design as layered images which is extremely useful for future editing (and re-editing) of different parts of a design. Each layer can be worked on individually, without affecting the rest of the elements in a design. You can also use a feature called ‘layer comps‘ to present variations of the same design. Photoshop can convert PSD files to other formats, such as PNG, JPG etc… so you can export a design for a wide variety of uses, like web graphics.

It’s also interesting to note that Photoshop files sometimes have the extension .PSB, which stands for “Photoshop Big”. According to Adobe, “The Large Document Format (PSB) supports documents up to 300,000 pixels in any dimension. All Photoshop features, such as layers, effects, and filters, are supported. You can save high dynamic range, 32‑bits-per-channel images as PSB files. Currently, if you save a document in PSB format, it can be opened only in Photoshop CS or later.”

You can read tons more about Adobe Photoshop File Formats Specification, if you want to delve further into the technical aspects of the PSD file type.

And here are some helpful tips and tricks on how to slice a PSD file efficiently if you want to try your hand.

Alternatives to PSD in Website Design

Sketch

Sketch is a vector-based design tool that is gaining popularity among web designers. It is available only on macOS and is designed specifically for web and app design. Sketch offers a range of features that make it easier to make responsive designs and then convert those into pixel-perfect HTML markups.

Pros:

Sketch is designed specifically for web and app design, so it offers features that are tailored to these types of projects.
Sketch’s vector-based design allows for easy scaling of images without loss of quality.
It offers a large library of plugins and add-ons that can streamline the design process.

Cons:

Sketch is only available on macOS, which can limit its accessibility to some designers.
It does not have the same level of support as Photoshop, so finding resources and tutorials may be more difficult.
Sketch has a steeper learning curve than some other design tools, which may make it less suitable for beginners.

Adobe XD

Adobe XD is a vector-based design tool that is available for both macOS and Windows. It is designed specifically for web and app design and allows designers to create wireframes, prototypes, and finished designs all in the same tool.

Pros:

Adobe XD is available on both macOS and Windows, making it more accessible to designers.
It allows for easy sharing and collaboration with other designers and developers.
Adobe XD’s vector-based design allows for easy scaling of images without loss of quality.

Cons:

It has a steeper learning curve than some other design tools, which may make it less suitable for beginners.
Some users report performance issues with larger design files.
It has fewer features and capabilities than Adobe Photoshop, which may limit its usefulness for some projects.

Figma

Figma is a web-based design tool that allows designers to create, share, and collaborate on designs in real-time. It is specifically designed for web and app design and offers a range of features that make it easier to design for responsive web design and UI design.

Pros:

Figma is a web-based tool, so it is accessible from any computer with an internet connection.
It offers a range of collaboration and sharing features that make it easy to work with other designers and developers.
Figma’s vector-based design allows for easy scaling of images without loss of quality.

Cons:

Figma requires an internet connection to use, which can be limiting for some designers.
It has a steeper learning curve than some other design tools, which may make it less suitable for beginners.
It has fewer features and capabilities than Adobe Photoshop, which may limit its usefulness for some projects.

Searching for a super fast PSD to HTML conversion service? You are in the right place. The Site Slinger experts will turn your design into a stunning, responsive, pixel-perfect HTML template in just a few hours.

Get in touch with us, tell us about your project, and get delivered a perfectly coded template whenever you need it.

Resources

Read further for tips and how-to’s for web design.

This is How to Launch Your First Web App

Building your own web application is a complicated, challenging and exciting process. It requires mastering a number of skills, from design to development. Fortunately, with the tools available today, starting a website is both easy and fun. Let’s take a look at how to launch a web app.

If you work on the web, you know that the launch of a new web application is a complicated, challenging and exciting process. Every day we see new projects come to life during the first steps in the development process, when you turn your photoshop comps into live HTML code. Getting the application into a workable (and marketable) product from there requires mastering a number of skills.

Let’s take a look at how to launch a web app, website or what-ever-you-are-building.

Website UI and Design

The days of blinking scrolls and clumsy tiled backgrounds are (thankfully) well past us. Spoiled by design-centric startups like Airbnb and Fab.com, users have come not just to expect, but demand good design. Design is also one of the quickest ways to set yourself apart from your competitors. It is, after all, the first thing users see on your site.

Thankfully, good design isn’t terribly expensive. You can even create simple webpage mockups by yourself if you follow some basic design principles, such as:

1. Sketching: Before you create a single pixel in Photoshop, spend some time sketching the basic vision of your web app on paper. This doesn’t have to be terribly complicated; you can draw out anything you want as long as it has some design coherence. This sketch should serve as a very rough map of what your final design might look like. Don’t be afraid to create several sketches until you reach a more concrete vision.

2. Wireframing: A wireframe represents an ‘X-Ray’ of your website. This is a rough schematic diagram showing the various components on any page. This wireframe can be as simple as a sheet of paper with different boxes denoting Header, Navigation Menu, Content and Footer. Ideally, wireframing and sketching should be done together. You can do this by hand, or use a tool like Photoshop.

3. Creating a Mockup: The third step is to create a mockup of your final design using the sketches and wireframing as a guide. Mockups can be created in Photoshop, or you can use design tools like Mockingbird or Balsamiq to create designs quickly. The mockup will reflect your final design, so take some time to flesh it out completely before moving on to the next step. There are a few things to keep in mind when creating a mockup:

Adopt a Theme: “Theme” is a very broad term that describes your website’s overall ‘mood’ or ‘feel’. Fab.com, is urbane and modern with a hint of hipster flourish, while Apple.com is clean and minimalist with a distinctly hi-tech vibe. Before you create a mockup, think about your site’s overall theme. Ask yourself: what do I want my users to feel when they visit this site?
Use Color Appropriately: Color can liven up a dull page, make an element stand out and even help you sell more. Color trends keep on changing every year. While web 2.0 was all about brash frivolity, startups are using more muted colors today. Here’s a quick recap of the dominant color trends in the past year, and what to expect in the near future.
Color also has an effect on how users respond to your web app. Different colors trigger different responses. Bright yellow, for instance, draws viewers’ attention to a particular element. Orange, on the other hand, is great for call-to-action buttons (such as ‘Add to Cart’). Here’s good chart explaining different colors and how to use them effectively in your web app.
Keep Up with Trends: Web design trends change faster than the fashion in Paris. If you surf a lot, you can spot these trends as new startups push the boundaries of what is considered ‘good’ web design. Infinite scrolling and fixed headers, for instance, are among the latest new trends. You can find more specific trends for 2013 on Hongkiat.com.
Keep an Eye on Performance: While you’re bringing your grand design vision to life, also keep an eye on performance. Large pictures and heavy graphic use can bring down the performance, frustrating customers and even costing you a few positions in search engine rankings. It’s a good practice to keep file sizes as small as possible, and limit the amount of images you use on your web app.

Now that you’re on your way to finishing your web design, let’s look at another crucial usability component: UX.

UX – User Experience

User Experience or UX refers to how people interact with your web app. This is a very broad field that covers everything from usability to conversion rates. As you can imagine, UX requires years of expertise and experience to master. You can hire a UX consultant like Theresa Neil, or tinker around on your own by following some basic UX principles:

1. K.I.S.S.: When it comes to UX, you can’t go too wrong following Apple’s UX dictum – Keep it Simple Stupid! Don’t use two elements where one can suffice, limit the number of choices for the customer, and ensure that your app can be used by even the most tech illiterate of users.

2. Big Words ≠ Big Returns: It’s common for new startups to wax poetic about the features and benefits of their web app, all at the expense of the customer. Keep the text on your web site as limited as possible (except on the blog, about-us page, etc.). Wherever possible, communicate through pictures and videos instead of text.

3. Focus on Numbers: The great thing about UX is that you get access to a ton of data to base your decisions on. Analytics tools like Google Analytics and KISSMetrics can help you track how little changes affect the overall user experience. A startup that focuses on performance metrics will almost always outperform one that adopts a ‘see what sticks’ approach.

4. Get Feedback: Getting subjective feedback on your web app is as important as focusing on performance data. Websites like UserTesting.com can give you a great overview of how visitors use your sites and what you can do to improve the overall user experience.

5. UX is an Ongoing Process: There is never a time when you can’t focus on UX. UX is a constant, endless process. You should constantly try to improve the user experience, no matter how great your conversion rates are, or how happy the users may seem.

Testing

Testing is the process of measuring the effectiveness of your web app. This is where the rubber meets the road. It’s a hard, gritty process that most startups fail to master. Essentially, it involves creating multiple variations of the same page and measuring their performance against each other. This is a purely statistical exercise and can be done by anyone by following a few simple tips:

1. A/B Testing: A/B testing, also called ‘split testing’, is used to measure the performance of two variants (labeled A and B) of the same page. Different versions of a page are shown to different users randomly. You can then calculate how each page performed viz-a-viz the other, and select the right page accordingly.

2. Small Changes Can Equal Big Rewards: You don’t always have to make sweeping changes to see dramatic improvements in conversion rates. Sometimes, the simplest of changes such as using different colored buttons and links can equal big rewards. Try out these simple changes before overhauling the existing design completely, and be open to learning from the mistakes of others.

Universal Accessibility

Have you ever tried to use one of your favorite websites on a smartphone or tablet and found the experience completely disappointing? In this ‘Age of Many Screens’, it is important to optimize not just for desktops and laptops, but also smartphones and tablets. Basically, everyone, regardless of screen size or device type, should be able to access your web app.

One way to go about this is by using ‘Responsive Design’. A web app with responsive design automatically changes to fit different screen types. It can expand to fill all the space on a 27” monitor, and squeeze down to fit on a 4” smartphone screen without any loss in usability. The Site Slinger specializes in creating responsive designs that look great on any screen.

While you’re creating responsive designs for your web app, also make sure that you create corresponding designs for your email marketing campaigns. The Site Slinger can code responsive email templates, as well.

Development

Development is where all the planning and design finally pays off and your vision comes to life. It is often the hardest step in the entire app creation process, depending on who you ask. If you have prior coding experience, development can be a relatively straightforward experience, especially for simple web apps. Otherwise, you should be prepared to pay through your nose for a top notch custom developer to take your design live.

Hiring developers is an expensive process wrought with trial and error. Quality freelancers are not only expensive, but also extremely hard to find. You should expect to go through a number of developers before you find someone who fits your requirements.

An easier (and cheaper) alternative is to hire a PSD to HTML service like The Site Slinger. The Site Slinger specializes in turning PSD design files into actual live sites. We have years of experience working with startups and takes care of all the frontend development work so you can focus on what’s really important – sales, traffic and customers.

The Site Slinger converts designs into code for companies, including startups like WPEngine, Capital Factory, OwnLocal, and more. Our PSD to HTML team hand-codes a full Photoshop design into HTML5, CSS3 and all basic JavaScript animations, which is perfect for an app prototype or marketing site. We also have an amazing custom development team ready for all of your WordPress or web development requests. It’s a far smoother process than hiring (and firing) dozens of overpriced freelancers.

Conclusion

Building your first web app isn’t easy. You will have to do everything from creating the mockups to optimizing for better conversion rates. With a little help, however, you can go from prototype to live in a few short weeks and set your web app dreams in motion.