My typical website design process consists of three key stages: 1) Consultancy. 2) Design. 3) Development. This particular post is a very practical one. It describes the second stage — a seven step visual design process. By this point in the process, the consultancy package has been signed off. This should ideally include agreed project and creative briefs, wireframes, prototypes, technical specifications, budgets, and timeframes. So where do you start with step two, and how do you get into the right frame of mind?

This post sets out what works for me in the majority of my projects. If you’re at the stage of your career when every project is a struggle to get your head around before you start, this might help. Hopefully there’s enough material and ideas here that with a few tweaks it might work for you too.

1. Fear of the Blank Page, or, Where to Begin?

Following a tried-and-tested process should help to eliminate The Fear of The Blank Page.

So before you start — get organised. Create a project folder and get the design files ready. Create an “Assets” folder in there too for all your documents: wireframes, briefs, guidelines etc etc. Later on during the process, you’ll also add all the other relevant documents in there, such as: images, content, graphics etc. It’ll save you time later on.

Read through the brief carefully. Specifically the part about the look and feel of the required design. Note what your client likes, dislikes, and any other specifics required for the presentation. Make notes about potential colours, fonts, imagery, and overall styles that might convey that message. Have a solid idea of what your primary option will be and stick to your client’s requirements closely. And then think of an alternative of how you might improve things if some of the requirements were more flexible.

2. Set Your Mobile & Desktop Grids

Grids are super helpful and should be set up and followed. It will help the developed website to match your design. I usually stick to the 12 column default desktop grid in addition to the mobile one used in Bootstrap Framework. That’s only my preference because this is the one most used by the developers I work with.

Some projects require a different, more fluid grid which can make for a more unique and premium look and feel. I find that those tend to entail more time and budget, specifically during development. So make sure your client and your developers are on the same page when a more customised approach is required. If in doubt, stick to the basics to avoid complications further on. Talk to your developer and your project manager if you have people working on the project in those roles.

3. Typography

The fundamental purpose of any website is to convey information. Information is communicated through language. And language requires typography — it is the basic unit of your design. Get this right and that might be all that your client needs. The rest of the design are just wants. You might want to use brand colours and other design elements to convey the message in the right way, with the right emotions, associations, feelings, etc — but they shouldn’t get in the way of information.

Check if the brief requires you to stick to a specific set of fonts, and follow those guidelines (make sure the client has a web licence to use those fonts online).

