Web Design & UX

10 Design Principles That Will Dramatically Boost User Experience...

10 Design Principles That Will Dramatically Boost User Experience…

This article was contributed HubMonks.

A strong user experience (UX) is instrumental in your online marketing success. Increased engagement results into increased leads, which translates into greater revenue.

In this article we will specifically dissect the design principles that influence the extent to which your web page performs for users.

Page Objectives

 

It is not enough to say that you want an excellent website with a good user experience. See the difference between UX and UI here. It is vital to define what your visitors and your business should achieve from the web page. It should be understood that your goals and the audience’s goals may differ. Your visitors’ goals are about finding information or getting a downloadable eBook, while your goals may include increasing engagement, form fill-ups or downloads. The trick is to strike a balance to create a win-win situation for both users and your business. Your goals should help you in establishing the following:

  • Who the target audience are?
  • How to craft effective content?
  • How to organize the website?
  • How to measure the effectiveness of the website?

In order to understand marketers’ vision it is important to have the key team-members of the design team while discussing online goals in an organization.

User Journey Mapping

User-journey mapping is a visual or a graphical representation of the overall storytelling from the user’s first touch point with your organization, to building a perspective around your service or product or brand, and communicates with them through various mediums. This process is very narrative in nature and requires a text-based approach to describe the nuances of the customer experience.

The story is told from the customer’s perspective, but also lays importance on the important intersections between user expectations and business requirements. Here are the key points that you will have to include in user journey mapping

  • Visual demonstration of the journey.
  • Understand user behaviour on the existing website analytics.
  • Understand the interactive elements that will help them achieve their goals.

Visual Hierarchy

10 Design Principles That Will Dramatically Boost User Experience...

Source: http://edgemm.com

The above picture clearly defines the purpose of visual hierarchy. Visual hierarchy covers almost all the considerations of design; however it tends to give importance to the vital elements of your web page where you want to draw the user’s attention. A robust visual hierarchy also groups similar elements and organize them into meaningful patterns to carry an effective communication process with the viewer. How does a designer actually create a good visual hierarchy? Well, they just need to look for that in their inventory! Here are the key components:

  • Size: Using size as a hierarchal tool is a great way to guide them to the key components of your web page.
  • Colour: Colour is a great organizer and also infuses personality. Bold and contrasting colors will demand attention.
  • Contrast: When audience see something on the web page that is a deviation from the others, they want to know more about it. You could differentiate an important part of the page from the core content of the page with the help of contrasting colors.
  • Proximity: If there are multiple sections in a web page, how you place related objects of a section is what defines a good proximity. It helps in clearly associating similar content.
  • Density and Whitespace: When you populate a section of the webpage densely, it looks unfavourable in terms of UX. Similarly, keeping too much space between elements will break the link. So, the elements need to be placed and separated with whitespace to differentiate which elements are related and which aren’t. 

F-Pattern Scanning

Visual signs in text such as headings, sections, bolding help users take shortcuts while scanning through the web page and they don’t need to read everything. When they don’t find these signals, they are left to help themselves. Users create their short while scanning the web page and make out if they would like to engage or not. According to this study by Nielsen Norman Group, the pattern of this scanning behaviour forms the shape of the letter “F.”

10 Design Principles That Will Dramatically Boost User Experience...

Source: Monsoon Consulting

If you want to ensure that your users’ attention is drawn towards the most important elements of the web page (Calls-to-action, forms, images, videos), it is highly recommended to follow an F pattern and place your elements accordingly. 

Responsive Design

10 Design Principles That Will Dramatically Boost User Experience...

Responsive design is like a jigsaw puzzle! Responsive web design requires movement of various elements of the page that changes the initial design. Organizing elements to fit could be a great challenge with responsive design as larger pages and their elements will have to shrink to fit on narrow platforms for a mobile phone or tablet. We have listed some vital considerations below:

  • Consider a mobile-first strategy.
  • Include a hamburger collapsible menu (or similar) in case of multiple items.
  • Optimize image for all the types of devices (desktop, smartphones, tablets).
  • Optimize the content for mobile devices as the content for desktop will occupy too much space.
  • Check the loading speed once the pages are live and check if certain design components are reducing the load speed.
  • Implement Google’s AMP (Accelerated Mobile Pages) that is meant to optimize the content load time on mobile phones.

