Category Archives: Web Design

Best Tips for Improving Your Web Design

Want to ensure that visitors will exit your website almost immediately after landing there? Be sure to make it difficult for them to find what it is they are looking for. Want to get people to stay on your website longer and click on or buy stuff? Follow these 13 Web design tips.

Web design
1. Have a polished, professional logo–and link it to your home page. “Your logo is an important part of your brand, so make sure it’s located prominently on your site,” says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. “Use a high-resolution image and feature it in the upper left corner of each of your pages,” she advises. “Also, it’s a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it.”

2.Use intuitive navigation. “Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site,” says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide “secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar.”

Why is intuitive navigation so important? “Confusing navigation layouts will result in people quitting a page rather than trying to figure it out,” Gatti says. So instead of putting links to less important pages–that detract from your call to action or primary information–at the top of your home or landing pages, put “less important links or pieces of information at the bottom of a page in the footer.”

3. Get rid of clutter. “It’s very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options,” explains Paolo Vidali, senior digital marketing strategist, DragonSearch, a digital marketing agency.

To keep visitors on your site, “make sure pages do not have competing calls to action or visual clutter [e.g., lots of graphics, photographs or animated gifs] that would draw the visitor’s eyes away from the most important part of the page.” To further keep clutter down on landing pages, “consider limiting the links and options in the header and footer to narrow the foc

Tips Build a Mobile Website

As of November 2011, 91.4 million people in the United States owned smartphones, according to comScore. That was an 8 percent increase over just a few months before. And if the trend continues, as most analysts and smartphone vendors believe it will, the number of individuals in the United States with a smartphone will be close to, if not exceed, 100 million by March 2012 — that’s nearly one out of three Americans. And that’s not including the number of people using iPads and tablet PCs, which was well over 15 million as of June 2011, per CTIA, the Wireless Association.

Who are these people and what are they doing with these mobile devices? They are your customers, your employees and your partners — and more than 40 percent of them are using their mobile devices to browse the web (and shop online) and download apps. And that percentage is expected to increase. However, a majority of businesses have failed to “mobilize,” that is, create a mobile version of their website, or a mobile app.

Does that mean that every business or organization needs a mobile website? No. But if you currently have a B2C or B2B digital presence and/or the people you do business with are mobile, it’s time you had a mobile strategy.

Do You Need a Mobile Website?

According to Ted Schadler, a vice president and principal analyst at Forrester Research who covers enterprise issues, you can determine if your organization needs a mobile website by asking the following questions.

Does the organization currently have a website that is regularly used by customers?
Do the people you are trying to reach use smartphones or tablets on a regular basis?
Can mobile provide opportunities that a traditional web presence — or other channels — can’t or doesn’t do as well?
Would customers (or employees or partners) benefit from having information at the moment of decision?

If you answered “yes” to two or more of these questions, you should probably (if not definitely) have a mobile presence (either a mobile website or a native app, or possibly both).

Think of mobile as “a system of engagement,” as a way to improve the way you engage with customers, employees and partners, explained Schadler. For example, let’s say you run a real estate company, or are a developer. Prior to mobile, if a customer wanted information about a house, she’d have to call the real estate agency or developer or look up the information on her computer. With mobile, however, you can provide prospective buyers with the information they need on their smartphones, when they are right in front of the house.

What to Look for in a Mobile Solution Provider

When selecting a mobile solution provider, “you should go through the same vetting and RFP process as you would for any other type of software,” says John Epperson, the CEO of Ruxter, a mobile marketing company. And part of the vetting process should include viewing and testing out several mobile websites (or apps) the mobile solution provider developed – on a variety of smartphones and tablets (not just the iPhone and/or the iPad).

“How is the user experience?” says Mike Craig, the co-founder and vice president of marketing at Ruxter. Does it have a good user interface (UI)? Are pages quick to load? Is the site easy to navigate? In addition, Craig recommended reaching out to organizations with mobile websites and/

Let’s Learn About User Empathy In Web Design

wb3Definition: Empathic design is a user-centred design approach that pays attention to the user’s feelings toward a product. The empathic design process is sometimes mistakenly referred to as empathetic design. – Wikipedia