If your client is open to new font ideas, refer to the brief again and check Google Fonts (or If your client is open to new font ideas, refer to the brief again and check Google Fonts (or a premium service if you’ve got one, such as Typekit) for the right font combination that would help convey the required message. A more characterful typeface might need a separate client sign off before you go any further. And if your client’s existing brand fonts are too heavy for web use, suggest a web friendly alternative.

Setting the Type

Setting the basic typography and connecting your visuals to a developer’s code can be time consuming and tricksy. I recommend starting with code using either Type Scale (for simpler websites) or Modular Scale (for larger projects), and then taking screenshots and recreating it in your design tool (Sketch App, Photoshop, or Adobe XD?).

Luckily for you, I’ve done the hard bit and got a freebie ready for you to download and use. So you just need to pick the fonts, update the styles and stick to the relative scale font sizes provided. It will ensure your typography is set right, looks good, and that your developer is happy as well.

Stick to as few font styles as possible and only add new ones when absolutely required. My rule of thumb is that a new font style has to be used at least a few times throughout the design to justify its existence. I usually have different styles for h1 — h5, p, quote, and small p (for captions, breadcrumbs, footer text etc). Some of those would have an inverted version for dark backgrounds. And if you use all caps versions for some of those — you’ll have a big variety of font styles to choose from without having to create random one offs.

4. Logo, Colours, and Other Design Assets

Go through the creative brief and (if you’ve got it) the brand guidelines document once again. Research your client’s current website, as well as those of their competitors, and think about any interesting pieces of content or design elements that might work well.

Browse though some inspirational websites such as Behance or Dribble and pick out visual cues that might be helpful for your project to convey the right message.

Find a vector logo, relevant colour combinations (expand those for web if necessary using Adobe Color CC), fonts, illustrations, icons, images, messages to convey, catchy titles, USPs, tone of voice.

I throw all of those elements onto my canvas and reflect on them, thinking about how they might be combined to answer the brief.

5. Working Fast

By now you’ve done the hard bit and can start fleshing out your wireframe quickly.

You don’t have to start from the header and finish with the footer (although that is the general direction). If you happen to have a great idea of how to present a specific type of content, do that first. Present the key information in the most engaging way possible. And then build around it, supporting the key messages and calls to actions. Combine type and images in various ways, try different colour combinations. Put it all together, refine, rinse, and repeat (and repeat and repeat…).

Don’t do anything too subtle if it means it’ll increase the development time exponentially. On the other hand, do polish the details of the key interactive areas and main messages. Try to make the most impact using the least means.

Use your budget wisely. Spend more time coming up with a great idea for the key feature. But don’t waste time on things that are irrelevant or relatively tiny. Use that time to execute the initial idea well. Try to get to a meaningful presentation ready design first before trying out other “little things.”

6. Presenting Your Design

Don’t overlook how you might present your designs in a way that gets the best out of them — it can make or break the project. Ideally, you want to present them face-to-face so that you can have full control over your ideas and avoid misinterpretation. Talk about how the design elements you’ve chosen answer the creative brief requirements. Use Skype or Google Hangout if face-to-face is not possible or out of budget. Whatever you do, don’t just bombard your client with PNGs.

7. Design Handover

The importance of the design-to-development meeting can’t be overstated. If someone else rather will code your design, make sure they have time to go through each screen, ask questions, and get answers.

Conclusion

You haven noticed that the actual design work here mostly happens at point 5. I find it extremely important not to jump ahead or fast forward your process straight to that step. Because, if you do, there’s a good chance you’ll have to go back a few times which will waste your time, your client’s time and cause a lot of frustration for you both. The client will feel like you didn’t listen to them from the get go, and you’ll have to spend a lot of time oscillating between trial and error. You’ll be forced to try different layouts, colour palettes, fonts, assets, wasting a lot of time and budget in vain. (We’ve all been there.)

So next time you sit in front of the blank canvas overwhelmed by all the information and work ahead, DO NOT PANIC. Just try following these steps, one step at a time. Done enough times, deviations and innovations will become helpful, and an approach will emerge that she suited to your quirks and way of working. But get the basics right first.

Web forms. They’re the heart of product design (most products are, from the user standpoint, just a bunch of forms) and usually the most important part of any web page they appear on. Given that importance, you’d think that, after 25 years of building them, we’d have forms nailed.

But we totally don’t.

Or rather, we do have forms pretty well figured out, but the good word seems to have spread somewhat … unevenly. So let’s take a look at some of the most common problems web forms present us, and dig into how to do things better.

Label all the things, in the field

You know what I love? Field labels that disappear when I click into the field. Because I totally do remember what it was asking me.

Sure, in-field labels feel like an elegant solution to the problems of form design. Forms are often the most important thing on a page. But because they’re far from aesthetically pleasing, it’s not hard to imagine why you’d want to save a little space on the page.

In fact, I bet the first designer to move those field labels into the field felt like a damned genius for a day. Actually, I genuinely hope they did.

But like many seemingly genius ideas put into practice, this one falls flat. It poses significant accessibility issues for the cognitively impaired — and, honestly, for the rest of us. Because most of the time when we’re filling out forms, we’re on autopilot. We’re not carefully attending to each field’s label and what we’re entering into that field.

So having the field visually present to remind me what I’m doing is super-handy. Helps me achieve my goal faster, and ensures I don’t have to delete or cut entries I’ve already made just to be sure I put the right content there.

Now, this doesn’t mean you have to just stick with standard form design practices. It’s all good if you want to magically whisk the label out of the field and settle it above when I click in. If you feel that’s a good use of your time, go for it, buddy.

But I, for one, honestly don’t care.

Definitely don’t allow me to sign in with social

Because seriously, who wants something so convenient as one-click sign-in?

Okay, so I probably shouldn’t feel so free handing out my social credentials to any ole app that wants them. And I agree that it’s not the most future-friendly of possibilities. As the recent closure of Vine should remind us all, these “networks” we practically live on can vanish in a moment.

But damn it’s satisfying. Using a social login feels like I’ve got a key to the whole internet. I’ll I have to do is let you use it, and bam! I’m in. So much nicer than filling out a bunch of fields.

Granted, there’s lots of reasons not to use social login, so I don’t score too heavily on this one. But I hope you at least considered making things this easy on me.

Oh—and if you do use social sign in, make sure to also:

    Give me the option to do it with email instead, in case I don’t feel like handing you the keys to my social data
    Directly address what you will and won’t do with that access to my social account(s) — with the big one being, of course, addressing whether or not you’ll post to my account without my express permission.

Excellent forms require excellent communication

Totally use terms like “invalid” in error messages

Sure, go ahead and be the arbiter of validity. I’m sure you’ve checked what sorts of “special” characters actually are used in people’s names, right?

I wrote about the use of terms like invalid in error messages at some length recently, so I won’t go too deeply into this here. But the important thing to note when writing error messages is to be informative and helpful. Telling me an entry is “invalid” is not only potentially offensive, but also isn’t helpful, because it doesn’t explain what a “valid” entry looks like. So just tell me what you want already.

    Telling me an entry is “invalid” is not only potentially offensive, but also isn’t helpful, because it doesn’t explain what a “valid” entry looks like.

Yes, ask me for a “username”

Because I definitely do want something else to try to remember, besides the emails and passwords for the 120 other websites I’ve signed up for.

What, are we in the 90s or something?

News flash: the appeal of the anonymous internet has been explored and deemed negligible, so unless your site needs some layer between my avatar and my identity, please ditch this abstraction. It just adds unnecessary cognitive load, and dramatically ramps up my need to click that “help me log in” button.

Granted, there are websites where anonymity (or its tantalizing possibility) definitely is part of the value prop. You all keep on going on with your bad selves. And I can imagine security reasons for requesting a username, in that it’s one more layer between a hacker and my account.

But for most sites and forms, this is just a needless annoyance. And for those sites that do need it, a quick explanation like …

    Creating a username helps keep your account more secure, as it’s harder to discover than an email address.

Could go a long way to allaying my feeling that you’re just making life harder for me. Remember: your customers don’t know what you do, or why you do what you do. So what’s the harm in telling them?

By all means, hide need-to-know information from me

Have you ever finished filling out a form, clicked submit, and then been hit with the important detail about how to create a password for this particularly site that you flubbed because they totally didn’t tell you?

Because, yes, I do want to find out that I did something wrong with my password after I totally thought I was in. Good plan.

As mentioned above, I get the lure of a leaner, meaner, cleaner form design. But if my password absolutely has to have one capital letter, one lowercase letter, and one “special” character, than really, shouldn’t you just, you know, tell me?

This also goes beyond login form design: anywhere you need specific information, entered in a particular way, letting people know ahead of time will streamline their workflow, and lower frustration.

Don’t let me see what I’m typing

I get it. The bullets are there in place of the characters I’m typing so nobody can practice the oldest hack in the book: looking over my shoulder.

But surely you could give me the option to risk it, right? I mean, here I am in the office, in a nice cozy womb chair, nobody looming. Can I just take a peek?

Improving our web forms

Looking through all my complaints about form experiences, one thing comes through loud and clear: excellent forms require excellent communication.

Making labels persistent and not vanishing them on a click: that’s clear communication. Avoiding terms like “invalid”? Bingo, communication. Revealing need-to-know info to me before I make a mistake? Yup, you guessed it.

Communication even comes into the mix with the security issues I’ve called out. Without knowing that these things are done to protect me, they just seem unnecessarily annoying. But if these sites took a moment to inform me of their purpose … well, that could be a really positive moment for my relationship with the brand, couldn’t it?

Of course, the other key ingredient is simplifying things for me — lowering my cognitive load by letting me sign in with a social network, providing helpful error messages, etc. So don’t forget to keep an eye out for ways to streamline your forms, including limiting the questions to need-to-know info.

7 things to consider when planning a rebrand
 
Learn the secrets behind a successful rebrand with this list of seven tips.

The prospect of a company rebrand can fill some marketers with hope and the opportunity to start afresh, but it can also send others running to the hills with the thought of spiralling budgets and internal disagreements over colours and wording. If you’re tasked with a rebrand, we've put together the main areas you should consider before briefing your design team.

01. Check out your competitors

This is especially important if you are operating within a saturated market, as you want to stand out. Start by collecting together the logos of your competitors; often you find that certain industries follow similar brand styles. Don’t be afraid to break the mould and step away from what is the “done thing” in order to make your organisation stand out and show that you are different. Collecting these competitor logos can help to show the design team exactly what you don’t want and where your brand fits into the overall landscape.

This process will also help you when you are unveiling your new branding internally and securing buy-in from senior teams and board members, especially if you’ve chosen a particularly daring final design!

02. Understand who is creating your design

If it is an internal department, will they be fresh and innovative enough to create what you need? If it is an external brand agency, do they fully understand your brand, key messages and who your target market is? Depending on who is creating your design will affect the way that you brief them so it may be good to have an initial meeting to understand everything they need to know before giving a full brief for the project.

03. Take stock of everything that will be rebranded

Before starting to brief your team, you will need to know how many variations of the logo will be required and where they will be used. From brochures to business cards to email signatures and even on your company vehicles, you may need several variations and sizes to meet your needs. You may also need to consider where else you use your logo online -on your website and social media channels, for example. It will be more time efficient and cost-effective to provide your design team with all the information needed upfront and save to-ing and fro-ing and last minute alterations.

04. Invest in typography

Typography has a proven history of making a brand stand out

The font you use can become as iconic as the brand logo. Think of Coca Cola, Disney and even the simple style of John Lewis and it is easy to see how fonts can be as unique as fingerprints. Typography is an art form in itself but unfortunately is often overlooked in modern design. For something truly unique enlist a typography specialist.

 82 top-quality typography tutorials

05. Avoid using stock images where possible

If you’re preparing marketing collateral and websites, nothing says bland and boring like stock images and photography. If possible enlist the help of a graphic designer to create bespoke designs, so that you have something that is individual and unique to yourselves.

06. Are there things you can keep?

Often marketers read “rebrand” as creating something completely new and different, however it can be more of a brand evolution. If you have a particularly successful and established brand, it can be foolish to get rid of particular aspects of your branding which customers and stakeholders are fond of. This can especially be the case with historic and heritage brands. Building a brand is about building the strongest image of your company and it could be that holding onto an iconic brand image, a particular colour or a slogan is the best way of retaining your brand’s identity at the same time as moving it into the present day.

Is your SEO strategy for 2017 finalized? If not, then you might want to refine it to reflect some of the predicted top SEO trends for 2017.

You should already know the top SEO trends for 2017 from the renowned industry experts. Now we’re going to share a few more predictions to help you continue refining your SEO strategy for 2017.
It’s all about related keywords.

You don’t want to repeat a single keyword phrase throughout a post or page anymore. You want to optimize the post for your main keyword phrase by including it in the title, in the first paragraph, in the last paragraph, and in the header image’s filename, ALT text, and title text.

But from that point on, you want to get some related keywords in mind that you can spice throughout the article. Let’s say you’re writing about google technology. Using Rank Tracker, you can get insights into related keyword phrases and how they stack up against your chosen phrase using insights from a variety of resources beyond Google AdWords Keyword Planner.


Or just use Google AdWords Keyword Planner, on the other hand, and possibly only get estimates based on your AdWords usage.

Even if you do only have ranges, right off the bat, you can see that your keyword phrase, google technology, is getting an average of 1K – 10K monthly searches. But below that is a related, low competition, high search volume keyword phrase. Looking at this might make you re-evaluate your main keyword phrase or look for ways to have multiple main keyword phrases such as In Google News: Best Google Technology Update for Android Yet.

You can also see that there are 328 related keywords that you can download into an Excel spreadsheet or Google Sheet, sort, and have a field day with. Of course, not all will be related, and not all will have a high search volume. That’s why you will just pick and choose maybe the top five related keywords to use throughout your post. Five related keywords that have the next highest search volumes to your main keyword phrase.

The point? Be sure to research your keywords. You may think you have a good one, but a better one may be lurking around the corner.

It’s about mobile.

Mobile friendly and mobile speed. I can’t stress this enough. If you don’t have responsive web design, but use any common content management (WordPress, Joomla, Squarespace, etc.) or ecommerce solution (Shopify, Magento, etc.), then guess what?

There are tons of responsive designs out there for you. You can check with the platform’s main website, search for third party developers, or go to theme marketplaces like Themeforest to find a responsive theme or design for anything, even plain HTML websites.


Of course, it’s not just your design, but your functionality too. Or your website’s speed at least. You can’t just install WordPress, a responsive theme, and 93 plugins (yes, it’s happened) and expect your website to run at its optimal pace.

That’s why it’s good to use tools like WebPageTest. It will tell you if your website is running at its best possible speed. Because let’s face it – what’s good for users is good for Google. And RankBrain could be learning what users like for Google’s algorithms.

What WebPageTest will tell you exactly what slows down your website load times so you can do things like re-analyze the need for specific plugins, optimize an image, fix a bad widget, or another task.


A fast website with a beautiful design that works on every device is going to be a hit with both search engine bots and users alike.

It’s all about Artificial Search Intelligence aimed at human satisfaction.  

Want to get slapped by Google straight out of the gate? Get every link built to your company using generic keyword rich anchor text like auto insurance company and online colleges. It’s 2017 now, and as we mentioned before, there’s this whole new (but not so new anymore) part of Google’s algorithmic ranking system. Artificial intelligence is now a part of the rankings game and guess what? No one has it mastered.

Not even Google. First, their product naming conventions are confusing. Google Analytics or Analytics Solutions? Subfolder or subdomain? How do I choose when searching web analytics?


But while it’s less volume, you know people looking for web analytics software are going to convert if you happen to offer web analytics.  

Which leads us to the most important thing you should focus on in SEO and any other marketing strategy. If you want it to be successful.
It’s about a conversion-focused approach.

While rankings are great, it’s time to stop focusing on them as an all or nothing way to determine if SEO is working. It’s not about being #1 for the keyword phrase with the highest search volume. It’s about being #1 (organically and/or paid) for the keyword phrase with the highest search volume that will get you conversions.

Think qualified traffic for leads. Sales. Not just any old garden variety of traffic, unless your income is based off of cost per impression advertisers buying space on your website.

Why is qualified traffic the best to generate? Because not only are they most likely to convert, but because they convert, they are the best to use for retargeting in Google AdWords, social media ads, and other remarketing campaigns.  

But why is a conversion-focused approach even more important? Because it’s going to up your quality across the board. It’s going to up your content, your meta titles, your descriptions, your images, your videos, your social posts, your interviews, your roundups. Everything you do in the name of marketing will be done with higher quality because your endgame isn’t to just get a link. Your endgame is to get a potential customer into your sales funnel.

You wouldn’t do that with a crappy pitch in person, so you likely wouldn’t do it with crappy content online either! Or shouldn’t, at least.
In conclusion

Keep in mind the basics. Stay in compliance with Google Webmaster Guidelines and keep an eye on your website’s health in search via Google Analytics and Google Search Console. Find the best keyword phrase and related keyword phrases for your top pages, followed by your top posts, and every piece of content you create from here on out and optimize for those keywords.

Don’t assume you’ve succeeded – use Google Analytics Goals to see what Landing Pages ultimately assisted in a website conversion, from a lead generation to a sale. And finally, follow the above strategies for a successful 2017.

Why Create Better Images for Blog Posts?

Images are highly engaging. They communicate ideas and invoke emotions.

They help you get more likes, shares, and traffic from social media. Users visiting your site spend more time and view more posts. Images can even help you get more comments on your posts.

Now the problem is that most bloggers are not graphic designers. They cannot create professional looking graphics for their websites.

Part of this problem can be solved by using public domain or CC0-Licensed images images. However, you may still need to edit those images.

Luckily, there are several online tools that allow you to edit and create beautiful images for different scenarios including blog posts, infographics, presentations, and even Facebook posts.

Let’s take a look at some of the best tools to create better images for your blog posts.

#1.VISAGE


Visage is one of the easiest and most powerful tools to manage visuals for your blog. It allows you to create and design professional looking graphics for your blog posts, Facebook pages, Twitter, LinkedIn, etc.

It comes with tons of professionally designed templates to start with.

You can also save your brand’s logo and other assets and use them into your visuals. You can save, export, and share your graphics. Visage is great for individuals and teams.

f you have ever been stuck in traffic, you know there is always someone up ahead texting, rubbernecking or just driving too slow. It is totally aggravating and makes you want to stop driving, right? A slow website isn’t that different. It kills any desire your visitors have to make repeated visits – that is if they even stick around long enough for the first one.

This is not the first post written about how to make a WordPress website faster. They will all give you the same core advice – get good hosting, streamline your site and cache – but what exactly does that mean and what is the best way to go about it on a Themify site? Below, you’ll learn why things can go wrong, what you can do about it and what the absolute best solutions are, going into 2017, to give your site the boost it needs.

First Things First – Do You Even Have a Slow Site?

“Slow” is often a relative experience. How we experience the internet has a lot to do with how eager we are to view the content of a site, how stressed we are, or whether we have an awful internet connection. Thankfully, there are some excellent tools out there that can give us some neutral insight to how a site is really performing.
Step 1: Test Your Site

Head over to each of these fine speed tools and pop your URL into the address field to run a free test. If needed, select a location that you want to test from. Usually this is where the majority of your visitors live.

    Pingdom Tools is the most useful for seeing how quickly your site loads, and specifically what is holding it back
    Google PageSpeed shows you how Google evaluates your site. You will be scored separately for mobile vs. desktop browsing performance.
    GiftOfSpeed is similar to Pingdom Tools, but offers a simplified and lovely review of your site’s performance, complete with a "waterfall" or file list to help you pinpoint problems.

Want to go the extra mile? Test your site on these as well:

    Dotcom Tools
    GTMetrix

These sites will provide you with an overall performance grade, load time and page size, with an option to view detailed results on how the page loaded, but they will be different due to the location the test is run from, and each tool’s unique methods for testing. By weighing the different results, you can get a wider perspective on how well your site is doing across a wide range of locations and scenarios.

So, how did you do? The good news is that scoring above a 70 on an eCommerce site, or above an 80 on any other site is a good result for WordPress. If you’re scoring low, you’ll need to combat some of these common slow-site problems:
The 7 Deadly Sins of a Slow WordPress Site

    Slow shared hosting
    Too Many Plugins
    Invisible Errors
    Unoptimized images
    Content loading from other URLs such as videos, scripts, ads or images
    Out of date or unoptimized theme
    Redirects

You’ll notice the speed test tools give you a summary of what you should do to speed things up. It typically includes a set of ambiguous pointers like these:

    Combine external JavaScript
    Parallelize downloads across hostnames
    Combine external CSS
    Remove query strings from static resources
    Leverage browser caching
One or more of the 7 factors listed above is usually at the heart of whatever is bogging down your site, while some indicate more complex issues with using a publishing/eCommerce platform in the first place, which we’ll get into later.

Next, we’ll explain what these things mean and what you can do about it:

Step 2: Invest in Great Hosting

Inexpensive hosting almost always leads to a slower site, with other sites on the same shared server taking up too much bandwidth or database memory impacting your site in negative ways.
Managed WordPress hosting is becoming more and more of a thing, at increasingly affordable rates. Hosts like Bluehost, Dreamhost, WPEngine, etc all offer fast and reliable hosting that is optimized specifically for sites running WordPress and WooCommerce that can improve your site speed by a huge degree.

Step 3: Evaluate Your Plugins

It is easy to get carried away with plugins, but not all plugins are created equal. The total number of plugins you use is not an obvious sign of trouble, but rather how well the plugins are coded, whether they are up to date and how much memory they use. "Bloated" plugins load duplicate or unnecessary assets, increase the number of requests made to your database and may load code in an inefficient way.

P3 Plugin Profiler is a very useful plugin for checking out your setup and identifying problems. Once activated, run the Auto Scan under Tools in your WordPress admin. You can ignore the imprint of some plugins, such as JetPack and Caching plugins, which ignore logged in users for loading some resources.

Still not sure which ones to get rid of?

    Delete plugins you’re not actively using
    Do your customers really need that falling snow animation on your web shop? Probably not.
    Ensure plugins you do use are up to date and actively developed. To check for updates on free plugins, visit Dashboard > Updates in your WordPress admin. If the plugin has not been tested for the current version of WordPress or has a last-updated date of 2 years ago, replace it with a better one.

Step 4: Stay Updated

Most WordPress hosting includes an automatic updates option or a bundled service like ManagWP to help you keep WordPress updated, but if you see a notification in your WordPress admin to update, don’t hesitate! Most updates can be done under Dashboard > Updates in your WordPress Admin.
Keep Your Theme Updated

Themify releases frequent updates to continually improve performance and squash bugs that could be loading down your site. Visit the Theme Docs if you need a step by step for how to keep your theme up to date.

Step 5: Activate Caching

If you’re using WordPress Optimized hosting, chances are there is already some pretty powerful caching enabled (such as Varnish). Check with your host to better understand what performance measures are already being taken, and whether a caching plugin specifically designed for WordPress would help.
Enable GZip

At the very least, you may be able to turn on GZip Compression using your hosting control panel. By enabling Gzip compression, your visitors will get to download smaller files when browsing your site. If youre uncertain whether your site is already using this feature, run a quick gzip test at GiftOfSpeed. They also have an excellent guide to enabling Gzip on most major platforms.
Use a Plugin

When configured correctly, a caching plugin specifically designed for WordPress will increase speed for repeat visitors to your site substantially and have very low memory usage. It is important to determine if caching is already active on your server, though, as having both types of caching active at the same time can lead to trouble.

Top Rated Plugins:

    WP Rocket – both premium and free versions available and one of the most popular and effective caching plugins out there right now
    W3 Total Cache – One of the oldest caching plugins, it is compatible with a wide range of hosting environments and straightforward to configure.
    Comet Cache – Used by more than 40,000 WordPress Sites, offers a simple one-click activation and advanced options for special situations

Things to watch out for when using a caching plugin:

    If you run WooCommerce, be sure to follow the plugin’s instructions for enabling WooCommerce support. No WooCommerce support? Don’t use it. This is critical to the functionality of your customer’s shopping cart and checkout experience.
    Start with Page Cache and Minify disabled. In most cases these two options do not need to be turned on – WordPress and your theme will already handle the loading of scripts and styles in the most optimized way possible. Minifying can often cause your theme to break.

Step 6: Reduce Offsite Content

Sites running a lot of plugins will have the hardest time with CSS and Javascript overload. These two things make up a large part of the front-end of your site such as the styling, fonts, effects and animations. Things to look for are:

    Duplicate versions of jQuery scripts – plugins should be using the internal WordPress script libraries and letting WordPress decide when to load them.
    Images loading from somewhere else

While you can only affect content you add directly to your website, you can always contact plugin authors through their support links (Plugins > Add New > View Plugin Site) to ask them if there is anything they can do to reduce response times from using their product – don’t forget to let them know how much you love the plugin and want to keep using it!

To cut down on your own offsite content and plugin choices, be mindful of the following:

    Upload images and other multi-media to your Media Library or web server. Never hotlink it from somewhere else.
    Stop using ad services that cause a slowdown or make sure ads are loaded last.
    Cut down on the number of videos loading on a single page when using an off-site host like Vimeo or YouTube.
    Keep an eye on social media widgets that retrieve feeds or images and try to keep them out of your header.

Step 6: Optimize Images

Websites with a lot of graphics or photos can really struggle with load times, regardless of how well WordPress manages them. In many cases, the speed savings you gain from optimizing images are marginal and not necessary, but if you see images on your test results taking a long time, you probably need to re-process them and be more careful in the future.

To avoid images causing any problems you want to do two things:

    Optimize images to reduce their file size
    Get WordPress to help carry the load

Saving Images

When preparing images for your website, use software that can optimize for web. In Photoshop, you can find this under the Save for Web option. In most cases, saving as a .jpg at 60 quality will give you enough compression without devestating quality loss. Keep an eye on the image dimensions too – large images really don’t need to exceed 2000px wide.

Google has an excellent guide on image optimization to check out for more in-depth information.

In cases where you need image optimization to be handled on the server end, the Jetpack plugin’s Photon module is an excellent option.

Install Jetpack by going to Plugins > Add New on your WordPress Dashboard and click Install and activate the Jetpack plugin. You’ll need to connect to WordPress.com, so if you don’t have an account, you can create one for free and enjoy the other perks, like free web stats. Activate Photon under Jetpack > Settings.

Photon will host your images from WordPress.com’s content delivery network at a pleasigly fast speed. It will also compress your images on the fly and ensure an appropriately scaled image is displayed on small screens – leading to an immediate improvement on your mobile speed score.

JetPack is helpful when you have a large number of high-quality photos or graphics being displayed at large sizes, where image compression is a concern or not an option. In cases where you have a ton of existing images and don’t necessarily need them to be perectly crisp at high resolutions, the EWWW Image Optimizer plugin will help you re-process your media library, cutting your image file sizes down considerably.
Optional: Verify Server-Side Configurations

If your site still has a terrible score and you have great hosting, hardly any plugins, optimized content and an active cache, it could indicate a problem that doesn’t have much to do with you at all, but with your server, such as a configuration problem or malware infection. It is best to get in touch with your host to help diagnose and troubleshoot suspected server issues, but here is a quick checklist of things you or your helper can look for:

Extra content in your wp_config.php (such as nonces or login information from an old database server) can trigger a ton of errors which you may not be seeing on the front-end, but which will slow the site.

Server-side security or .htaccess problems can also cause slowdowns with how your URLs are read by the browser, causing redirects or 404 errors.
Your PHP configuration may need a boost. Increasing the max_input_vars to 2000, for example, helps speed up performance when in the WordPress customizer, Themify Builder or Post Editor.

If your speed tests complain about extra query strings, install the Remove Query Strings From Static Resourcesplugin to make Google much happier.
Review

The above steps are a set of timeless, simple measures you can put in place to speed up your pages on most sites. Optimizing your site will make a noticable difference in loading speed, encouraging your visitors to engage with your content more and stick around longer. If you only do one or two things listed, thats already a move in the right direction. Every little bit counts!

Run the tests on your site from time to time to stay on top of issues and see how things are improving.

Here is a quick checklist of what you need to check:

    Test and compare using online speed tools
    Get Fast Hosting
    Reduce overhead
    Optimize content
    Turn On Cache

Which steps helped you the most? Share your experiences and tips in the comments!

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

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

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

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

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

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

Another tip to streamlining pages: "Keep paragraphs short," says Ian Lurie, CEO of internet marketing company Portent, Inc. "On most Web sites, a single paragraph should be no more than five to six lines."

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

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

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

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

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

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

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

    

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

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

"If you're using a fixed-width design, use a font size that allows a maximum of 15 to 20 words per line," adds Lurie. "If you're using a fluid design, use a font size that allows 15 to 20 words per line at 900 to 1000 pixels wide."

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

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

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

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

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

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

For a long time web design was really similar to print layouts. A site might be filled with dynamic content populated from a database, but the basic typographic systems of the grid ruled the way sites were designed. Much of our navigation was based on emulating physical systems such as folder tabs or pages. These conventions allowed us to make sites quickly and we all seemed to think everything was working just fine – and it probably was for the most part.

In the last few years everything has grown more interesting, complicated and interactive. From relatively small site designs to multi-layered applications, any interactive design now requires a new level of rapid testing, prototyping, and redesigning before building and launching a solid final product. The need for a designer to be well versed in the constraints and powers of the platform for which they are designing has never been more important. These are new challenges for any designer diving into the waters of interaction, but this is just where things get fun.

#1. Prototyping is essential

Prototyping is not an option. As Hemingway was famous for saying, “The first draft of anything is shit.” If testing or prototyping isn’t a formal part of your process, then in essence your final product is the prototype – and it's probably shit. Timelines and budgets can squeeze copywriting, IA, and prototyping from the fray of must-have’s. In that case, find a way of scaling everything so that you can keep some amount of testing and prototyping in your project. Your client, your team, or your investors will thank you when the return on investment soars.

The opportunity for great returns is an outcome of testing internal, iterating, and making necessary and smart changes to a site or a product before shipping to the public. If you’re not prototyping, then you're showing that you’re willing to let your audience use your product as though it were a prototype – an experience that has the potential to be damaging to your brand and long-term goals.

Read More: http://www.creativebloq.com/design/10-pro-tips-updating-your-web-designs-5126279

The Web has come a long way since it’s inception, and its design has changed drastically along the way. Weebly is highlighting just how much change Web design has had over the past ten years by taking a look at its own site.

Weebly says that over 250 million users now visit its homepage every month, but that wasn’t the case when it launched in 2006. Back then, Weebly tells The Next Web “MySpace was still a thing, and Weebly’s HQ was a Penn State dorm room.” No real desire for robust Web design at that point.

As web designers in Uganda, knowing where to look online for all the best news, tips, tools, freebies, tutorials and other useful resources is pretty important. But with thousands upon thousands of blogs out there focused on web design, which ones are actually worth reading?

Your time is valuable, so wasting too much of it browsing through a large number of mediocre blogs isn’t a habit you want to bring with you into the new year. By subscribing to a few reputable blogs that delivered the highest quality content over the past year, it’s safe to assume that they’ll be doing the same in 2016 – possibly with plans to deliver even better content.