7 Ways a Design Kit or Template Can Save Your Project

You do not have to start—and finish—every new website design from scratch.


Before you scowl, think about it for a minute. How many times have you done the exact same thing to start a project? How many times have you created the exact same icons or user interface elements with subtle changes?

That’s where a design kit or template can come in and totally change the way you work. For many designers the benefits can outweigh some of the loss of control issues that come with prepackaged design parts. And while a kit or template or kit isn’t for every website designer every time, they can definitely be a lifesaver at times.

1. Finish Projects Fast

The top reason to invest in a design kit or template for website design projects is speed. Rather than starting from the ground up using HTML, CSS and PHP to craft the design, you can select a template option that gets right to the heart of what you want to do.

All you have to do is install it and start customizing

All you have to do is install it and start customizing. (This can be a great option for smaller websites built on common CMS systems such as WordPress.)

So what do you look for in a design template or kit? Why wouldn’t you just take the time do conduct a fresh build? Time really is the key concern. You can browse through design elements or parts (kits) or templates (full design starters) to find something that appeals visually right away. This can be an idea situation if you need a site in a hurry or have a small client project that they need to “see” before you get started.

Templates and kits can make it easy to visually communicate ideas and speed up the process. There’s no guesswork and you know exactly what the design will start as thanks to demo versions and screenshots before the purchase. (Clients actually love this concept, even if they don’t know it is a template-based project.)

2. Ensure Consistency

Users are habitual creatures. They like things to look and function in the same way all the time.

A design kit can ensure that you are working with a set of parts that look, act and interact consistently throughout a design. This can be especially important if you are building a combination of microsites for the same company or brand or working with multiple apps that should feel similar.

Most kits come with options that are customizable so you get a set of elements that mix and match; you only had to add color and branding.

3. Learn Better Practices

A design template or kit can actually be a valuable source of learning if you haven’t built a lot of websites. You can learn how the code comes together, how files are grouped and packaged and get a good overview of industry standards and best practices.

using these packages can help you get a feel for how to put together your own elements

Downloading the PSD files for a design template or kit can be particularly helpful in this manner as well. If you see yourself designing custom themes for clients in the future, using these packages can help you get a feel for how to put together your own elements for reuse later, as well.

Many theme designers actually get started in this way. After designing plenty of custom websites, they start to cull together elements that package nicely into themes that they can either reuse for clients or sell online.

4. Built-In Functionality

For designers that aren’t as well versed in elements such as search engine optimization or analytics, kits and templates can offer some built-in functionality that can make it easier to look at metrics and track results. This applies to websites that you build for yourself or clients.

built-in elements are user-friendly and designed for beginners

Many of these built-in elements are user-friendly and designed for beginners. The real bonus in built-in functionality is for client builds. Most clients can use and understand the tools with ease, including templated SEO fields and WYSIWYG editing controls. It’s also an added bonus that you can offer without a lot of more expensive add-on services from another vendor.

These tools also come with rather extensive documentation so that clients can find get information with little assistance after the install is complete.

Another key function is that many kits and templates come with automatic updates that are included with the license. That leaves less time thinking about upgrades and you are able to leave plugin and theme support to the creators, rather than having to figure it for yourself every time there’s a new CMS release. (This is most practical for clients where you build and move on, and less of a concern for a site that you plan to manage yourself.)

5. Kits Are Affordable

Generally speaking, design templates and kits are affordable. Even premium offerings—which are the preferred choice—aren’t going to break the bank. Full-scale premium themes for WordPress are often less than $100 for a single license and kits start at about $10, depending on the number of elements included.

And once you download a kit or template, it’s yours. (Just remember to opt for the developer license if you plan to use the same package multiple times.)

With low cost options, a starter kit often costs less than the time it takes to get a project up and running. (Could you do everything the template or kit allows in less than an hour?)

6. Code Is Clean

As long as your stick with a reputable provider, you can trust that the code is clean and lightweight. They often have this down to an art form (and the reviews are a good clue if things are being updated or managed as needed).

you can trust that the code is clean and lightweight

Look for a theme or design kit from a source that’s highly rated, is interactive in discussions and has a significant number of downloads. (You might want to stay away from smaller shops with only a handful of downloads or changelogs that haven’t been updated in months. That’s a red flag, for sure.)

7. Expand Your Repertoire

Finally, a design theme or kit can help you expand your ability to create different website elements. Maybe your skills aren’t as slick as they could be with a specific type of video component or slider. Maybe designing buttons just isn’t your thing.

Using tools can help you get better. You’ll get more comfortable with the way these elements, look, feel and interact so that you can become a better designer. The tools and technology are changing all the time, and everyone has a different strong spot. By working together in this way, designers and developers can actually share the wealth of their knowledge.