THE BASICS

So why is it important? ED is about understanding your users, as well as the problems they may face – not just their goals. To truly understand this, some good old-fashioned research must come into play.
Research your users’ underlying needs, what do they really want from you and your service? What do they really want from your website? What need does your product or service fill and does your website communicate this? Step into their shoes and see your site from their perspective as best as you can. Explore your users’ stories and personal experiences. What are the underlying themes or questions here? How can the design and experience of your website meet these?

User Empathy Web Design

USER EXPERIENCE + USER EMPATHY
Is your site designed to truly connect with your users? Is it providing the best user experience? If your users are feeling detached from your brand online, it’s likely that your website isn’t taking a user focused approach. Think about how you can implement user experience and the practise of user empathy (UX and UE).

Focus on your users’ needs, feelings, experiences, and the
outcomes they expect from visiting your website. UX and UE
aren’t just pop-psychology, they are being used globally, in
large organisations, to solve real-world business and
innovation challenges.

User Empathy Web Design UX
DESIGN, DECISION, PROCESS
User’s come first, this is the position you need to take when embarking on the design process. It’s good to keep this at the forefront of your mind when you’re discussing your requirements with your creative team – use your research to guide your decision-making processes.

Even a seemingly well-functioning site, can take advantage of an empathetic approach. It’s important to a) do your research about what your audience needs, and b) step into your potential clients’ shoes, ask the hard questions, look at the themes and messages underneath all the marketing

Let the user’s needs guide your decision-making processes.

IDE Empathy Web Design UX

USER EMPATHY: THEY KEY INFLUENCERSTechnologies that know no boundaries and speak to all
audiences.

For example: people from different cultures, and situational constraints, age and ability. If you are communicating with a broad or even a specific audience you must be mindful of this and incorporate this into your website’s functionality.

User testing: through research and site testing, you can gain a true understanding of how people behave, feel, and solve problems using your website or app.

Ultimately, successful User Empathy in web design is about human-focused design where empathy is considered at the very top of the design process hierarchy.

Best Principles of Effective Web Design

wb2Like the phrase ‘beauty is in the eye of the beholder’,  effective web design is judged by the users of the website and not the website owners. There are many factors that affect the
usability of a website, and it is not just about form (how good it looks), but also function (how easy is it to use).

Websites that are not well designed tend to perform poorly and have sub-optimal Google Analytics metrics (e.g. high bounce rates, low time on site, low pages per visit and low
conversions). So what makes good web design? Below we explore the top 10 web design principles that will make your website aesthetically pleasing, easy to use, engaging, and effective.

1. PURPOSE
Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business? Eachpage of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.

2. COMMUNICATION
People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organising information using headlines and sub headlines, using bullet points instead of long windy sentences, and cutting the waffle.

3. TYPEFACES
In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.
4. COLOURS
A well thought out colour palette can go a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space/ negative space is very effective at giving your website a modern and uncluttered look.

5. IMAGES
A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. If you don’t have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text.

6. NAVIGATION
Navigation is about how easy it is for people to take action and move around your website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click rule’ which means users will be able to find the information they are looking for within three clicks.

7. GRID BASED LAYOUTS
Placing content randomly on your web page can end up with a haphazard appearance that is messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.

8. “F” PATTERN DESIGN
Eye tracking studies have identified that people scan computer screens in an “F” pattern. Most of what people see is in the top and left of the screen and the right side of the screen is rarely seen. Rather than trying to force the viewer’s visual flow, effectively designed websites will work with a reader’s natural behaviour and display information in order of importance (left to right, and top to bottom).

9. LOAD TIME
Everybody hates a website that takes ages to load. Tips to make page load times more effective include optimising image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).

10: MOBILE FRIENDLY
It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimised specifically for mobile users).It is easy to create a beautiful and functional website,
simply by keeping these design elements in mind. Have you got a website design that needs reviewing or optimising? Or perhaps, you are planning a website and you are looking to get the design right from the ground up. Either way, these principles of effective web design can help your website be more engaging, useful, and memorable for visitors.