Calls-to-action

10 Design Principles That Will Dramatically Boost User Experience...

Calls-to-action play a vital role in boosting your website conversions. A single call-to-action is empowered with the responsibility to attract attention and later get clicked on. These two factors will race your website towards a high ROI. So, what are the key principles of a call-to-action that designers need to consider?

  • Size: Decide the size of the call-to-action by ensuring that it gets noticed amongst the other elements of the web page. If the call-to-action button should be placed below a form, the size should be equal to that of the fields of that form.
  • Text: If the marketer has decided on the text for various pages and sections, they should be communicated with the designers with the copy. This will help them in determining the ideal size.
  • Colour: Colour plays 70% of the role in attracting the viewers’ attention. Ensure that it stands out from the rest of the section by smart usage of colours.
  • Button Shape: If there are various sections and smaller objects in a single webpage, how smartly you define a button by carving its shape is important. Ensure that the shape stands out from the rest of the objects.
  • A/B Testing: The best practice to gauge effectiveness of a call-to-action is by creating different variants of colour, text, and fonts. Monitor which CTAs are more successful. At HubMonks we insert the CTA from the HubSpot marketing tool for all our HubSpot COS web development projects so that clients are able to measure the button’s performance. 

Forms

10 Design Principles That Will Dramatically Boost User Experience...

There is a huge difference between forms and advanced forms that boost UX. Even forms have various design principles that help users understand its hierarchy and helps designers utilize less space with all the important fields included.

  • Label alignment helps users identify the field with its corresponding label. Proper alignment also consumes less space that ultimately boosts the psychological factor to get form-fills.
  • Placeholder text is a great innovation in forms, wherein the user is able to see the label inside the field which disappears once the user brings the cursor on the box.

Cognitive Load

 10 Design Principles That Will Dramatically Boost User Experience...

Cognitive load in web design refers to the amount of thought process a person has to give while they are engaged in the buyer’s journey. The cognitive load theory is differentiated in two types for user experience:

  • Intrinsic cognitive load: It refers to minimal usage of copy so that the user is not hampered from completing a specific task on the web page.
  • Germane cognitive load: It refers to the effort devoted to process information and how user understands the pattern of the information by mentally organizing categories of information and any relationship among them.

Hick’s Law

10 Design Principles That Will Dramatically Boost User Experience...

Source: My Site Auditor

Designers could explain this law to the marketers so that users are not overwhelmed with too much information or options. Hick’s Law tells us that the time taken by a person to make a decision depends upon the number of choices available to him or her. See here for more psychology principles.

Interaction Design

10 Design Principles That Will Dramatically Boost User Experience...

Source: colossom.com

Interaction design is dedicated to creating engaging interfaces with prediction about the user behaviour. It is essential to know how users and technology communicate with each other. Here are some questions that you should consider when designing for the best interaction:

  • How users can interact? Which parts of the website will be interacted by the user with mouse, finger, or stylus?
  • Which clues will make it easier for the users to interact? The colour, size, shape, text will differentiate the objects and helps users in understanding these interactive points.
  • Is information chunked into seven items at a time? Users tend to keep only five-nine items in their short term memory.
  • Are various sections of the website differentiated with the help of edges and corners? Elements like menus need to be differentiated by these design considerations. Moreover, they form a boundary stating that the finger or the mouse cannot be moved beyond that boundary.

Conclusion

The whole concept of user experience is centered around having a clear understanding of the targeted users, their needs, their values, abilities, and their limitations. It takes into account your business goals and objectives. The best practices of UX works towards promoting the quality of how the user interacts with your website and the perceptions of the product and all related services.