Using a design kit or template isn’t for every designer or project, but they can be pretty awesome tools in a pinch.


12 Essential Scroll-To-View Animation Trends

Animated page elements are super common on landing pages and startup websites. But they’re not always talked about in design circles because the idea of “animate on view” isn’t covered a lot.

I use the phrase scroll-to-view because it seems like an accurate description. Basically as you scroll down the page new animated elements come into view.

It’s not a technique that works for every website but it does add a nice touch into certain layouts. And I’ve curated some of my favorites here to showcase how these scroll-to-view animations work and why you might try using them yourself.

1. Tomorrow Sleep

On the Tomorrow Sleep website you’ll notice a few fairly benign animated effects. These fade different pieces of text and CTAs into view all around the layout.

What’s interesting is how most of the images and background areas are fully visible even on first scroll. Many websites use fading animation to display images and screenshots while keeping the text visible.

This minor difference helps draw attention to the text as it fades into view. A great way to capture attention from visitors browsing along.

2. Twist

Another technique I often see is targeting most of the page’s content for on-scroll animations.

For example the Twist app homepage includes varying page segments and blocks of text that animate in & out of view on scroll. These have a very soft fading effect so they’re noticeable yet not too harsh.

Some visitors may be annoyed by the delay but I don’t think it’s too long. Plus it only animates one time so if you hit the bottom of the page all animations are done.

3. Yarn App

For much more complex animations check out the Yarn App lander. This one has multi-part animations and even elements that come into view from different angles.

Some of the screenshot demo images animate upwards while the accompanying text/BG patterns animate down into view. This alternating style is pretty unique and not something I see often.

However the landing page is also incredibly simple and there isn’t much else here to grab attention. In this case varying animations work nicely.

4. DashFlow

Out of all these examples I think DashFlow uses the most common animation techniques.

This lander animates images and text into view all in one sitting. It’s real simple and uses a single-column layout so all content flows straight down in a linear path.

Nothing inherently special about this design beyond the very clear-cut method of animating items on scroll. A great style if you have a similar website and want to keep the animations simple.

5. Quuu Promote

Quuu Promote keeps animations to the bare minimum and only uses them in CTA areas.

I can’t say if this increases conversions but that does seem to be the goal. When you first load the page the very top header animates into view with a tilting animation on the CTA.

As you scroll down you’ll notice the rest of the page is pretty static. But at the bottom there’s one final CTA above the footer that also animates & runs the same tilting animation.

Goes to show you can have on-scroll animation effects that don’t run across the entire page.

6. Qonto

The homepage for Qonto has an interesting take on scroll-to-view animation. It uses the same type of animation across the entire website and animates individual items into view from the side.

For the majority of the page this includes icon sections that have a small graphic above some content explaining the app’s features. Not too subtle yet not overly overt either.

Plus you can find a few other animation styles in the header along with some BG images that fade into view. This page is just a gorgeous example of what web animation can do.

7. Hike

For an example of subtle animations check out Hike.

Their page alternates between animated elements and fixed elements. But the animation effects are fast so you don’t feel annoyed waiting for viewable content.

This is my preference for any scroll-to-animation effect. It’s always a beautiful technique but the timing needs to be quick and to the point. Nobody wants to wait around for content to come into view and Hike clearly understands this.

8. Project Fi

If there’s anyone who knows great UX it’s Google. And across all their products they have a ton of landing pages, Project Fi being one example with some fantastic animations.

These only apply to icons and they don’t fade into view, but rather pop up from lower on the page. As you scroll you’ll find icons that slide up into view for each small section.

It’s a pretty subtle effect but it adds some life into the design. And it’s based solely on the viewer’s position on the page so if you scroll to the top & move back down you’ll be greeted by the same animation effects.

9. Base

The Base CRM homepage is an excellent example of simple animation at work. This site uses custom animation effects to move images up and into the viewer’s eye line.

Based on the number of landing pages I see daily this is very typical of what I expect. It’s not really a complex animation to recreate and it doesn’t affect the experience too much either.

One thing I wish is that the animations would load a bit faster. But beyond that I think this is a prime example of animating images on scroll with a very clean layout to boot.

10. AnyList

All the best mobile applications have their own websites for promotion. And the best ones usually have some pretty snazzy animation styles.

AnyList mixes a few different techniques together on one page. Their header image animates up from beneath the cut-off area but it’s the only “moving” animation on the page.

Everything else just fades into view and it all uses a pretty quick load time for the animation. These techniques are used elsewhere on the site which gives it a more cohesive feel.

11. Ernest

The page style for Ernest is a little different than other landing pages I’ve covered.

It uses parallax scrolling animations to create motion on a single page layout with different sections.