Pros And Cons To Be Aware When Planning A Website Redesign

wd4Like any good investment, your website needs to be proactively managed. It’s not just about keeping the content up to date, but it is also about bringing the technology and design up to date to meet the needs of your business and your customers.

When is a website redesign needed? In general most companies redesign their website every 2 years, and rebuild their website every 5 years.

KEY DRIVERS FOR A WEBSITE REDESIGN:
The website looks old and dated
It doesn’t reflect the business direction
It looks terrible on mobile devices
It doesn’t convert any sales or leads
It is hard to navigate and find information quickly
It takes too long to load
It is not easy to update the content
It is not user friendly
Check your Google Analytics data for signs that your website needs help. If you have low repeat visits, high bounce rates and low average time of site – then something isn’t working.
Check the technology data to see how your website is performing on different browsers and mobile types. It is also advisable to ask a professional to perform a website analysis and propose recommendations on how to make your website work better for you.

PROS OF WEBSITE REDESIGNS
A fresh design gives the impression that your business is
dynamic and growing
You move with the times, and your website is attractive and
easy to use on mobile devices
Your website works harder for you with new functionality such
as social media integration, a blog, forums, e-commerce,
contact forms and more
Your users are happier when they can find what they want
quickly and easily
You save money, because you can easily maintain and update the
website content yourself
Your website will be more search engine friendly
You can gain a competitive advantage over your competitors by
captivating the online market

NEGATIVES OF WEBSITE REDESIGNS & HOW TO OVERCOME THEM
Regular users of your website will be see a different looking site, and may take a while to get used to it. To overcome this, it is important to consider the user experience in the design – what information do they need? What action do they need to take? Make it easy for people to find what they want in 3 clicks or less. You can also work with your designer to find a new design that is implemented over time so as not to confuse your users so much.

When you redesign a website, your website page URL’s will often change, and this will have an impact on your SEO power. To combat this, a SEO expert can inform the search engines where your old URLs have moved to, and minimise loss in ranking and traffic by preserving your highest performing pages. Make it easy for search engines to find your new pages by submitting a site map to the major search engines.

Website rebuilds will require resources such as time and money. It is important to factor in website maintenance and redesigns every 2 – 5 years and treat your website as a growing part of your business. To keep costs feasible, it’s important to choose the right developer that understands your business vision and has the skills and expertise to make the website redesign happen without unforeseen costs and delays.

Overall, keeping on top of how your website design is performing is an important part of making sure it meets your business goals online. There are powerful advantages to be gained in terms happier customers, better functionality, and a competitive advantage over your competitors. There are some major areas to look out for, but with proper planning and the right web design team in place, these negatives can be turned into positives.

Know MOre About User Experience