When you are running a marketing campaign, you tend to pull interested prospects and make them a part of your marketing funnel. At every point of this funnel, your users need guidance to move smoothly towards their journey with your organization. The points discussed in this article will help you create an exceptional user experience that helps them achieve their goals and boost your business initiatives.

Dev is the Head of Marketing at HubMonks, a HubSpot content optimization system (COS) partner for major inbound marketing agencies and brands. You can contact him on Facebook and Twitter. Top photo by PhotoSpin.

10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience...

Launch-School

10 Best Free Online Web Development Courses

This article is written by Henry Rise, the CEO of ThemeRex, Power Elite Author on Themeforest, with 140+ WP themes.

When newbies ask about the best places to learn code online, the correct answer is… it depends. It depends on many different factors.

Your background is important, what you want to get out of the experience, and what your end goals are, make different resources better or worse fit for you.

But what skills to learn? We suggest learning HTML and CSS first. You should also pick a programming language. Any programming language works, most people choose JavaScript, but we think Ruby is a better idea for a first programming language to learn. Don’t overanalyze, just pick stuff and learn it. And have fun!

10 Best Free Online Web Development Courses

We don’t necessarily suggest using all of these resources. Pick some of them and give them a whirl. Some you may love, others you may hate. Worst case scenario, you’ll waste a bit of time and learn what doesn’t work for you.

Launch School

This program isn’t for everyone. That’s why you can take their free prep courses and then make a decision. No matter your experience, you should start with the free prep courses, and get a feel for the format. If you are able to finish the prep courses and enjoy that experience, you may consider registering for paid courses. If you can’t finish the prep courses or didn’t enjoy the experience, then you probably shouldn’t take the Launch School program.

In order to really understand any tool – Rails, Angular, React, etc – you have to start with the first principles. First, you have to learn basic problem solving with a programming language. Next, you have to learn the intricacies of that language. Then, you have to learn web development, which includes HTTP, front-end vs back-end, SQL, relational databases, etc. Finally, you can start to peel back the conventions in a library or framework.

In short, this school program is geared towards those who are serious about getting a job with a time horizon of 12-14 months for the transformation.

Visit Website

Build Your First Laravel App

Build-Your-First-Laravel-App

This is a free 5-day video course with lessons that will teach you how to build your very own, first Laravel PHP web application, step by step. They will walk you through the process and show you how to code everything. There’s no guesswork for you, and each lesson is short and easily-digestible.

Visit Website

Bento

Bento

If you don’t know where to start, Bento offers a free full stack web development curriculum created by top engineers. Deep dive into the tech you’re passionate about. Bento found the best tutorials on over 200 different web technology topics. Share your own finds and tutorials on learning the newest technologies and see what other engineers are excited about.

Visit Website

Code4Startup

Code4Startup

Leo Trieu designed and coded the Code4Startup platform with Ruby on Rails in 3 days only but it took him almost 2 and half months to create just 5 hours of video for his very first two educational courses ever, Zero and Ninja. Why? Because he is not a native English speaker and he had to practice and repeat hundreds of times. But he kept trying and never gave up. He bootstrapped this startup with a dream of educating millions people from around the world. Code4Startup is not just about learning how to code, it’s also about inspiring people to create something meaningful, something they are excited about.

Visit Website

CodeAvengers

CodeAvengers

Code Avengers offers classes for web designers, web developers and software engineers. At Code Avengers you learn by doing. Learn from step-by-step instructions combined with 1000s of code challenges, videos and quizzes with support from expert educators and an enthusiastic community of learners. You also build your portfolio. You’ll start off learning to build simple apps and websites, but quickly progress to building real-world applications you can show-off to friends and future employers. Whether you want to land your dream job, start your own tech company, or build technology that changes the world, the Code Avengers team are dedicated to helping you get there faster.

Visit Website

Codecademy

Codecademy

Codecademy is an education company. They’re committed to building the best learning experience inside and out, making Codecademy the best place for their team to learn, teach, and create the online learning experience of the future. The company is rethinking education from the bottom up. The web has rethought nearly everything – commerce, social networking, healthcare, and more. They are building the education the world needs – the first truly net native education. They take more cues from Facebook and Zynga in creating an engaging educational experience than they do from the classroom.