These vary based on the direction you’re scrolling whether you move up or down, and at what speed. They also vary with intensity based on the different sections of the page.

You can navigate using the side dot navigation menu and this quickly jumps around the page to different areas. It’s one of the few techniques you’ll often see on parallax pages and it certainly helps Ernest stand out from the crowd.

12. TaxiNet

To catch a glimpse of full-page animations in action take a look at the TaxiNet website.

It’s a smorgasbord of scroll-based animation effects tied to icons, text, images, and even background styles. Individual page background colors animate into view with the user, definitely not a typical technique but certainly an interesting one.

If you like this style you could absolutely apply a similar approach to your own landing page. Just make sure you keep the animations snappy and quick because nobody wants to wait around for your neat animations to load.

But if you do ‘em right these scroll-to-view elements add a nice effect to any landing page.


Third Time Lucky for Medium’s Logo

Omnipresent publishing platform Medium has rebranded, launching its third logo in as many years.

The new logotype is heavily influenced by Medium’s original slab-serif identity, which suggests that the last logo wasn’t performing as hoped.

Medium’s 2015–2017 logo was an oddly drawn, pseudo-isometric effort, combined with an inoffensive middle-of-the-road sans-serif; it always felt like an idea compromised by too much management. The new logotype is far more bold, and achieves a certain editorial authority.

2015–2017 logo (left), and the new 2017– logo (right)

The first success is that the logo now works in black and white (that’s logo design 101 passed). The second is that it honors the history of the brand—if a company this young can be said to have a history—without being a slave to it. The third is that the exaggerated contrast calls to mind the blackletter mastheads of credible publications like the New York Times, or the Washington Post, without actually embracing blackletter—it would be a foolhardy publication that adopted a blackletter masthead, with all its cultural connotations, in the current political climate.

The logotype is distinctly more modern than its predecessor, thanks to the sharp serifs and highly tapered shoulders. The only slight criticism might be levelled at the letter spacing: the uniform rhythm of the strokes and counters, coupled with the letter spacing, results in too little visual separation between the ‘i’, ‘u’, and ‘m’. It’s a minor gripe though, and this isn’t text that needs to be read in the conventional sense.

The new logotype (left), and the new monogram (right)

In addition to the logotype, Medium are using a monogram. This is the uppercase ‘M’ reversed on a black background. The monogram is intended for use where the logotype is too detailed—social media avatars spring to mind—and includes a couple of smart tweaks: the contrast is visibly reduced, and the serifs and apex are blunted; ensuring the shape does not feel weak, or blurred, at smaller sizes.

The logotype works well on the site, contrasting with the sans-serif used in the UI, clarifying the role of the UI labels far more effectively than the previous iteration. The monogram does a good job of taking a step back on individual post pages, letting the writer’s own personality dominate.

Of course, we have no idea what the brief was, or whether the work achieves what it set out to do, but the new logo indicates that Medium is finally ready to make the leap from fun SaaS, to serious publishing empire.


Complete Guide: How to Install and Set Up a WordPress Theme

Hey there, fellow WordPress user. I’m guessing you’re here because you browsed through the abundance of WordPress themes out there and picked the perfect WordPress theme for your fledgling WordPress site. Now, you’re budding with excitement and rearing to get started installing your chosen theme on your WordPress site. But…what do you do? How do you install a WordPress theme?…. Continue Reading

The post Complete Guide: How to Install and Set Up a WordPress Theme is written by Colin Newcomer and appeared first on WPKube.

5 Smart Alternatives to the Hamburger Menu

Screen space is a precious resource on mobile. To meet the challenge of small screen space while still making navigation accessible, designers often rely on hiding navigation behind the hamburger icon, a prime example of hidden navigation. In this article, we’ll see why hidden navigation creates bad UX and what alternatives are available for designers.

Why the Hamburger Menu Is Bad For UX

On mobile, visible navigation is used 1.5x more than hamburger

If you’re working on digital products, you’ve probably already read dozens of articles describing how the hamburger menu on mobile hurts UX metrics. The main downside is its low discoverability, and this is backed up by actual numbers. In qualitative studies, NNGroup found that hidden navigation is less discoverable than visible or partially visible navigation. This means that when navigation is hidden, users are less likely to use navigation. Hamburger menus drive engagement down, slow down exploration and confuse people.

So What Should We Use Instead?

While there is no hard-and-fast rule for mobile apps and websites, a general recommendation is to use either visiblethe main navigation options are shown in a visible navigation bar—or combo navigation, where some of the main navigation options are visible and some are hidden under an interactive element.

1. Tab Bar

If you have a limited number of top-level destinations in your website or app, a tabbed navigation might be the solution. When a menu is visible at the top or bottom, it’s basically advertising that a navigation is there and people are able to see the navigation options right from the start.