DEFINITION User Experience Design (UXD or UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.
So what exactly leads us to a successful user experience? And why is it so important for your website? Let’s explore the critical components.
1. VISUAL DESIGN
The visuals not only represent your brand, or the look and feel of your online space, they are extremely important when it comes to determining the user experience of your website. Beyond visuals, such as colours, visuals and logos, there’s a deeper element which involves effective visual communication. Your graphic treatment must help you drive business, and must of course, encourage ease of use, and clicking in all the right places. A User Experience Designer has the edge on a Graphic Designer in this department. Although they may be somewhat similar, there are some definitive differences in skill-set. Engaging with a User Experience Designer will give you the confidence that your designer really understands the needs of your users, your business and also the technology that is being used for your site (or app).

2. INFORMATION ARCHITECTURE
The layout of your content is key to a smooth user experience. Create a flow for which you would ideally like your visitors to take, by mapping out a journey for them. Links, find-ability and usability of your site all come into play here. Don’t confuse people or take them to random places, maintain consistency throughout your site map and focus on the features and information which are important to your user.

3. CONTENT STRATEGY & STRUCTURE
Not the same as architecture, structure focuses on the all important clarity of your messaging. Make sure your content is clear from the get go i.e. what you do, what you are offering, and how people can access your service, or purchase your product. Adapt to your market with the right tone, and research, research, research! Be mindful of what works for you when you visit a site. You will notice the difference between a site with structure, to one that fights with its own messaging. Read our post about writing good content for your website.

4. SEARCH-ABILITY & FUNCTIONALITY
It’s not exactly shocking, but impatient users do exist, and if you don’t have what they are looking for easily either on your homepage or in your navigation, make sure you have an easy to find search option. This means you need to do the background work to ensure that all of your items are infact searchable, but it will be worth it to engage those quick clickers! Functionality is key – if your site isn’t functioning optimally, you’re likely to lose clients and sales.

5. CUSTOMER JOURNEY MAPPING & INTERACTION
Mapping your customer’s journey – this process really allows you to explore the design interactivity, as opposed to a graphic specialist who will be looking at the look and feel. Interactivity should be assessed for usability of the design, and will allow you to pin point any road blocks or issues that a user may face on your site – like the nasty ones that may steer them away. This also helps you design your website for optimum conversion. By implementing smooth transitions and a clearly directed flow from page to page, design blueprints (created by your UX designer) will help you understand exactly how your users are using your website – and how to improve the experience further.

Want to know more about Customer Journey Mapping? Smashing magazine do a great job of summarising it here.

WHAT ABOUT SEO & UX?
Remember our recent blog on SEO? We touched on “chasing the algorithm” pitfalls and writing for your clients and not Google. This stands strong when it comes to the UX, as we know Google measures your site quality. Another hot tip, is that Google can understand page layout, and may penalise you for pages with very light content. Most recently, Google has been looking into user engagement data, and on page content analysis.

Bottom line: Don’t sacrifice your UX to satisfy Google’s algorithm as it’s constantly evolving, and smarter than you think.

Best WordPress Web Design

WordPress has truly grown to be a powerful software program suited to practically any website application – from brochure style websites to portfolio sites, ecommerce websites, news sites and professional business websites. WordPress is not just for small business and bloggers anymore – here are the industry heavy weights that use WordPress as the force behind their websites:

News websites – CNN, New York Observer, Times, Forbes
Fortune 500 companies – UPS, eBay, Sony
Technology – Samsung, TED Talks, Mashable, Tech Crunch
Entertainment – Katy Perry, Jay Z, Justin Bieber, People Magazine
Fashion – InStyle, Style Watch, Modelina
Shortie Designs has been designing and developing with WordPress since we opened our doors in 2009, and we are continually impressed with the power and flexibility of the WordPress platform. Every website is able to be customised to our client’s requirements and each design is beautifully unique so that no two websites are the same. As design professionals, we like to keep an eye out on what others are producing on WordPress. Below are our top picks of WordPress website designs that are inspiring us right now.

ECOMMERCE WORDPRESS WEBSITE
Ca c’est Gang is a eCommerce website for a French street wear fashion brand. The minimalist design really allows the products to be the heroes in the design (which makes great sense when you are selling products online!). The website design is very intuitive, and it is easy to navigate, even if you don’t speak French. It also has one of the best looking cart and checkout pages we have seen, which gives your visitors a great user experience and helps convert visitors to customers.

WORDPRESS WEB DESIGN FOR A PROFESSIONAL WEBSITE
This website for a US building company is big, bold and interactive. Although it is a professional website, the design is far from boring. In fact, we find this website very engaging. The full width design makes great use of space, and the interactive elements beckon us to click through deeper into the website. The hover over effects on the Proje

Best Tips for Improving Your Web Design

Want to ensure that visitors will exit your website almost immediately after landing there? Be sure to make it difficult for them to find what it is they are looking for. Want to get people to stay on your website longer and click on or buy stuff? Follow these 13 Web design tips.

Web design
1. Have a polished, professional logo–and link it to your home page. “Your logo is an important part of your brand, so make sure it’s located prominently on your site,” says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. “Use a high-resolution image and feature it in the upper left corner of each of your pages,” she advises. “Also, it’s a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it.”

2.Use intuitive navigation. “Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site,” says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide “secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar.”

Why is intuitive navigation so important? “Confusing navigation layouts will result in people quitting a page rather than trying to figure it out,” Gatti says. So instead of putting links to less important pages–that detract from your call to action or primary information–at the top of your home or landing pages, put “less important links or pieces of information at the bottom of a page in the footer.”

3. Get rid of clutter. “It’s very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options,” explains Paolo Vidali, senior digital marketing strategist, DragonSearch, a digital marketing agency.

To keep visitors on your site, “make sure pages do not have competing calls to action or visual clutter [e.g., lots of graphics, photographs or animated gifs] that would draw the visitor’s eyes away from the most important part of the page.” To further keep clutter down on landing pages, “consider limiting the links and options in the header and footer to narrow the focus even further,” he says.
Another tip to streamlining pages: “Keep paragraphs short,” says Ian Lurie, CEO of internet marketing company Portent, Inc. “On most Web sites, a single paragraph should be no more than five to six lines.”

4. Give visitors breathing room. “Create enough space between your paragraphs and images so the viewer has space to breathe and is more able to absorb all of the features your site and business have to offer,” says Hannah Spencer, graphic designer, Coalition Technologies, a Web design and online marketing agency.

“Controlling white space through layout will keep users focused on the content and control user flow,” adds Paul Novoa, founder and CEO at Novoa Media. “With a lot of visual competition taking place on the Web and on mobile, less is more. Controlling white space will improve user experience, increasing returns from the website.”

5. Use color strategically. Using “a mostly neutral color palette can help your site project an elegant, clean and modern appearance,” says Mark Hoben, the head of Web design at Egencia, the business travel division of the Expedia group, who is also a believer in using color wisely. “Employing small dashes of color–for headlines or key graphics–helps guide visitors to your most important content,” he explains.

It is also important to use a color palette that complements your logo and is consistent with your other marketing materials.

6. Invest in good, professional photography. “Website visitors can sniff out generic photos in a second–and they’ll be left with a generic impression of your company,” warns Zane Schwarzlose, community relations director, Fahrenheit Marketing. “Your company isn’t generic. So show your visitors that by investing in professional photography.”

“We strongly recommend that our clients invest in professional photography or purchase professional stock photos,” says Gatti. Good photographs “draw the eye, providing an emotional connection to the written content.” Poor quality photographs or photographs that have nothing to do with your message, on the other hand, are worse than having no photographs.

Bonus photography tip: “If you want to draw attention to a particular piece of content or a signup button, include a photo of a person looking at the content,” suggests Elie Khoury, cofounder and CEO of Woopra, which provides real-time customer and visitor analytics. “We are immediately drawn to faces of other humans–and when we see that face looking’ at something, our eyes are instinctively drawn there as well.”

7. Choose fonts that are easy to read across devices and browsers. When choosing fonts, keep in mind that people will be looking at your website not just on a laptop but on mobile devices. “Some large-scaled fonts may read well on [a computer monitor], but not scale or render well on mobile, losing the desired look and feel,” explains Novoa. So he advises using a universal font.

“Pick a typeface that can be easily read and size it no less than 11pt,” says Ethan Giffin, CEO, Groove Commerce. “If you’re using Web fonts, try to use no more than two font families in order to ensure fast load times,” he says.

8. Design every page as a landing page. “Most websites have a design that assumes a user enters through the home page and navigates into the site,” says Michael Freeman, senior manager, Search & Analytics, ShoreTel, Inc., which provides hosted VoIP, cloud PBX service and business phone systems. “The reality, though, is that the majority of visits for most sites begin on a page that is not the home page,” he says. Therefore, you need to design the site in such a way that whatever page a visitor lands on, key information is there.

9. Respect the fold. When asked for their top design tips, almost all the Web designers CIO.com queried immediately said: Put your call to action in the upper portion of your website, along with your phone number and/or email address (if you want customers to call or email you). Regarding home page images, “I recommend going against full-width sliders and encourage sliders or set images that cover two-thirds of the width allowing for a contact form to be above the fold,” says Aaron Watters, director, Leadhub, a website design and SEO company.

10. Use responsive design–that automatically adapts to how the site is being viewed. “Rather than developing a site for each device, a responsive site is designed to adapt to the browser size,” making for a better user experience, says Jayme Pretzloff, online marketing director, Wixon Jewelers. And a better user experience typically translates into more time spent on your site and higher conversion rates.

11. Forget Flash. “Thanks in part to the ongoing dispute between Adobe and Apple, the days of Flash as an Internet standard are slowly coming to a close, so why stay on the bandwagon when there are other options that are much more Web and user friendly?” asks Darrell Benatar, CEO of UserTesting.com. Instead, use HTML5, he says. “HTML5 is gaining more support on the Web, with search-engine friendly text and the ability to function on many of the popular mobile operating systems without requiring a plug-in. The same can’t be said for Flash.”

12. Don’t forget about buttons “The ‘Submit’ or ‘Send’ button at the bottom of a Web form can be the ugliest part of a website,” says Watters. So he encourages designers to make form submission buttons “so appealing visitors can’t help themselves. They just have to click it.” In addition, “when a visitor hovers over your submit button, it should change color, gradient, opacity or font treatment,” he says.

13. Test your design. “Whether you are trying different placements for a call to action or even testing different shades of a color, website optimization can make a big impact to your bottom line,” states Lindsey Marshall, production director, Red Clay Interactive, an Atlanta-based interactive marketing agency. “A user experience manager at Bing once remarked that Microsoft generated an additional $80 million in annual revenue just by testing and implementing a specific shade of blue!”

“Every design decision is just a hypothesis,” adds Mike Johnson, director of User Experience at The Nerdery, an interactive production company. “User testing, A/B testing and simple analytics can help you continuously improve your designs [by providing] feedback from real people.”

Tips to Improve Your Web Design Skills

Designing your company website can be a challenging proposition. You’ve got to juggle the expectations of many stakeholders, and you can often hit obstacles that prevent new ideas from emerging.

I was the design manager for a large company website for nearly six years, and during that time, I found myself losing perspective of what our target audiences really needed. Call it “tunnel vision.” When you work on the same website, it often helps to take a step back and think through new approaches. That’s the purpose of this blog post.
What follows are some tips, tricks, shortcuts and general advice for creating great website design. Can you try any of these to take your web design to the next level?

1) Design in shades of gray, then add color