Visit Website

CodeCombat

CodeCombat

CodeCombat was created to give learners the feeling of wizardly power at their fingertips by using typed code. As it turns out, that enables them to learn faster too. It’s like having a conversation instead of reading a manual. They want to bring that conversation to every school and to every student, because everyone should have the chance to learn the magic of programming.

Visit Website

Codementor Learning Center

Codementor-Learning-Center

Codementor connects you with expert developers for live 1:1 help. At first you post your request. Get help for 800+ categories including JavaScript, Ruby, PHP, CSS/HTML, iOS, Android. Advanced topics include big data, machine learning, and more. Then you connect with a Codementor. Instantly connect with an online expert or schedule for a later time. Mentor’s rate starts at $10 for a 15min session. Get 1:1 expert help. Work 1:1 with an expert mentor for debugging help, code review and pair programming via screen sharing, video, and text chat.

Visit Website

Coder Camps Free HTML/CSS

Coder-Camps-Free-HTML-CSS

Since 2013, Coder Camps has been preparing students for successful, rewarding careers in the field of software engineering. Through accelerated and immersive courses led by expert instructors, their students become accustomed to thinking like a developer and adapting to the dynamics of working on an Agile software team. As technology continues to evolve at an increasingly rapid rate, students need more than a kick-start to a good job, they need a persistent career development partner. That’s why Coder Camps graduates are encouraged to return as often as needed, free of charge, to refresh their knowledge, learn new technologies and find new opportunities. Their coding bootcamp centers on the needs of today’s hard working software teams and hiring managers. From learning to code, creating a fully-functional web application, interview readiness training and so much more, their focus is preparing students to meet the demands of employers.

Visit Website

iLoveCoding

iLoveCoding

iLoveCoding provides the simplest path to becoming a Front-End and Full-Stack Developer, they provide Video Based Training + Mentorship for their programs. They focus on Javascript Stack and its related technologies. Training is self-paced, and mentorship is available online via Student Area + Office Hours. iLoveCoding is a coding bootcamp alternative but better in value (cost), in effectiveness (they keep it real, vs hype or pushing things down your throat).

Visit Website

Summary

I hope you will pick out the resource that will teach you all necessary skills to start developing your templates, websites, applications and making money on your passion. Have you already tried any of them? Do you have any additions to this list? Please share them as well as your success stories with us at the comments section. If you have any additional questions, please don’t hesitate to reach out and ask.

More? Browse 35,000+ Courses on Udemy

From programming to photography, Udemy has it all! Check out their online courses.

Udemy Courses

Have any other free (or paid) online web development courses you recommend? Let us know!

10 Best Free Online Web Development Courses 10 Best Free Online Web Development Courses 10 Best Free Online Web Development Courses 10 Best Free Online Web Development Courses 10 Best Free Online Web Development Courses 10 Best Free Online Web Development Courses
Netflix Landing Page Design

The Anatomy of a Perfect Landing Page for Your Business

This is a guest article contributed by Matt Janaway.

Having a landing page exit-rate that stinks can be quite depressing. This is especially true if you and your team spent blood sweat and tears to create a professional-looking landing page, only to see your audience ignore your call-to-action buttons.

The thing is, there is more to a high-converting landing page than just its looks. Relying on your page’s aesthetics alone isn’t going to cut it since it can only do so much for you.

If you want to create a landing page that’s going to bring home the bacon, then allow me to share with you the anatomy of a perfect landing page for your business.

Let’s hop right in.

1. Compelling copy.

Just because your copy reads well and it doesn’t have any typos or grammar mistakes, doesn’t mean that it is enough to compel your audience to take action on your CTA’s.

Compelling copies have psychological elements embedded into them like social validation, tapping into the audiences’ fear of loss, etc.

These elements are often what compels the audience to take action.

2. Sprinkle your call-to-action buttons in strategic places.