Tabs seem to be the simplest navigation pattern. However, a few things should be considered when designing this type of navigation:

  • Tab bar allows 5 or fewer navigation options to display.
  • One of the options should always be active and should be visually highlighted by, for example, using a contrasting color.
  • The first tab has to be the home page and the order of the tabs should relate to their priority or logical order in the user flow.
  • It’s better to use icons together with labels for each navigation option. Icons without labels work only for common actions, like a magnifying glass icon for search, and for interfaces that the users use frequently (e.g. Instagram).

Tip: In order to save screen space, the navigation bar could be hidden/revealed on downward and upward scrolling.

2. Tab Bar With “More” Option

When you have more than 5 top-level destinations, a practical solution might be to show the 4 prioritized sections and have a 5th element as a list of remaining options.

The design principles for this solution are basically the same as for Tab bar. There’s just one exception: the last element is the ‘more’ item.

The ‘more’ item can work as a dropdown menu or even link to a separate navigation page with the remaining sections. From the first glance this solution isn’t much better than the hamburger menu, since it also hides content and its label doesn’t say too much about what’s hidden behind it. If you correctly prioritize navigation options, however, a majority of your users will have 4 or 5 visible top-priority navigation options on the screen all the time so the navigation experience for them will be improved.

3. Progressively Collapsing Menu

Progressively collapsing menu, also known as the “Priority+” pattern, is a menu that adapts to the screen width. It shows as much of the navigation as possible and puts everything else under a “more” button. Basically, this pattern is a sophisticated version of the ‘Tab bar  + more’ navigation where the number of navigation options hidden behind the “more” menu depends on the available screen space. The flexibility of this solution provides a better user experience than a ‘static’ ‘Tab bar  + more’.

Image Credit: Brad Frost

4. Scrollable Navigation

Similar to the previous two patterns, this is another approach for longer lists. If you have a number of navigation options without a big distinction in priorities, for example music genres, you can list all the items in a scrollable view. By making the list scrollable you allow users to move from side-to-side.

The downside of this solution is that still only the top few items are visible without scrolling and all the remaining ones are out of the sight. This is, however, an acceptable solution when the users are expected to explore the content, for example news categories, music categories or in an online store.

5. Full-Screen Navigation

While with other patterns mentioned in this article, the struggle is to minimize the space that the navigation systems take up, the full-screen pattern takes the exact opposite approach. This approach usually devotes the home page exclusively to navigation. Users incrementally tap or swipe to reveal additional menu options as they scroll up and down.

This pattern works well in task-based and direction-based websites and apps, especially when users tend to limit themselves to only one branch of the navigation hierarchy during a single session. Funnelling users from broad overview pages to detail pages helps them to home in on what they’re looking for and to focus on content within an individual section.

Full-screen navigation in Yelp

Using full-screen navigation, designers can organize large chunks of information in a coherent manner and reveal information without overwhelming the user. Once the user makes their decision about where to go, then you can dedicate the entire screen space to content.


With navigation patterns for mobile, there isn’t a one-size-fits-all solution; it always depends on your product, on your users, and on the context. However, the foundation of every well-designed navigation is information architecture: clear structure, priorities, and labels based on your users’ needs. Helping users navigate should be a top priority for every app designer. Both first-time and returning users should be able to figure out how to move through your app with ease.


How To Build A Better Website

What’s the first thing you think of when you begin a website project? What are your first steps? Are you hunting for design inspiration on step one, or soon thereafter? Maybe, you’re more of the developer type. You might be exploring code and functionality needs soon after your first consultation meeting.

Regardless, if you are more focused on design and code at the start of the project, then you’re heading for disappointment.

I can promise you, your fancy new website will fail. It will fail not because you’ve done a bad job. You’re probably more than capable of building beautiful masterpieces that your clients often rave about upon delivery.

No, you and your new website will fail because you’ve ignored the purpose, the sole reason for the website’s existence.

Yes, stunning design and clever code are important, but they’re not the make or break success factor you and I have been conditioned to think they are.

It is impossible for any website to succeed without a deep understanding of its site visitors.

When you get to the core of any website, it’s not built for the designer, it’s not even built for the client. It’s built and it exists to fulfill the need of the site visitor.

You Need A Plan

Failing to plan is planning to fail.

You’ve heard it so much, you probably cringe at the cliché. It’s so ubiquitous a saying it’s easy to ignore its importance. But, it’s true.

Without a plan, you’re relying on your gut instead of research and real customer insight. If you do not take the time, if you do not invest in research and strategy, you should reconsider your reasoning for even building a website.