If your web designer creates wireframes prior to visual designs, then you know the value of starting with shades of gray. Turn your wireframe into a grayscale visual design, add your photography, then carefully add color to design elements one at a time.

This will prevent an “overdesigned” website and help to place prominence on just the items that need it.

2) Use Keynote (Mac) to create rapid page prototypes

You don’t need Photoshop to create rapid prototypes of web pages, landing pages, call to actions or other web interface elements. There’s an entire underground movement around using Keynote (that’s Apple’s version of PowerPoint) to create mockups.

There’s even an online repository containing user interface design templates for wireframing, prototyping and testing mobile and web apps in Keynote.

3) Add web fonts to your corporate style guide

It’s 2015, and if your corporate style guide doesn’t include web fonts, then you need to look into adding those so your website has the same governance that corporate documents and collateral does.

If you haven’t looked into this yet, Google Fonts is a great place to start. Find a suitable web font and define usage in your corporate style guide so you use it consistently online

4) Bury those social media icons

You did all that work to get people to your website, and yet you’re inviting them to leave? That’s what you’re doing when you place social media icons in a prominent location of your website, like in the header. Bury the icons in the footer.

If people are on your website, you want them to stay, learn and perhaps inquire about your services, not check out company picnic photos and bowling outings on Facebook. Social media should send people to your website, not vice versa.