Where these strategic areas are specifically, I’m afraid I won’t be able to tell you. Simply because these things vary depending on the dynamics of the type of landing page that you’re using (yes, there are different types of landing pages), and your design among other things.

However, I can tell you that as a general rule, it is a good practice to add your CTAs in areas where you’ve provided massive value to your readers like the image above, taken from Netflix. That way, if they are convinced that they need your help, then they can contact you immediately without having to look for your CTA buttons.

Adding a floating CTA also works. A good example is Furl.co.uk’s “Talk to Us” button. A quick visit to their website and you will see that no matter where you’ve scrolled at the page, their “Talk to Us” button is still highly visible because it is floating.

3. The relevance of the page is apparent.

Those who arrive on landing pages often have a goal in mind. That is why you need to convey to your readers immediately that your page is relevant to what they’re looking for, otherwise, they might think that they’re in the wrong place which will then cause them to click away.

A perfect way to deal with this is to make sure that your title directly addresses their concerns. Since your title is one of the first things they’ll see immediately after arriving at your page, the issue of relevance no longer becomes a threat.

4. No distractions.

Busy Web Design

It is ideal to use one type of call-to-action per landing page. That way, your audience doesn’t end up getting confused or distracted from doing the primary goal that you predetermined when you created your landing page.

That being said, do not ask your audience to share, buy, or contact you all at the same time and be careful not to distract your visitors from your main goal. Here’s an example of a homepage which distracts the visitor from completing a goal (in this instance, a purchase).

Just pick one type of CTA then sprinkle it strategically across the page. Also, make sure that your CTA buttons “pop.” If they aren’t highly visible, then your audience might not see them.

5. Carefully crafted headlines.

Your headline needs to be clear, concise, relevant, and punchy. These characteristics will ensure (somewhat) that your audience will continue reading the copy on your landing page.

See here for some tools for optimizing headlines and the ultimate list of headlines.

6. Add testimonials.

Malibu Web

Adding testimonials on your landing page will skyrocket its credibility. What makes it so effective is the fact that testimonials are not sales pitches, and they come across as unbiased.

To make the testimonials on your landing page look more credible, add your client’s profile picture and a short information about who they are.

At Marketing Labs, we include our clients’ name, their position in the company, and their business names. This is how our testimonials section looks.

When your prospect customers see the testimonies shared by your previous customers about how positive their experience is with you, it becomes a lot easier for them to trust you and do business with you.

7. Use images or videos that are relevant to the copy.

Countless case studies are showing that images and videos can boost your conversion rates. The thing with images and videos is they can help your audience create a clearer mental picture of the ideas that you want to convey.

Of course, the ideas that we’re talking about here are meant to influence them to take action on your offers. This effort from Spotify is excellent and encapsulates the impression of peacefulness.

Music Landing Page

When your audience can create a mental picture of themselves experiencing happiness, convenience, and joy (among other things) because of your product, it becomes almost impossible for them to leave your landing page without taking action on your offers.

The Anatomy of a Perfect Landing Page Infographic

Anatomy of Perfect Landing Page Infographic

Infographic by SmartBugMedia.com

What’s next?

I know for a fact that I’m just scratching the surface with the points that I shared above. If you have wisdom bombs that you’d like to share about creating a high-converting landing page, then please share them in the comments section below. Cheers!

The Anatomy of a Perfect Landing Page for Your Business The Anatomy of a Perfect Landing Page for Your Business The Anatomy of a Perfect Landing Page for Your Business The Anatomy of a Perfect Landing Page for Your Business The Anatomy of a Perfect Landing Page for Your Business The Anatomy of a Perfect Landing Page for Your Business
Get Your FREE .Design Domain

Get Your FREE .Design Domain

Everyone is familiar with .com and .net, but did you know you get your own free .design domain?

Some of you may have seen facebook.design, airbnb.design, and other major brands, but unlike .com, .net and other conventional domains, there are still plenty of short .design names available.

So the good news is, you can shorten or improve your existing branding by switching to the .design domain.