Now, I could be wrong. Maybe your gut is incredibly intuitive, but if I were you, I’d hedge my bets with some solid research.

Building Your Plan

A website is more than a digital brochure, at least if it’s going to be successful, it should be

A website is more than a digital brochure, at least if it’s going to be successful, it should be.

For any business, their website is the hub of all their marketing efforts, on and off-line, whether they realize it or not. It’s often the first-touch point, and potentially the only touch point, with the customer.

81% of shoppers conduct online research before buying , and if your client is in the B2B market that number jumps up to 94%. With those kind of numbers, it’s imperative you, and your client, understand how to communicate with the ideal customer.

Defining Goals

You need to set measurable goals for the website.

“Drive more traffic” or “generate more leads” isn’t specific enough. Your goals need to be specific, measurable, timed and achievable.

For example, if one of your goals is to drive more traffic, you can make that a specific goal by defining:

  • how much more traffic;
  • generated by what keywords;
  • what quality of traffic;
  • over what period of time.

Your goals will be your guiding light for the website. They will guide you through your strategy sessions, your initial build, and your client’s long term marketing initiatives.

They’ll allow you to identify what was a success so you can replicate what worked. They’ll also show you where you missed the mark and by how much.

Zig Ziglar said it best:

How can you hit a target you can’t see? Even worse, how can you hit a target you don’t even have!? If you don’t know where you are going, you will probably end up somewhere else. You have to have goals.

Customer Personas

Even the best plan can go sideways if you neglect the primary purpose of your client’s website. Odds are, efficient communication wasn’t at the top of your goals list. It should be.

Before any other goal, your client’s website is first a communication tool.

Yes, your website can achieve a wide set of goals, but not if you fail at communicating with the customer. To effectively communicate, you need to understand who you are trying to communicate with, and creating a set of customer personas will help you do that.

A customer persona is a detailed profile of a unique individual who will represent a part of the customer base. You should create a few personas depending on the variety of the client’s customer base and business size.

Build customer personas with market research and insights from the client’s very own customer base. The goal is to develop an understanding of who their customers are.

You want to identify each persona’s interest and specific needs.

You will begin to see each persona as a very real and unique individual. Each persona will have their own set of specific needs and challenges. This will allow you to tailor your content, messaging, landing pages, and strategy for each persona group.

For example, one of your personas could be a 40-45 year old male who is:

  • a husband, father of two;
  • works approximately 50-60hrs per week as an engineer;
  • tech savvy with a bachelors degree in computer science;
  • researches options online before making a purchase;
  • average household income of $110k a year;
  • quality is more important than price;
  • prefers email communication over telephone;
  • is active on reddit, twitter, and linkedin but not facebook, snapchat, or instagram.

What’s the Point?

Well, with the example above, you can now know that price isn’t an issue for this visitor, but time is. The visitor is comfortable with researching, online and prefers to be well informed before making decisions. You should gather quite a few more insights and build a more robust profile, but even with this, think of the “what ifs”.

Your client’s website needs to be a tailored experience for each of your discovered personas, so gather as much information as possible.

Imagine if you had made pricing the dominant content strategy of your landing page with very sparse, remedial content. Make that faux pas and you could be saying goodbye to your ideal customer. You’ll miss the mark, and no amount of design will save the day.

Your client’s website needs to be a tailored experience for each of your discovered personas, so gather as much information as possible.

Buyer Journey / CTA Strategy

Once you have a solid foundation for who the ideal customer is, you will need to address where they are in the buying stage. Not everyone who arrives on your client’s website will be ready to buy.

A large segment of the site’s visitors will be researching their problem, unaware of what solutions exist. Another segment will be aware of the solutions and they’ll be researching feature options.

A third segment will be the motivated buyer who is actively looking for a vendor to fulfill their need.

Every customer goes through a process of awareness, consideration and decision, known as the buyer’s journey.

Don’t make the mistake of only targeting the motivated buyers. Most customers will purchase from the vendor who educated them during the earlier stages of their buyer’s journey.

Increase your sales potential by offering relevant content and calls to action for each stage of the buying cycle.

1. Awareness Stage

You want to describe the problem and industry solutions.

Customers are trying to figure out what they need. They know they have a problem, but they’re not aware of what types of solutions exist. They don’t know enough to have specific questions.

Avoid feature based content that is specific to your client’s unique solution, that’s too granular. The visitor has to “buy” the industry solution before they’ll know enough to understand what makes your client special.

You should aim to design and build landing pages for the site visitor who is uninformed and stepping into the market for the first time. They are green, fresh off the boat and unable to even speak the language yet.

2. Consideration Stage

Customers at this stage are informed and familiar, if not well versed in the industry’s solutions. This customer has bought the industry solution and is researching features.