5) Ditch the slideshow/carousel

When the homepage slideshow/image carousel came into fashion, it was a way to get lots of information on the first page of your website. The problem is that most people don’t stay on the page long enough to experience all of the tiles/messages.

What’s more is that the messages and images usually aren’t relevant to your prospect’s first visit. What’s the one thing a visitor should take away from their website visit? Promote that one thing — usually what your company does in layman’s terms — and ditch the rest.

6) Simplify navigation

Reducing your visitors’ options might seem counter intuitive, but it can actually help guide people to your most productive content. Rather than overwhelming your website visitors with links to every page, simplify your navigation.

Eliminate dropdown menus and especially multi-tier dropdown navigation that only the most skilled mouse user can navigate, and go a step further by reducing the number of links in the header or sidebar of your website.

7) Remove sidebars

The sidebar has been an especially popular web design trend for the last ten years, especially on blogs. Many companies are finding that when they remove sidebars from their blogs, it encourages reader attention to the article and the call to action at the end.

Removing the sidebar on our company blog has increased the number of clicks on call to action graphics over 35%.

8) Get color inspiration from nature

Struggling to find the perfect color combination for your website or a call to action graphic? Get your inspiration from nature. You can either use your own camera to photograph natural wonders around you or find landscape photos on the web, the use a color picker to select a color. Nature’s color palette never fails.