ie. johnsmithdesign.com >> johnsmith.design

You can also get your own unique email address such as hola@yourname.design or you can even use it as a clever redirect to another site, like a Behance profile.

Get your FREE .Design Domain

We.Design are offering Just Creative readers, their first year free and yearly renewals for just $35 instead of the $70 offered at some registrars. You also get email hosting, SSL certificates and WHOIS privacy included with every domain.

» Click here and use coupon code JUSTDESIGN for your FREE .design domain

Get Your FREE .Design Domain Get Your FREE .Design Domain Get Your FREE .Design Domain Get Your FREE .Design Domain Get Your FREE .Design Domain
Drill Hole Example

4 Simple Ways to Upgrade Your Website for Brilliance

Last year I engaged in a campaign with Liquid Web Hosting on How to Build Something Brilliant and a few months later I’m here to offer some advice on how to “Keep Building Brilliant” by upgrading different aspects of your website.

Disclaimer: This post was written by me through an activation with HireInfluence on behalf of Liquid Web. Although I received compensation for participating in the campaign, all thoughts and opinions are my own. Follow along with the hashtag #KeepBuildingBrilliant.

1. Improve the Visual Design / User Experience

a) Simplify based on Goals

What is the purpose of your website? Is it to provide information, sell a product or service or simply to grow your email list? Asking yourself these questions will allow you to simplify your website, based on your goals. For example, if your main goal is to get an email address, then your website’s design should be focused around this goal and one way of achieving this, is by reducing clutter and having a clear focus. See here for the top 5 design mistakes killing your conversions.

b) Reduce clutter

Can pages or sections of your site be removed or reduced? Can more white space be added to guide the user and improve the user experience? What aspects are distracting from your main goals? See here for some tips, case studies and best practices for doing just that.

c) Sell benefits, not features

Tell a story, rather than hard sell your customers. What benefits will they derive from your product or service?

An old ad age is the drill and hole example… User’s aren’t looking for a drill, they are looking for a hole so sell them on the end product of “drilling perfect holes with ease”, rather than on the drill itself.

2. Build a following

Why would user’s want to follow you or your business? What value are you offering them? Always keep this in mind when building your list or followers.

a) Build your email list

Email marketing is one of the best ways for your audience to stay engaged and connected, but how much attention are you paying to building your list? Add some lead generators to your site. I personally use the service ‘OptinMonster’ for gaining emails and offer a free logo design eBook ‘lead magnet’ to entice users to sign up.

b) Remove or reduce advertising

How much money are you actually making from those Google ads? Generally, they’re just adding unnecessary clutter. Consider removing them and focus on your goals of gaining important leads, not just a few bucks.  

3. Increase site speed

Increase Site Speed

The speed of your site is going to directly affect not only the experience of the user, but also your search engine rankings, so pay special attention to your website’s speed.

a) Upgrade your Web site platform

What platform are you using for your Web site and is it best suited for your business’s goals? Maybe it’s time to ditch that slow DIY website and upgrade to something more professional. A popular choice would be WordPress, and there are literally thousands of professional themes to choose from. See how to start a website or blog here.

b) Make more mobile friendly

Your website should be responsive by now… if not, then crawl out from under that rock. But don’t just stop at being responsive, consider what elements can be removed or reduced entirely to ensure fast loading speeds on mobile. See here for some tips on making your mobile site load faster.

c) Use a CDN

Hosting your files on a CDN (content delivery network) is one of the best ways to speed up your site, and can often save up to 60% bandwidth.

CDNs work by hosting your files across a large network of servers around the world. When a user visits your site from New Zealand, they are downloading files from the server that is closest to them. This reduces the load on any single server, making the site faster.

See here for getting started with a CDN.

4. Upgrade Your Web Host

Liquid Web Team

A lot of the above factors are reliant on where your website files are hosted – aka your web host – and when choosing a web host, there are a number of factors you need to consider such as reliability, security, performance guarantees, customer support and more.

Do you need dedicated server hosting, managed VPS hosting, managed WordPress hosting, cloud hosting or just standard server hosting?