Give the customer everything they could need. Answer every question they may have about your client’s features, support, warranties, and so on.

3. Decision Stage

This customer is ready to buy. They’re sold on the solution. They know the features they need. This customer is looking for the right vendor to buy from.

Make it clear how they can buy and make it as easy as possible. Answer any question and remove the obstacles the customer faces when deciding to purchase.

Content Strategy

Once you have a good understanding of your client’s customers you can begin to form the content strategy.

It might be easier to mention the most common mistakes you’ll be susceptible to your first time around. Sometimes, knowing what not to do makes it easier to define what you should do.

1. Don’t Let Your Client Talk About Themselves

Customers are selfish. They don’t care about anyone else. They care about their own needs. So, don’t say what you want to say, say what the customer wants to know. If you need to educate the customer, you can do so by first addressing their initial concern. Then pivot to what you need them to know.

2. Never Create Content Inside a Vacuum

Avoid random content. Every piece of content you or your client generates needs to be done as part of an overall conversation.

Consider all the content pieces like wooden planks on a suspension bridge. Each plank fulfills the purpose of helping an individual cross from point A to point B. Do the same with your content. Stay focused on what is necessary for the customer progressing further down the buyer’s journey.

3. Stop Trying to Sound Smart

Drop the “marketingese” and the industry lingo. Nobody likes to feel stupid. All you’re achieving with your acronyms and large vocabulary is alienating the customer. Stop creating friction between you and them. Write so that the customer feels smarter because of your content.

Your website is not a vanity exercise, it’s a tool to get the job done.

The most important thing you need to keep in mind when generating content is that you are writing for one person. Even if you have 100,000 site visitors a day, you are having 100,000 individual one-on-one conversations. The 100,000 visitors are each interacting with your client’s website individually. You’re never talking to a crowd.

Using Your Plan

Because you’ve done all this planning up front, you’re now ready to start your website. You should have a clear understanding of the website’s goals and how to achieve the desired results.

You’re now ready to build your new website.

How Your Plan Helps Site Mapping

Site mapping, also known as site architecture or site structure, is the process of defining what specific web pages are needed. Here you define how the pages interact with each other, and what basic functionality is needed for each web page.

Your planning enriches this process. The goal is to map out what is needed for the website based on your understanding of each customer segment.

Your sitemap will define the following:

  • all the pages needed for the website;
  • the website navigation and behavior;
  • how each page interacts with the other web pages;
  • the expected entry points for each customer persona and buyer’s journey segment;
  • the expected user interaction for each web page for each persona and segment;
  • the expected exit point for each group.

In addition, every web page needs to have a call to action (CTA), or conversion point. Your customer personas and buyer’s journey segmentation will help you define your CTA’s and which will be relevant to your website traffic.

How Your Plan Helps Wireframing

Wireframing is the process that maps out what content goes on each page. Your wireframes will define the page layout and required functionality for each web page.

Most wireframes stop there, but you can go much further than content blocks filled with dummy content. Your planning allows you to dive deep during this stage and plan your intended user-behavior for each of your customer segments.

For each individual page, you can now ask yourself:

  • how will each customer persona and buyer’s journey segment interact with this page?
  • how did they arrive on this page? What content or action preceded their arrival to this page?
  • what is each segment’s expectation for this page? What are they hoping to get on this page?
  • what are your intended exit points? What does each segment need from this page to leave satisfied? What should their next action be?

Your wireframes will map out what content goes where. They’ll also define what it will say, and how it will interact with your other page elements.

You will also create your calls to action (CTA’s) with the wireframes. Define how each CTA will display, what comes before, what comes after and the language used.

How Your Plan Helps Design

Finally, the fun part, design!

Think of everything we have covered up until now. All that research, all that planning, and you’re just now getting to design. As you should expect, this isn’t a free-for-all either. Your planning and research will guide your design as well.

Good design is design that gets out of the user’s way.

Your website should establish trust with the site visitor. Familiarity is your best bet. Make sure your branding fits the user expectations, so avoid your personal preference and fit within your market. If you’re designing for a lawyer, don’t make them look like the next hip startup.

Your website is not a vanity exercise, it’s a tool to get the job done. That job is facilitating clear communication. It should direct customers to the solutions they are hoping for and expecting to find.

It’s incredibly seductive to ignore your research and give in to your personal aesthetic. Yes, design is your bread and butter, and your work should reflect what makes you special. But, I can not stress this enough: the website is NOT for you, or even for your client. Your website is for your client’s customers. It is their tool to accomplish their goal, not anyone else’s!

Unless your research has directed you otherwise, you need to restrict your design to follow conversion-centered design best practices. Avoid unnecessary design trends that do not add contextual value to the customer. Keep the navigation clear and in its expected location. Your website should function like road signs, if they’re not clear, chaos will ensue!