9) Step away from the computer

I believe that good design starts with great planning. Getting your ideas down on paper or on a whiteboard can help you iterate through a design, refining it and adding detail as you go along. Drawing on a whiteboard can also make the design process collaborative and allow other team members to give input.

It’s also easy to erase pencil from paper or marker from a whiteboard and make quick changes, and once you have something concrete to work with, snap a photo with your mobile phone and get to work on screen.
10) Use Pinterest to create mood boards

When you’re putting together inspiration and ideas for a new website, or you’re redesigning part of your website, you need a way to collect your inspiration in one place for future reference.

Did you know that you can use Pinterest to create a mood board of your favorite images, colors, layouts, patterns, sample websites and concept material? Another great advantage of using Pinterest is that other designers create and share mood boards too, and they’ve already curated a ton of resources that you can use.

11) Increase your font size

Typography is incredibly important in web design. Text is hard enough to read on a computer screen, so you have to make the important things stand out.

One way to do this is to increase your font sizes, especially for headings and important blocks of text. Consider increasing the size of your normal font, too.

12) Use white space

It may be hard to believe that using whitespace is a hack, but I evaluate websites every day that could use more whitespace. Not every blank area of the screen needs to be filled.

Even though whitespace and simplicity are in style right now, too many companies try to cram everything into a small space, or worse yet, “above the fold.” Give your design room to breathe, and your website visitors will be able to find things easier.

13) Use the squint test

Want a quick way to learn what’s most prominent on your website? Back away from your computer screen and squint. Most everything will become blurry, and only the larger, colorful, more prominent features will be noticeable.

Build a Better Website With This 6 CSS Tools

Cascading Style Sheets are an essential element of Web pages, since they control page layout, fonts, positioning and so much more. While CSS does offer a great deal of page control, some aspects can be cumbersome. This in part is why CSS is going through another revision, currently version CSS3.

CSS3 gives designers more control over page layout and the behavior of different page elements. With its new coding options, CSS3 now has the capability to create image effects with code, giving more control over the look and feel of layouts. These effects—which include gradients, text and box shadows and border-radius, for rounded corners on boxes—let you create image effects on the fly, without building each effect using image-creation programs. It’s also worth noting that CSS3 is backwards compatible and will work with pages designed with CSS2.

Here are six programs that will make your life easier when designing pages with CSS. Some will help you accomplish a single CSS programming task, while others are more robust and will help you go a long way toward building a fully functioning small business website.

Adobe Dreamweaver CS6

When working with CSS—and, in fact, when doing all types of Web design—the program of choice for many is Adobe Dreamweaver CS6.

One particularly useful feature is Fluid Grid Layouts (shown below), which is a must for creating multiple layouts for desktop, tablet and mobile versions of a site at the same time. Note that the document type defaults to HTML5. As a result, Dreamweaver CS6 lets you build a mobile site quickly, then output the layout using the mobile development framework PhoneGap.

Adobe Dreamweaver Fluid Grid Layouts

There is also improved support for the HTML5-based user interface system jQuery Mobile.

Adobe Dreamweaver Mobile
Additional Dreamweaver CS6 features include an updated Multiscreen Preview panel, which lets you see how HTML5 content renders, as well as integration with the Adobe Business Catalyst website hosting platform and a wider range of Web fonts that you can incorporate into your projects.

Adobe offers several pricing models based on its Creative Cloud package, which offers software components to businesses beginning at $19.95 per month.

TopStyle 5