There are many hosting options out there, and Liquid Web Hosting is one company to consider if you’re wanting to upgrade your web host. Their vision is to be the “The Most Helpful Humans In Hosting™” so you can rest assured you’ll be in good hands for your upgrade. They have everything you need to grow, as well as managed services (not just a server) and wholly owned data-centers for your peace of mind. And just look at their smiles above…

Have any further ways to upgrade your website? Let us know in the comments below.

4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance
Behaviour Flow

8 Essential Tips for The Perfect Website

You’ve been honing your craft for a while now! Your portfolio is starting to look awesome to the max.

Maybe you’ve even built up a bit of a following on social media.

However, there’s a good chance that you’ve been neglecting your website. With social media being such a powerful tool for creatives, who cares about a website, right? Wrong.

A website’s still the best way to create a hub where people can stay up to date with what you’re doing, get in touch with you, and purchase your products.

Whether you’re a pro creator with a creative studio that has gear valued at the same price as a new Cadillac, or if you’re simply a hobbyist artist who makes cool things on your smartphone, a website is easy enough to create, yet can be powerful enough to build a career off of.

In this article, we’re going to go over 8 different ideas you should keep in mind when building your website. Enjoy!

8.) Choose a platform that offers both ease-of-use and no limitations in customization

If you’re new to website creation, you might be a bit overwhelmed.

In advertising, you’ll see solutions such as Wix that you can create quality sites in a few clicks. In the marketing community, you’ll hear WordPress boasted as the most versatile way to create a website. In the eCommerce world, you will hear Shopify recommended as the best way to easily sell online. And finally, in the programming community, you’ll hear a variety of answers from using complex backend frameworks to just creating a static HTML/CSS/Javascript website.

My simple recommendation is to choose a platform that offers both versatility and ease-of-use for your needs. For 90% of people the answer is going to be WordPress. See here for how to set up your website/blog using WordPress.

7.) Make sure you are tracking valuable metrics

The most common website analytics tracker is Google Analytics. It’s powerful, lightweight, and relatively easy to use.

Most people simply look at their traffic graph to find out how many particular visitors arrived on a given day.

However, did you know that you can use Google Analytics to track sales, newsletter signups, what people are searching for on your website, and even how many times people download your freebies?

One feature that I’m really digging is called “Behavior Flow”. It shows a graphic of different landing pages on your site and where they go after viewing that particular page (ex. Going to your about page, going to your shop page, leaving your site, etc).

As a creative, some quite valuable metrics you could be tracking on your site are:

  • How many monthly visits your site brings
  • Average time spent on your website
  • What social channels generate the most traffic
  • What type of music you produce that generates the most sales/downloads
  • Behavior flow (See above example)

6.) Test your page load time and work on improvement

According to the Kissmetrics blog:

“40% of people abandon a website that takes more than 3 seconds to load.”

It’s not enough to just throw a website up and call it a day. I highly recommend – right this second – that you go to Tools.Pingdom.com, a popular site speed tester, and enter your website’s URL. What score did you get? Also, it’s recommended to test your website a few times in Pingdom, since the results will vary.

If your score was anything above 6 seconds, you’ve got some work to do. If it’s above 2 seconds, you still should try your best to get your load time quicker.

Here are some quick ways to speed up your site:

  • Enable caching – For WordPress sites, this can be as easy as installing a plugin. WP Total Cache is my top recommendation, but keep in mind it will take some configuring. For minimal configuration, Comet Cache is a really easy caching plugin to use.
  • Cloudflare – With the addition of improving site security and saving yourself from DDOS attacks, Cloudflare can also speed up your site through their global content delivery network. See here for how to set up a CDN.
  • Upgrade hosting – If you can afford it, upgrading your hosting plan is a great way to decrease the load time of your site. See here for a hosting deal with BlueHost.
  • Disable unnecessary plugins (WordPress users) – If you use WordPress, check how many plugins you’ve enabled. If you have 20+ (or even 10+) plugins enabled, there’s a good chance that’s responsible for your slow load time.