The Take Aways

Congrats, you’re now miles ahead of most of your competition. Most designers and developers go straight into designing and building their client’s website.

Knowing what you know now, could you imagine? Would you ever consider jumping straight to the design without all your new found insights?

Develop your plan. Follow these web design best practices. Put them all together. Do the work each step requires. I promise you, if you do the process, your website will be much more successful than it could ever be without it…but at this point, that’s a no brainer, right?


Popular Design News of the Week: August 14, 2017 – August 20, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Dangerous Design Trends 2017


Adobe Bought Sketch?!


Google Allo is Now Available for Desktop… but Who Cares?


It’s Time to Kill the Personal Website


The FREE Definitive Guide to Adobe XD


10 Mistakes in Landing Page Design


PHPBot: The Ultimate PHP Snippet Bot


MadeWithoutCode: A Platform for Startups Made Without Code


Gutenberg is Coming to WordPress


How Google Designers Adapt Material


4 Great Applications for Creatives




Brandmark – The Deep Learning Logo Maker


‘Really Good UX’ – A Library of Screenshots for UX Inspiration


Pointy Papers: A Collection of Minimalist Wallpapers in Every Resolution


Designs of the Year 2017 Shortlist


A Gulp Workflow for Frontend Development Automation


Site Design: Kilokilo.agency


‘Fail Fast’ in Software Design is a Myth


How to Learn UI Design from Zero-Basis


Tinder’s Logo Transformation has Users Swipe Right


How Storytelling Can Improve your Website


The Story Behind the Anti-Nazi, Anti-Trump Symbol all Over your Feeds


Site Design: Goodstuph


Tech’s Damaging Myth of the Loner Genius Nerd


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.


Comics of the Week #403

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Sure, blame the designer

No rest for the married


Olympic style feedback

Can you relate to these situations? Please share your funny stories and comments below…


5 Techniques for Spotting Mistaks Before They Go Live

Launching a new website can be exciting and nerve-wracking at the same time. You want to show off what you’ve been building, what you’ve learned, and the creative solutions you’ve come up with. You can already taste that first celebratory taco. You go live.

At first, you get a lot of comments from your friends saying, “Hey, that looks great!” Then the bug reports come in. A feature isn’t working as intended. A bit of CSS is playing merry hell with the live content in ways you couldn’t foresee. A link is broken. And worst of all: you have typos. So many typos.

Okay, most of the time, it won’t be as bad as all that. Veteran designers and developers usually have processes in place to reduce the amount of errors that go live. New designers usually build smaller sites, so the number of errors is reduced in any case. Still, if you’re new to web design, and you want to spend as little time fixing things post-launch as possible, we can help.

1. Follow a Checklist

As you are the designer and/or developer, you are the first and last line of defense against mistakes. However, even the best of us can just plain forget things. One of the easiest ways to avoid this is to use a pre-launch checklist for every website you build. The checklist would include things like making sure all of the links work, making sure the contact forms work as intended, making sure your hosting is set up right, and so on.

You can write your own checklist, and as you develop your own way of working through projects, you might want to. In the meantime, you can adapt any number of pre-made checklists to your projects. Here are a couple to get you started:

And there are a few more here: 45 Incredibly Useful Web Design Checklists and Questionnaires

2. Get More Eyeballs

For clarity’s sake (and because this is the Internet) these eyeballs should remain attached to their original owners. What you want to do is get some people who aren’t experts in computing, be they relatives, friends, or passing salesmen, and direct their eyeballs at your design, before you launch. Get some basic user testing in by asking these people to perform basic tasks on your site.

This has the double benefit of providing you with some usability testing data, as well as an easy way to find out if anything important is broken. After they’ve followed the main calls to action, ask them to click around on anything they find interesting, to help you check other links.

3. Hire Professional Eyeballs

This may not be feasible for projects with smaller budgets, but if you have the money, it couldn’t hurt to hire a professional or two. For example, you could hire another designer to check for common bugs, peek at the source, and so on. Have them test how the layout handles on their devices, and give you feedback.

If you want to take this further, there are services that will test your site under myriad conditions, in all sorts of browsers, on all sorts of devices. Given that most of us lack a browser testing lab, and these services generally aren’t expensive, they can be worth it.

Here are some of the more popular options (as defined by Google search results):

Lastly, consider hiring a proofreader and/or editor, if your website is text-heavy. They can drastically help you to improve the quality and clarity of your writing, as well as help you to avoid the dreaded typos.

4. Take a Break Before Launch