The HTML5 and CSS3 editor TopStyle 5 includes several helpful features:

While CSS3 offers a wide range of possibilities, it doesn’t display properly in all browsers. Plus, since it hasn’t reached the final release stage, you need to use CSS vendor prefixes to make sure there aren’t any conflicts among browsers. There are many settings, though, and it’s difficult to remember them. Luckily, TopStyle 5 ensures cross-browser compatibility through its Prefixr, which adds those vendor prefixes to your code.
The iWebKit 5 framework lets you create website or app compatible with the iPhone, iPod Touch and iPad.
Image Maps let you create “hotspots” that, when clicked, take the user to another Web page.
Finally, the CSS Gradient Generator (shown below) lets you create vertical, horizontal and diagonal gradients with pure CSS3, without having to create images. The Reverse button will reverse the gradient—from top to bottom, for example, to bottom to top. Note that you can see the code in a preview box at the bottom of the dialog box.
TopStyle 5 CSS Gradient Generator

Rapid CSS Editor

The Rapid CSS Editor lets you write website code manually or use a wizard. When it comes to creating CSS or HTML layouts, using the wizard is a snap, and it includes tutorials for the CSS beginner. Choose a font, font size and link color, then click “OK” and you’ll get the CSS code shown at the right.

The New Form Template option, meanwhile, lets you choose from several pre-defined layouts or create and save your own. As you create a new template, as seen below, it’s easy to preview the results.

Firebug for Firefox

The open source Firebug for Firefox add-on editor lets you inspect the code on a Web page without making any changes to that code. You can experiment with turning items off or adding code, for example, then copy your settings for use with other projects. Among other things, Firebug offers a great way to learn HTML code and use non-destructive editing to change the style and layout of a page.

Here’s a screen shot example of Firebug in action:

Let’s say you’ve built a layout, but you’re not satisfied with how it looks in the browser. To see what’s going on, click on the “Inspect” button, then hover your mouse over different elements on your page. When you do this, that section will open in Firebug and you’ll see what’s going on with your code.

Additional Firebug features include the capability to use a JavaScript debugger and a robust set of extensions that add more power to the program.

CSS Menu 3.3

One task that can eat up a lot of time when building a new site is menu creation. To address this, CSS Menu 3.3 lets you create both horizontal and vertical navigations.

As you’ll see when you look at the default interface for CSS3 Menu 3.3, everything you need is on this one screen. This makes the program simple to use.

At the top left are the controls for opening, saving, publishing adding and subtracting menu items. Directly below that is the menu where you can choose to create either a horizontal or vertical menu, both complete with flyouts and multiple levels. Below the menu section, you’ll find the item properties that let you to set the text, link, target and alt text, as well as add an icon to your menu items if you wish.

At the top right, meanwhile, are the templates and icons section. Templates give you horizontal and vertical options for building menus, while the icons tab gives you various icons to display alongside menu items.

Finally, at the bottom right are the font, color, hover and box controls. These give you a lot of flexibility for styling the menu and the text. For example, you can choose from up to 15 different fonts, including different fonts for the main menu and sub-menu.

CSS Menu 3.3 has two pricing models. A single website license for both Windows and Mac users is $59, while and an unlimited website license is $79.

CSS3 Button Generator

Another time-consuming task when building a website is creating buttons. The Web-based CSS3 Button Generator offers you a solution by letting you create custom buttons for your layouts. (Be aware, though, that these buttons will work only with browsers that support CSS3; otherwise, the buttons might not render correctly.)

The CSS3 Button Generator consists of several sections: Font/Text, Box, Border, Background, Hover and CSS Code. When you visit this site you’ll see a button in place at the top of the screen; meanwhile, several settings are already enabled.

When setting the font, you’ll encounter some limitations, as your only choices are Arial, Georgia and Courier New. Also, there aren’t any controls such as underline, left, right, center, italic or bold, though you can control the position of the text by adjusting the box properties.

Here’s an example button—with admittedly exaggerated effects—to give you an idea of what this software can do:

When you’re satisfied with the look and feel of your button, copy the CSS code and Web kit settings and use them in your designs.