5.) If you’re selling anything, your website must be professional

Whether you only take donations, sell designs online, or simply blog, you need to come off as professional and trusting.

Luckily, you don’t have to be a professional web designer to create great looking sites anymore.

However, it’s still easier than ever to create a bad, unprofessional looking website.

A great way to achieve an astounding looking website without too much effort is to purchase a premium theme for WordPress. The most versatile website creation platforms – whether you’re using WordPress or Shopify – will have some sort of theming system where users can create and sell their custom-coded themes.

Buying a $50-$100 theme from a reputable developer can be a very wise investment that will instantly increase the trust your customers have with you when making a purchase.

4.) Remember that simplicity is the key in web design

Take a look at the JUST Creative homepage. It’s very simplistic – in a good way.

Call to action

When a user hits the homepage of JustCreative, there’s only two main places to focus on. Notice in the above graphic that the two places to focus on are 1.) the call-to-action (asking to view Jacob’s Portfolio) and 2.) the navigation, with ONLY the most important links a user should visit.

On the topic of navigations, this is where many people make a big error. A lot of people put so many different links in their navigation which makes the decision process harder for the end-user.

Still think your navigation menu is perfect even when having a ton of different links? Try this.

  1. Download the Google Page Analytics browser extension
  2. Go to your home page and enable the extension.
  3. Look at the percentage breakdown for your navigation

You will see something like in the image above.

Now the question is: “What navigation links of mine get zero clicks?”

Stats

3.) Make it easy for people to contact you and also follow you on social media

I run into situations a lot where I come across sites that are just impossible to contact. Sometimes the contact forms are even broken!

Make sure it is dead-easy for someone to contact you on your site. Usually, I like to put an email address contact form, my Twitter, and Facebook. This way, no matter what a user’s preferred communication platform is, you’ve got them covered.

Making it as easy as possible for someone to contact you is the difference between making a sale and missing one.

2.) Each page of your site must have ONE clear goal in mind

Going back to the idea of simplicity, you’re going to want each page of your site to have ONE clear goal in mind – not several.

If you’re working on a product page for selling an item, you’re not going to want to have other focus areas – such as promoting your social channels, displaying your most recent tweets, etc.

Keep it simple. Keep it focused.

1.) Build an email list of fans

Email is possibly the oldest online marketing channel out there.

However, still in 2017, the power of the email list is cherished by everyone from fortune 500 CEOs, to worldwide superstar musicians, to your friend that makes a few bucks in beer money every month from his t-shirt designs.

Think of an email list as the most stable form of communication you can have with your audience. With social media marketing – On Facebook, Twitter, Snapchat, or whatever pops up tomorrow – an algorithm can be released tomorrow that will cut your fan reach in half. This happened with Facebook a few years ago and many people who depended on their Facebook page to pay their bills, had their income cut in half overnight.

Meanwhile, an email list is much more predictable. With the innovative email marketing tools we have today, you’ll be able to easily segment (or categorize/label) your subscribers & customers and send them email that’s most relevant to them.

There’s three steps you can follow to start building an email list:

1. Sign up for an email marketing service

MailChimp has a free plan with a lot of features, so I recommend starting there. There’s also other options such as aWeber, Drip, ActiveCampaign, and ConvertKit that are worth exploring as well.

2. Create a signup form and put it on your website

Email marketing services such as MailChimp typically have form builders. However, there’s a plethora of other tools you could as well.

To make being on your email list more enticing than simply “Sign up to stay connected with me”, you could offer a free download. Some example headlines you can use on your form are:

  • Download Three Of My XX For Free!
  • Get 10 Awesome XX You Can Use In Your Videos
  • Receive Exclusive Deals On My XX

Final Notes

Remember: Simplicity is often the best answer in web design. Keep simple goals in mind when designing pages on your website.

And don’t forget to get feedback from a second pair of eyes! There are many little details in your design that you don’t notice – or think are a big deal – that might turn off your visitors.

8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website