One of the biggest contributors to screwing up is stress. Launching websites can be stressful, especially if you’ve been working on the same thing, day in and day out. For future projects, it might be a good idea to schedule in a break before launch time. And I mean a proper break, as in one day as a bare minimum. Giving your brain time to think about other things is a known and proven tactic for creativity, but it also works for spotting mistakes.

Take that time off, come back, and run through your pre-flight checklist when you’re rested, and can think straight. Your brain, your heart, your users, and your clients will thank you.

5. Validation and Linting

If you’re developing the site yourself, you can take advantage of services that help you clean up, or “lint”, your code by pointing out problems in your HTML, CSS, or JavaScript. How you do this will depend on what text editor you’re using. Just about every major text editor (Sublime Text, Atom, Brackets, etc.) has a number of plugins to help you with this. There’s no one right tool for this job, so you’re going to have to do some Googling.

You should also run your HTML and CSS through the validating services provided by the W3C. These services won’t catch every bug, but they can help point out potential problems in your markup.


So what happens if you do all of these things, and still miss a few things at launch? Realistically, the world just keeps on turning. We’re imperfect creatures, and we’ll never get everything right, all of the time. And that’s fine. When mistakes are inevitably spotted in your newly-launched site, fix them fast and move on.

Constant perfection will have to wait until our robot overlords get here.


4 Ways To Design a Perfect Split Screen Homepage

One screen divided in two.

The split screen technique has long been known in the film industry, with early examples dating back to the silent movies days of the early 20th century, and it is still a popular device in by film and tv today.

A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. A scene from the film “Scott Pilgrim vs the World”

However, this is a relatively new technique for the web design industry. Split screens only became popular around mid-2016 and now we have more and more websites which use this design pattern. There are a few reasons why this design pattern became so popular:

  • It has a nice aesthetic quality. When executed correctly it can offer users a wonderful viewing experience.
  • It’s a good choice for responsive frameworks. Split-screen design can be adapted for a variety of screens, even small ones. When it comes to smaller screens, such as mobile displays, the panels can be stacked.
  • It helps guide navigation. Using simple design techniques, you can draw the user’s attention to a specific part of the screen or encourage them to click.

When Split Screen Works The Best

Split-screen is especially good when you have two things to promote. For example, when a site offers two entirely opposite variations. This approach allows designers to give prominence to both things and allow the user to quickly select between them.

One screen, two messages in Dropbox Guides

When You Should Avoid Split Screen

Split-screen designs don’t expand well as the content grows, therefore it is not recommended to apply them to content-heavy layouts. It’s important to keep the screens simple because complex split screens make the UI look overloaded with information. That’s why split-screen layout would be a perfect fit for minimalist website designs.

How to Decide if Split Screen is Good For You

If you’re considering a split-screen technique for your website, I advise you to ask yourself a few questions:

  • Is it suitable for your content?
  • Will there be enough negative space to make the layout work?
  • Will your users appreciate the layout or it will confuse them?
  • Will it be OK to split your users’ attention in half?

The most important thing to keep in mind that content is king and split-screen should be a simple way to deliver your message to people.

Design Techniques For Split Screens

1. Pair Vibrant Color and Dramatic Typography

Thanks to Flat and Material Design, vibrant colors and dramatic typography are big trends now. Vibrant colors are visually stimulating and dramatic typography enhances the text content. Simply combine the two and you will create a visually interesting design. Baesman has done this masterfully. They gave equal importance to both elements while, at the same time, allowing the user to choose between them quickly.

Bright colors and interesting typography pairs can add interest

2. Draw User Attention to the CTA Button

Much more than a simple graphic trend, splitting the screen into two distinct parts provides an original way to guide the user through your site. It’s a great option when you want to create a bigger focal point for calls to action. In the example below, you can see how negative space creates a vertical divide to give equal weighting to two different options.

Vertical divide allows emphasis on two different CTAs without favoring either

3. Create Visual Flow Between “Screens”

When split screen represents a single object, it’s important to establish a connection between content containers. One possible way to do that is by using a color. Simply duplicate a distinct color to establish visual flow between two screens. This works particularly well with a brand color or hue with a lot of contrast. Using color it’s possible to communicate a stronger connection between two pieces of content.

Another possible way to create a strong connection is layering a single element such as text copy across screens:

Overlapping text connects two screens

Last but not least you can use a colored overlay for this purpose:

Consider the left part of the screen

4. Use Animation To Encourage Users To Act

Fine animation and interactive effects encourage users to click. Look at the design used for the “Chekhov is Alive” site below. The design begs you to click to find your character.


It takes approximately three seconds for a visitor to make a decision regarding your website. Consequently, your layouts should always be visitor-friendly if you want to reduce bounce rates. Split-screen technique can help you with that. Split-screen designs are a fun, functional, and responsive way to create an engaging design.