WordPress is the most used CMS across the world today. It has attained the number one position because it is so simple to use and maintain, not only from a designer’s point of view, but also from the end user’s perspective.
In this article, we will look at a few different questions people have about WordPress. Some may seem downright silly, some a little technical, and some questions will be the ones that you yourself always wanted to ask!
How did we come up with the questions?
I simply searched for the term “WordPress” and Google suggested what people usually ask in its “People also ask” section from within the search result page itself.
So, let’s get the basics out of the way before we move on:
To create a self-hosted WordPress site you first need to download a copy of the latest version of WordPress.
Once you have the files, you need a place where you can host those digital files securely. You need a location that is always accessible online, a web server. This is going to be the home of your WordPress/Website files.
If you are just starting out, you can buy shared hosting which is relatively inexpensive. And you can move up to a VPS, Dedicated, or Cloud-based solutions as your needs increase with the popularity of your website.
Next, you need to invest in a domain name. It is the address that users will type to access your website.
Usually, both can be purchased through the same hosting company or through different vendors. Once you have these in place, you can easily install WordPress manually or using the famous 5-minute installation.
If you want to host locally on your computer you will need to download XAMPP on your PC or Mac. It will create the environment necessary to run WordPress locally. Usually, WordPress is set up on your localhost for development purposes only.
If that all sounds too complex, then you can simply create your blog or website on WordPress.com. It may be the best option when you are starting out.
WordPress is absolutely free to use both for personal and commercial use. As they say on their site:
Beautiful designs, powerful features, and freedom to build anything you want. WordPress is both free and priceless at the same time.
Though the software itself is free, you will still need associated services to put up a site of your own. And those can cost you money.
These associated services include a domain name, hosting, and the time offered by a WordPress professional to design and maintain your site.
This cost can be minimized by not hiring a designer and rather choosing a theme of your own, either free or paid. And investing in a little time understanding how to use & customize it. (Themes control the layout and design of your WordPress site.)
As I mentioned in the above point, there are some costs that are incidental to setting up a WordPress site. And these include the cost of domain and hosting.
Domain names cost an average of around $10 per year. And hosting can cost you as low as $4 to $5 per month. All in all, it should not cost you more than $100 per year.
The other one-time associated cost lies with designing the site. If you download a free theme and learn to use it and customize it, then you avoid the most significant cost in setting your own site or blog.
Or you can hire a freelancer who can setup and customize your theme for a few hundred dollars. Of course, there is no upper limit to what you can pay a design agency in developing a customized theme for you.
It all depends on what you want to do with your site, and your budget.
The answer to this question would depend on the type of website you are building.
If you are just installing WordPress and applying a new theme to a blog and customizing the logo, header, and footer. The whole process could be completed within 4-5 hours’ time.
For a WordPress site, customizations could take longer. As you will have content to be updated for each of the pages too. 10-20 hours should be enough for this task.
If you are building a theme from scratch, I would break it up like this:
Approximately 24-30 hours for designs for the homepage, internal page layout, archive pages, and the blog page. Coding the theme would take another 40 to 48 hours For testing and final touches, keep aside 10 more hours.(If you are building a larger site, it would inevitably take longer.)
Keep in mind that these are only estimates. And when working with a real client these estimates could be stretched beyond your wildest imaginations. No joking here.
There are innumerable benefits to using WordPress over other Content Management Systems. Listing a few of them briefly below:
Easy and intuitive to use: Using WordPress is easy and involves very minimal learning curve if any at all. And if you are a designer or a developer, the same holds true for you too. You will be up and running with the necessary skills to service your clients in no time at all. Easy to setup: You will be surprised with the fewer steps you need to set it up on your web server or localhost. It usually takes less than 5 minutes to do this. Lightweight and speedy: WordPress is lightweight right out of the box. It is around a 10MB download when you first download it from WordPress.org site. And therefore, very easy to handle in terms of uploading it to your server, backing it up, moving from one server to another, it occupies less space, runs faster etc. Highly scalable: With the right infrastructure and resources you can scale it up to several hundreds and thousands of users at the same time. So, no surprise that some of the most used sites like TechCrunch, The New Yorker, Sony Music, Time Inc, and many other significant names use WordPress. Most popular CMS: When it comes to its popularity, it is the number one. Today it powers 32% of all sites on the internet. This far exceeds the market share of any other CMS available today. Easily add features and functionality: WordPress can be easily extended to add more features and functionality as per your need. And you can do that easily with the help of plugins without knowing how to program or code in WordPress. Plugins are bits of software that can be easily installed on your existing WordPress site to add additional features and functionality.The other advantages of using WordPress include a thriving WordPress community, active development of the product, free software (also for commercial use), easy to find answers to your WordPress questions, active support through community Forum, a mature and stable product etc. The list of advantages goes on and on.
I doubt that you would start making money as soon as you start a blog. If you are just starting out, then, of course, there is a long way to go for you.
The process of generating income from your blogs would generally be in this sequence:
First, you would have to start a blog. You buy a domain and hosting and install WordPress. You choose WordPress as it is the best blogging platform out there. Then you choose a theme of your liking and your blog is ready.
But a blog is not a blog unless you have some useful content there. So, you have some niche or demographics that you want to cater to. That is a good strategy because then you would know exactly what type of content you want to create. Ideally one should focus on creating content that solves some problems and helps change the lives of your audience for the better.
Next step would be to get your content in front of your audience. Sharing on social media, engaging with your audience, a bit of on-page optimization, a bit of SEO, and lots of time and patience.
Once your blog starts to become popular. When the readership increases with time, it is time to start monetizing now. Monetization could be in the form of advertisements, AdSense from Google, affiliate marketing etc.
It is not easy. But nothing worthwhile in life ever is, right? It takes a lot of hard work, learning, and patience to create a sustainable income stream from your online blog. But it is totally doable if you are up for it.
All websites need hosting to be accessible over the internet. Therefore, yes you need hosting for WordPress.
If you sign up for a blog or a website at WordPress.com, then the hosting is already configured for you. You don’t have to buy your own hosting separately. You simply register a subdomain with them as part of the signup process and start treating it as your own blog or website.
However, for the self-hosted option, you need to download the WordPress files from the WordPress.org site. You are more in control of your website with this option, and therefore, you are responsible for everything that is needed to run your website.
And that includes Hosting.
WordPress is not a website builder. It is a Content Management System (CMS).
Website builders are more like visual editors. You drag and drop an element on a page, and you can see exactly how the page is going to look. While with WordPress the design is already set. The theme you have chosen for the site will control the appearance and layout of the site.
With a site builder, you expect to be able to change the site design as you deem fit. But with a WordPress site, this expectation is not there. It is understood that the design is already in place. You focus more on the content part of it, i.e. adding and editing content on the site.
Site builders are easier to use in terms of design changes, but site builders are less flexible in terms of what they can accomplish. WordPress, on the other hand, is very flexible and can be extended in many ways to add more features and functionality through programming & plugins.
However, if you like the idea of the convenience of a site builder, you might enjoy WordPress’ latest innovation: Gutenberg. Gutenberg is a completely new way to design WordPress sites, along the lines of a site builder.
It is indeed the most SEO friendly CMS out there today. It takes care of so much of the SEO stuff just out of the box that you don’t really need to be an expert to create SEO friendly pages and posts on your blog. They are automatically created for you.
For example, it creates pretty permalinks for all posts and pages. It also gives you the option to manually alter the URL yourself, so you are in full control. When you have a meaningful URL, both humans and bots can understand better what the page is all about.
Image resizing and optimization is also handled by WordPress. It takes care of URL canonicalization and other necessary HTML markups so that you won’t have to worry about them.
It would also generate a page title automatically for you. However, there are numerous SEO plugins that you can install that can handle this process in a smoother way.
All in all, WordPress today is one of the best SEO friendly Content Management Systems out there.
In this article, I have answered many of the questions that people frequently ask on WordPress. As you know, it is an overwhelmingly popular CMS and people have many questions about it.
Did I answer your question? I hope so. If not, then feel free to ask them in the comments below. I look forward to answering them for you.
Featured image via Unsplash.
It’s no surprise that some businesses are convinced that all they need is a Facebook page and some awesome paid posts in order to go viral. I get it. It’s relatively cheap. It’s easy. And they see it as a faster way to success than taking the time to build a website, grow an audience organically, and wait.
But social media virality is hard to come by and, when it does happen, can be short-lived.
Now, making a website or blog go viral? That can have long-lasting results for a business. But what exactly does it mean to make a website “go viral”? And is this something you need to worry about as a web designer?
A Word About What It Means to “Go Viral”
On the Internet, going viral happens when something — a social media post, a blog post, a video, a website — becomes so popular that word of it spreads like an actual virus. It almost becomes infectious, like anyone who comes in contact with it can’t help but be affected.
When you’ve worked in the digital industry for long enough, eventually you’re going to have to work with code that you’ve inherited from someone else. Whether this is part of a handover process from another company, written by a developer that has since moved on or written by a freelancer, sooner or later you’ll find yourself sifting through line after line of code that you didn’t write.
When this happens it’s easy to slip into a negative mindset. It might be using a structure you are unfamiliar with, seem over complicated, disorganized, or just different to your regular development approach — it’s rarely plain sailing.
Something built using a slightly different approach can quickly become unmanageable
“It’s not my fault, It’s already a mess” – letting yourself off easy with this type of attitude can create a Frankenstein’s monster of a website if you’re not careful. Something built using a slightly different approach can quickly become unmanageable if every developer who works on the project adds their subjective approach. Whether it be naming conventions, class identifiers or even JavaScript functions.
Below are some tips to help you prepare for and manage inherited websites and see them as something to nurture rather than dread.
The Internet as a concept, and as a community, is much like a teenager: it’s struggling to establish its identity, everyone is trying to tell it what to do, and it tends to lash out at both people who deserve it as well as those who don’t. It does so at random, and you’re not its real dad, anyway.
The practice of designing websites, however, has gone right past the teenage years and blown past the whole human-life-span metaphor entirely. Web design is, in my opinion, reaching an industrial age, of sorts. You know, the era of smokestacks and Charles Dickens’ really depressing novels.
Let’s see how:
The sewing machine was invented in 1755, about five years before the “official beginning” of the industrial age. This machine, and others like it, heralded the beginning of that age and the massive machines that would come after, but they also drastically expanded the production capabilities of individuals working at home, or in their place of business.
It started with software like FrontPage and Dreamweaver, and now we’ve got Squarespace, Wix, Weebly, Duda, Webflow, and a host of other options. They’re all designed to enhance the output of the individual, the hobbyist, the business owner, and the freelancing professional. Work that once might have taken a very long time for one person, or a reasonable amount of time for ten people, is all being done by one person, in a lot less time.
And if you’re a purist, you can always sew the buttons onto your web page by hand.
Think of the massive looms in old factories. Now it’s not particularly easy to automate creative visual work, as such. Most of the automation in web design is done at the coding stage, in both front and back end. But even with such simple tools as Symbols in Sketch or Affinity Designer can drastically reduce the work required to produce a large number of designs.
Or at least something like a large number of buttons. It’s not a perfect analogy to the factories of old, but the tools we have are making it consistently easier to produce designs of consistent quality, even if they also have pretty uh… “consistent” layouts and aesthetic styles. This sort of drastically increased output is the very definition of industry.
Increased DIY capability and automation in the industrial age led to a dramatic expansion in what people could afford. The increased amount of work in general meant that more people could afford that stuff, and thus, the middle class was born.
The same thing is happening in web design. For the hobbyist or professional building sites on the cheap, shared hosting can cost as little as a few dollars a month, and code editors are free. For less code-focused hobbyists and business owners alike, code-free website builders are attractive and largely affordable options, too. Plenty of platforms offer a straight-up free plan.
Getting a web presence of some kind has literally never been easier, and it’s going to keep getting easier.
Then, of course, there’s outsourcing and sub-contracting. These come in two major forms: software as a service, and labor. SaaS in particular has become exceedingly popular as a way to build a product that constantly pays for itself, leaving you to focus on maintenance, and improvements. The train engineers of old wish they could have worked on their trains while they were still running.
While few websites are, I think, built by orphans trapped in smoke-filled factories, we should not ignore the fact that there is a lot of cheap labor out there. And you know what? A lot of them are actually really good, and are only cheap because of the economic disparity between nations. This actually leads me to my next point…
One of the downsides of industrial ages as they happen all over the world is this: the constant push for progress sometimes leaves much to be desired in the way we treat our fellow humans. Of course, this isn’t happening to web designers in a bubble. The “gig economy” is often used as an excuse not to provide benefits for employees. Cheap labor is often taken advantage of in the worst ways. Overworking people to near-death is accomplished not with whips, but with Instagram and Twitter feeds praising the eighty-hour work week.
And the actual standards meant to ensure the quality of the product are often ignored. The W3C does a lot of good work, but they don’t actually have the power to enforce HTML validation. Well… that’s probably for the best, all things considered, but as we’ve seen, governments are also poorly equipped to provide QA for the Internet as a whole.
However, I should note that I greatly appreciate some of the government-led work done in the field of accessibility, particularly in countries that require WCAG compliance.
The proliferation of industry created a lot of jobs, and killed a lot of others. Design, however, is still a creative discipline, and thus there will always be room for good designers. Even so, automation and code-free design tools have people worried, and I can understand why. That said, lots of people will actually hire you to use Wix for them, so… shrug.
People outsourcing relatively easy tasks might save us, yet.
We call hand-crafted websites… well… that. Sometimes “bespoke”. Perhaps a better word would be “artisanal”, and we should just get used to being hipsters. I’m only mostly kidding.
In every industrial age we’ve witnessed, things got bad, and then they got better. We haven’t gotten rid of all the smoke stacks yet, but the world is in most ways a much better place than it was, and the Internet is developing faster than the rest of the world. It may be an industrial age now, but imagine what it will be like when they invent computers.
Wait…
Featured image via Unsplash.
Sometimes designs are of an acquired taste. That’s our theme for this month.
Each of the projects and trends featured here are things that you’ll probably either love…or hate. But wait to judge these projects until you navigate through them; most of them seem to grow on you the more you dive into the content. Here’s what’s trending in design this month:
Chaos by Design
Have you ever looked at a design and wondered “what were they thinking?”
But then … “that is actually pretty nice.”
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Introducing Textblock
A few weeks ago a frustrated face appeared around the corner of my desk. “Sorry mate, you don’t do any printing do you?”
“Well yeah, sometimes,” I said.
I have a dedicated desk in a co-working space, we share a printer, and it was this shared printer that was frustrating the face in question: “I’ve been trying for hours to get this bloody thing printed, I’m absolutely desperate, I can’t find the right driver anywhere…”
“I think you just log into the dashboard and download it,” I said. “I think that’s what I did, hold on let me try,” I said, firing up the office dashboard. “You go to printer instructions…”
“Yep, I did that.”
“…and then you click…”
“Oh God!” he wailed. “It’s a link isn’t it.”
Here are the instructions that he’d been struggling with:
An intelligent, professional person, had spent two hours searching for the right driver for a Canon printer, never realizing that the “Download Driver” instruction was a link.
As he slunk back to his workspace, it seemed impolite to enquire as to whether or not he’s color blind, but I’d put good money on it; if he is, that link probably appears mid-grey, blending in with the rest of the text.
Links are arguably the most important element in any document. Without them, the web is just a collection of files stored on the Internet. The perfect link is simple, honest, and usable. Here’s how to design it.
…and a good button is not a link.
We frequently misunderstand the role of links on the web. A link describes the relationship between two pieces of data, providing context, and often providing meaning.
Buttons perform actions, links form contextual relationships
A link does not perform an action. The printer driver link above should not be a link, it should be a button; buttons don’t link data, they perform an action.
It’s entirely true that the vast majority of GUIs allow you to tap or click a link in order to access the linked data, but that is simply a shortcut. The primary role of the link is to establish a connection between pieces of data.
Buttons perform actions, links form contextual relationships.
Central to the problem of how a link should be used, is the fact that the anchor element is flexible enough to be used in a number of ways without breaking. A mailto: link for example should not be a link (it’s an action, not a connection between pieces of data) that has escaped deprecation by being really very useful.
We have a whole hierarchy of headings—including the relatively useless <h5></h5> and <h6></h6>—but we have a single anchor element. In an ideal world we’d have multiple anchor elements to give semantic meaning to links, perhaps a <ae></ae> element for external links (data on a different domain) and a <ai></ai> for internal links (data on the same domain). At present the nearest we can get to giving links semantic meaning is using absolute paths for external links and relative paths for internal links.
We can of course apply different styles to different classes of anchor using CSS. It makes sense that to clarify purpose, internal links should be styled in-keeping with the site’s brand, but that external links should be distinct in some way.
In Tim Berners-Lee’s 1997 thoughts on the nature of UI, he states that:
the interface to a universal space should have a certain universal consistency
Certainly users’ understanding of how to use the web has developed since those words were written, but the essential point holds true; users prefer a UI that reflects their wider experience. While there is an argument to say that internal links should be in-keeping with a site’s brand to clarify what they link to, there is an equally valid argument that adhering to the default styles—blue, underlined, system fonts—for external links, not only simplifies an interface, but clarifies that the data being linked to is outwith the current site’s domain.
Whether inconsistency of links causes more confusion than it relieves should be addressed on a case-by-case basis. But in cases where internal links and external links are styled the same, in the interests of usability, it’s the familiar blue, underlined, system font approach that best serves the user.
Thanks to William Gibson-esque metaphors, we have a tendency to conceptualize surfing the web as traveling to different locations. Links are viewed as a gateway to somewhere else, when in fact they are a gateway to somewhen else. Take a look at your browser history. It’s not a map of locations, but a chronological record of events. Links are points in the timeline of our data consumption.
visited links are the low-hanging fruit of UI design
As important as links to future data, are links to past data: visited links. Visited links are important because it is visited links that contextualize our data consumption and highlight (by their elimination) that data that we have yet to consume.
Visited links can be a little crude—ideally a link would be compared against a user’s browser history to determine not just if the document had been visited, but if the document had been updated since the user’s last visit. Despite this, visited links are the low-hanging fruit of UI design—easily styled as a slightly desaturated, less urgent version of an active link—and provide invaluable information to the user about their experience.
The principle formalized by psychology as the Mere Exposure Effect teaches us that the more familiar something is, the more appealing it is.
The default color of a hyperlink in a browser, is blue. Hyperlinks appear to have been established as blue by sheer chance (presumably someone somewhere’s personal preference). The fortuitous decision benefits usability because almost no one has a blue sight deficiency; unlike red and green, we can nearly all see blue.
Whether a learned behavior, or an inherently more usable color, blue links are clicked more.
(Because of this deep association, no text should ever be blue unless it’s a link.)
Blue is the most popular color across the board. Blue is also the most common color in UI design, especially among technology and news sites.
The omnipresence of blue raises a challenge for designers: if the primary brand color is blue, should the links in the document also be blue, or does the use of blue in the general design obfuscate the location of links?
Whenever designing with a lot of blue, I’ve found users prefer complementary colors for links; orange, or green for example. However, with the proven effectiveness of blue links, it’s worth edging towards the blue end of the spectrum: reds should edge towards purple, greens towards turquoise.
The argument for underlining is that, as with the printer driver example, underlining reinforces the color indicator; if a person is color blind, they can still see the underline.
The argument against underlining is that it interrupts the flow of text. Google removed underlined links years ago with no apparent downside—at least not enough of a downside to cause them to reverse the decision. But then Google’s links are blue, the linkiest of all link colors, and less of a problem for the color blind.
If underlining text is genuinely too disruptive, there are two simple alternatives: you can either style a pseudo-underline by applying a dashed or dotted bottom-border to the link which will be visually less impactful, or you can highlight in a different way, such as applying a background color to the link.
(As with the avoidance of blue text, never underline text that isn’t a link; users will conclude that your link is broken long before they realize you made a poor design decision.)
Links should be identifiable at a glance. Interaction is inconsistent across devices, and relying on scrubbing the page to uncover links is a recipe for user frustration.
Links should be identifiable at a glance
Eye-tracking research suggests that users scan through links, just after titles, to identify the parts of the page most interesting to them. This ability is even more important for screen reader users, who can’t visually scan a page for relevant content, but can (and do) scan through links to identify interesting content.
When treated as bullet points, links describe not only the data that they link to, but the content in which they sit. You wouldn’t link to information on perfume from a paragraph on mountain bikes, so it’s common sense that if there’s a link to mountain bikes, then the paragraph in which it resides will also be about mountain bikes.
If possible, keep links at the end of sentences, or the end of blocks of text; this limits the interruption to the thought process, and creates a less disjointed experience. However, never employ the “more information…” approach.
Running a search on Google for “click here” returns 5,090,000,000 results. A similar search for “read more” returns 17,090,000,000 results. What a waste.
Beyond the evident SEO failures of “read more”, “find out more”, “click here” etc. poorly written links give the impression that the current content is abdicating its authority. You are in effect saying, “this information is shallow, there’s better information elsewhere.”
If a link is designed well enough, it is clear at a glance that it’s a link, and “click here” style instructions are superfluous.
It’s essential that links can be easily triggered, regardless of the delivery device; mobile sites need large enough hit areas, speech readers need distinct microcopy.
A link must always keep its promise
Links should follow the reasoned approach of the majority of use-cases. That means that internal links open in the same window, and external links open in a new tab. There are exceptions, a link to a privacy policy for example is an internal link but should be opened in a new tab. Whenever making this choice, ask yourself if the user is likely to need the back button. If so, use a new tab so it can be easily closed returning the user to the previous information.
No link should ever surprise a user, and that includes the type of content you’re linking to. If you’re linking to content that is NSFW, or behind a firewall, consider using the :before or :after pseudo elements to insert an icon next to the link, warning the user of what’s coming.
A link must always keep its promise. That means that when a user clicks, taps, selects, or otherwise triggers a link, they get exactly what they were expecting. And that includes ensuring that links are never, ever broken.
Welcome to our roundup of the best websites launched (or significantly updated) this month. July is a strange time to launch a site with the Summer slowdown in full effect, but these intrepid entrepreneurs have done so. We’ve got examples of great ecommerce, a couple of agency sites that we couldn’t resist, and lots of incredible art direction.
This month sees a big trend in compass navigation (a link in every corner of the page), and parallax is definitely still a big deal. Whether it’s inspired by the World Cup, or Le Tour, there’s a subtle gallic feel to a lot of sites this month…savourer!
Drift
Drift is a creative agency with some chops. Rejecting the minimalism that seemingly every other agency opts for, they’ve put together a charmingly animated, hand-made site. Not too functional, unless your aim is to communicate creative courage—they stand out.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Before the blog took off, before Tumblr became the face of fandom, but around a year after Geocities launched as a platform for Justin Timberlake fan sites, there was The Wiki. We looked upon The Wiki, and we saw its potential as a platform for crowdsourcing knowledge, collaborating, and educating. We saw that it was good.
Then Wikipedia was founded at some point, and the rest is history.
I love well-maintained wikis to a fault. Wikis have been a large part of my continuing education in web design, random trivia, and the minutiae of video game mechanics for a long time, now. Anyone who learns stuff on the Internet owes a lot, directly or indirectly, to wikis and their less-community-oriented cousin The Knowledge Base.
Even though many of the publicly available wiki software options are dated and confusing to operate and organize, they continue to power much of the educational portion of the web. There are more modern options, but most of the ones I’ve found are SAAS platforms for building in-organization private wikis.
Ladies and Gentlemen, wikis and knowledge bases need all the love we can give. That’s what this article is about: brainstorming ways to give back to the platforms that have given us so much. I’ve got some general ideas, and some very specific tweaks to the wiki formula that you might consider implementing on your own wikis, should you ever need to build one.
Stepping into a website that’s already well-established isn’t always easy. For starters, you have to be careful about not stepping on anyone’s toes (the client’s or even the previous designer’s) when providing feedback or suggestions on a new direction for the site. Secondly, there’s much more at stake with a redesign. Not only could a wrong turn hurt an established brand’s identity, but there’s also the disruption to SEO to consider.
That said, redesign projects can be incredibly rewarding. With from-scratch designs, there’s really no baseline to compare your work against. With a redesigned website, you can look back at the performance of the last iteration and compare it against what you’ve been able to accomplish.
If you’re intrigued by the prospect of tackling a redesign project, but spooked by the potential to do damage or get lost in the process, this guide breaks down what you need to do.
When approached with a redesign request, the first thing you should find out is, “Why?”
When it comes to redesigns, there are a number of reasons a client might be dissatisfied with the site as it stands:
Businesses don’t always maintain the same direction or goals. And sometimes a brand discovers its true identity after launch.
Asana’s branding story is an example of this. This is how their website and SaaS platform looked before:
As they explained, the true personality of the brand wasn’t effectively communicated through the logo, colors, and overall design. After assessing how they wanted their brand to be viewed, they pushed ahead with this redesign:
When the site was originally designed, your client perhaps hadn’t considered that they would need some key functionality for it.
Design trends change so much in such a short amount of time. Clients that are cognizant of these changing trends may approach you if they feel their site is being left behind.
The original designer failed to anticipate the move to mobile-first and now your client is in a bad spot. The Deep End’s case study demonstrates how even the most technologically savvy of agencies could have missed this opportunity. But they were quick to remedy the problem:
They were initially excited about the launch of their website. Then, a month passes. A few more months pass. And, soon, a year has gone by and they have seen no results from it. They want to know what’s wrong and get it fixed immediately.
Be sure to get them to explain how they believe this redesign will help them achieve the website’s goals (and define exactly what those are, too).
Your client tells you what the perceived problem is with their site. Now, you need to dig into the data to see if it checks out. The client may be unhappy with a certain aspect of the site or the design as a whole. Their intuition is likely right, but you have to verify that the problem doesn’t lie somewhere else.
During this phase, dig deep into the following areas:
Google Analytics Competitive landscape Keyword research UI design UX organizationThen, look at the entire website. Every. Single. Page. Do a full audit of what they have.
From this, you should be able to draw a conclusion about the true problem areas. Are there too many pages? Is the design misrepresenting what they do? Does the font need a refresh? Is there a key feature missing? Are images outdated or unoriginal looking? Build your redesign proposal from this and bring it to the client.
If you’ve never done a redesign project before, use the project workflow and checklists from your standard design projects. Review the steps and milestones against what you need to do in this redesign. Then, amend the steps, establish new milestones, and shape the redesign plan.
The tricky thing about this is that each redesign project will target different elements of a web design, which means adjusting your workflow from project to project. For instance, the redesign might only target:
Branding like the logo, color palette, typography, imagery, iconography, etc. in which case, it might only be a superficial redesign; Navigation structure for improved user flow or a complete breakdown of the navigation to remove unnecessary pages; Home page content for clearer messaging and user persona targeting; Customer flow which was preventing the brand from capturing more conversions.It’s not as if you don’t have experience with each of these elements. However, it’s the manner in which you work on each or how many of them you work on that will differ from a traditional web design. So, create your documentation, but leave it open to adjustment per the project’s requirements.
Unless the website was a complete mess or total failure previously, chances are good your client will ask you to be careful in how dramatically you alter the design and content. To preserve the business’s integrity, you’ll have to strike a balance between creating a stronger identity for the brand while not completely destroying all recognition they’ve established with customers.
Site maps, storyboards, and prototypes should all factor into your process now (if they hadn’t already). These tools give you a chance to tackle the redesign in incremental steps and to check in with the client before moving on. You might even want to think about running A/B tests on the live website to confirm theories you have about problematic elements before implementing anything in the redesign.
Also, don’t forget how these changes will affect SEO. Unless the site is moving to a completely new domain, you will have to do what you can to preserve link juice. This means putting 301 redirects in place, maintaining the URL structures for the most popular pages and posts, putting a greater focus on the most successful keywords, and so on.
I see no reason why you shouldn’t start accepting redesign requests, especially if you appreciate the problem-solving aspect of the work. That’s, of course, not to say you can’t flex your creative muscle here, but this sort of work will definitely appeal to those of you who like to strategize and test theories in design.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Stream UI Kit – A Beautiful Open Source Bootstrap 4 UI Kit
An OnDeck Vacation Study reported that only 57% of small business owners planned on taking a vacation last year. Further, only about a quarter of these owners would allow themselves a few days away from work.
There were a couple more disturbing facts that came out of this infographic. The first being that the majority of small business owners wouldn’t fully disconnect from work while on vacation; another discouraging statistic showed a greater reluctance among self-employed individuals—especially those with new businesses—to take a vacation at all.
Considering how costly burnout can be for freelancers and small business owners, it’s a much wiser choice to put aside any fears you have and make time for a vacation this year.
Rather than give you the usual advice (ie: plan ahead, notify your clients, disconnect from technology, and relax), I prefer to go the more practical route. Below, you will find 12 things you can do to have a stress-free vacation while keeping your business running.
When designers and developers work on projects, they have a lot of questions: What do our users expect to see on this screen? How are users supposed to interact with our product? What should our onboarding feel like? These questions are commonly asked during product development.
Every team wants to reduce the risk of incorrect design decisions and as the complexity of products increases, the digital product design industry puts usability practitioners in high demand. Usability practitioners are people who help product teams make informed decisions. In most organizations, the primary role of usability experts is design validation—making sure that a product is usable.
But many usability practitioners (particularly those who are new to the field) complain that product teams don’t act on their research results. While this could be due to many different issues, most often it is due to poor usability reports; if product teams have trouble understanding findings, or don’t know what to do with the findings, they’ll simply ignore them.
That’s why it so important to make reports actionable. In this article, we’ll share eleven tips that help usability practitioners to reach this goal.
Most companies have a clear understanding of what their business goals are. The reason companies invest money in usability analysis is that they believe that it will help them reach their goals.
It’s possible to put more weight into usability reports by creating a direct connection between solving usability issues and reaching business goals. Thus, usability experts should take enough time to figure out what the key business objectives are and make sure that the usability insights are aligned with them.
Imagine when someone opens a usability report and sees a sentence like: “The process of purchasing a product was hard,” without any additional details. With a high probability, they will consider such a finding as too vague. Vague findings don’t give product teams many insights. A lack of detail can, at best, leave teams wondering what the problem was. But at worse it can lead to an unfavorable outcome—when a product team misinterprets findings they can start solving a wrong problem.
That’s why all findings in a report need to be specific. It’s essential to write usability findings in a clear way that helps the team identify the cause of a problem and work toward a solution. Thus, instead of saying “The process of purchasing a product was hard,” provide a clear context for the issue. Say why the process was hard. Were too many steps involved? Were field labels in forms unclear? Make it clear in your report!
Describing findings in relation to users is a relatively common problem of many studies. “The user had to do this” or “Unfortunately, a user was unable to …” Although such statements sound innocent, they can cause significant damage to your reports. Such language switches the focus from a design and puts the blame on the user. It becomes a user problem, not a product problem. When team members and stakeholders read such findings, they might think “Well, this user wasn’t experienced. Maybe we should conduct another testing session with more experienced testers?” and can dismiss the issue.
One of the purposes of a research study is to generate empathy for the end user. Good UX practitioners always start usability testing session with words “We’re not testing you, we’re testing our product.” The same attitude should be used in usability reports.
A famous Charles Eames quote: “The details are not the details. They make the design” is a bad joke for some usability professionals.
All too often they become too focused on the details, so they forget to notice huge issues. For example, when analyzing specific user flow, it’s easy to be focused on providing concrete recommendations on how to improve user experience (e.g. changing the size of the buttons, renaming labels, etc.), but forgetting to notice that the entire flow doesn’t match user expectations or doesn’t meet their needs. If users have trouble at every step, perhaps it’s the overall flow that’s to blame, rather than separate details along the way.
The goal of user research and usability testing is not only in finding issues and defects; it’s also proposing solutions to those problems. Too frequently usability practitioners conduct usability testing, track all issues, but don’t provide recommendations on how to fix the problems. Recommendations play an essential role—they help determine next steps and make the results actionable.
Usability practitioners are the right people for writing recommendations because they have unique expertise in thinking about design solutions. They run lots of usability tests and have first-hand knowledge of what works and what doesn’t work for users.
Writing useful and usable recommendations is a skill that all usability professionals should master. Here are a few things that should be taken into account when writing recommendations:
Avoid vague proposals: Vague recommendations such as “Make the error message clearer” doesn’t say enough for people who’ll read reports. It’s essential to make recommendations constructive by providing sufficient details. Avoid biased recommendations: Stay away from assumptions. Reference studies and best practices in your report. Discuss your usability recommendations: Talk with designers, developers, sales and marketing teams to learn what works and what doesn’t work both from a business and technical point of view. The wisdom of the crowd can help you to come up with better solutions. Write recommendations in the readers’ language: The readers of recommendations are not necessary usability specialists. Thus, avoid usability jargon such as “508 compliant” when providing recommendations. Visualize your recommendations. A picture is worth a thousand words and this rule applies to recommendations. Visualizing recommendations doesn’t mean that usability specialists should create high-fidelity interactive prototypes. Creating a quick sketch to illustrate a point is totally acceptable.
Work closely with the design and development team, rather than simply delivering a report and walking away from the project. Make team members and stakeholders contribute towards study designs.
Here are a couple of tips to take into account:
Ask designers, product managers, marketers about their expectations before conducting testing. By asking a simple question “After we conduct this research, what results would you expect?” you build interest to the upcoming test session. Invite team members and stakeholders to watch usability testing sessions. Nothing beats watching how users interact with a product. Seeing how users struggle when working with a product will make stakeholders understand the value of session.
Readers of usability reports are busy people, and it’s relatively easy to overwhelming them by putting too much information in a report. Long lists of recommendations are less likely to be read and acted upon. Remember that with each additional issue mentioned in a report, you decrease a chance that readers will reach the final page of your report. Thus, keep the report short and focused.
No one team has infinite time to solve all possible issues which were found during usability testing. It’s vital to understand that every issue that was discovered through usability testing is not equally important. Usability practitioners should prioritize all findings and put a focus on the most important ones. Ranking findings as low, medium or high severity helps the team understand what critical issues the usability study exposed
But before assigning a priority, it’s essential to work with a product team and stakeholders to build a consensus around what is considered as a high priority usability issue vs. what is recognized as a low priority.
Don’t just list your findings and recommendations; describe them in a format of a story—a story of interaction users with a product. Usability reports are the most impactful when they illustrate problems using video clips of test participants and when they contain participant quotes recorded during testing sessions.
It’s worth creating a few versions of usability reports for different audiences. For example, when it comes to writing a report for developers, you can provide more technical details, but for stakeholders, you may only skim an executive summary of prioritized issues.
It’s not enough to conduct testing, send a report as an email attachment and believe that team members will read it and act upon it. Usability practitioners should actively market their findings—make sure every person who needs to know, is familiar with your report.
Once upon a time in the long lost world of the 1997 (more or less), a little boy was growing up watching Hercules: the Legendary Journeys, and Xena: Warrior Princess on the weekends. He got a Hotmail account because all of his siblings had one; but he didn’t really know anyone else who had email. Still, the spark was struck, and his interest in the Internet was born.
Around the same time, GoDaddy was born; born into a world of wondrous possibility, creativity, and hope for a technocratic utopia that we were all sure would be made possible by the Internet. Well, that didn’t work out so well, but GoDaddy, at least, would go on to become the largest ICANN-approved domain registrar by 2005, and was the first place that little boy ever bought a domain name.
In that time, it was common for Internet companies to embrace the wild west of the Internet with branding that reflected the “wacky”, “zany”, and generally Nickelodeon-ish aesthetic preferred by those who were engineers first, and designers second…or fifth–look, it took a while to get the print guys on board. Anyway, anyone who was anyone used either a sort of “hand-made” look in all of their branding, or super-corporate branding a la IBM.
That age is long gone, with both the informal-looking branding and our dreams of technocracy drifting into the past. GoDaddy had already updated the text in their logo to look a little more modern back in 2016, but now, the mascot informally known as “Daddy” is going away, too. It’s the end of an era.
(For comparison, we turn now to these images sourced from Logopedia, which is a real thing I just found out about. I plan to waste a fair amount of time there.)
When you work for a user experience design company for as long as I have, you start to notice the cyclical nature of industry trends. Just like fashion or art, what goes out of style inevitably resurfaces a few years down the road, only to become adopted by the mainstream, and fade into obsoletion once again.
In the digital design world, there’s maybe no better example of this than the rise and fall (and rise) of the gradient. Considered a lynchpin of interface design in the nineties (how many geocities sites had a gradient WordArt header?), the trend likely dates back even farther. Consider this iconic logo:
‘Back To The Future’ is a fitting example for a design trend that has just recently resurfaced today, perhaps most notably in Instagram’s logo redesign in 2016 and Spotify’s dual tone playlist icon. Gradients have become increasingly popular in the user interface design world, and for good reason—they inject depth and texture to the interface. They serve unique, even conflicting roles: gradients realistically mimic the colors we see around us (rarely do we encounter single tones in the real world), but they can also be used to create color patterns we’ve never seen before.
When used improperly, gradients spell out a design disaster
The gradient is a powerful design technique, and with great power comes great responsibility. When used improperly, gradients spell out a design disaster. They can muddle a layout, distract the user, and ruin an interface’s entire aesthetic. In this article (with the help of my trusty team of UX designers), we reveal the secret to crafting a gradient that elevates your interface to the next echelon, rather than remind the user of 1997.
No matter how much we might wish otherwise, money is integral to our society and our lives. It’s a powerful motivator, and it can tempt even the most morally upright and ethically-concerned among us. And let’s be very clear: I try to be a decent person, but I would not call myself the “most” anything. For all that I once dreamed of being a superhero as a child, I can’t claim superiority now.
And so when Satan (I’ll explain…) came and asked me to name my price, I very nearly worked for him, or some of his representatives, anyway.
Imagine, if you will, a political party that most rational people would call “evil”, or at the very least: “misguided in the extreme”. While many people the world over are reasonably concerned about things like immigration, these people would be the first to sling racist nicknames around. Not for free speech, oh no. Because they liked it. They genuinely believed themselves to be on a crusade against impurity, against invaders.
They weren’t violent, as such. No white hoods. They just wanted everyone else to “stay home”, and weren’t afraid to use dirty political tricks to achieve this. They were ignorant. They believed every crackpot theory that even smelled like a conspiracy.
A party name just popped into your head, didn’t it? There are parties like the one I’ve described all over the world. Sure, it’s that one. Let’s go with that one. For brevity’s sake, I’ll call them the PoS, which mostly stands for The Party of Satan. Last note before the story continues: they are not in my country.
They approached me online, and asked if I would be interested in doing some design work for them. I was, as you can imagine, quite hesitant. Well, no one starts out with the intention to sell their soul. But I was curious. How could I not be? For one, I wanted to see if they were as bad as everyone said.
They asked me to look at a website they’d set up for their very own PoS news network: just a simple WordPress setup with a minimal theme. They wanted to know if I’d “spruce it up” a little, and generally just make it look more appealing. And I actually said “no” to that. I couldn’t bring myself to directly work on anything they touched. That would put me too close to the racism, in my own eyes.
But this was a political party, so they had money. I was a relatively new and poor designer, so I wanted some of that money. I decided that I could probably live with it if I worked only as a consultant. I could look at their site, and tell them how to make it look a bit better, and make it more usable. It wasn’t anything they couldn’t learn themselves with some Googling, anyway. After spending quite a bit of time rationalizing (I’ll explain…), I thought, “I’ll ask them for [a lot of money]. If they say yes, then what the hell?”
Well, they didn’t even blink.
My rationalization was that I lived in a different country, surrounded by people they didn’t like very much in any case. I would take that money (which, at the time, I could have lived on for a year), and spend it in the local economy. The money would only benefit their “enemies”. And it was not as if they would simply shut down and fall apart without my help. Some “good” might as well come of it.
I wish I could tell you that everything fell through when I came to my senses, and realized that no amount of money was worth my integrity or self respect. The truth is that my sense of integrity was still forming at the time, and I had no self respect to speak of. The truth is that I could only think of myself, and how I could live off that money while working on grandiose ideas like “writing a book”.
I was in my very early twenties. That would have been a terrible book, anyway.
It was mere chance and a lack of forethought on my part that saved me from making the biggest professional mistake of my life. I had another site that I’d started with a friend. It was a sort of side agency targeted at small business customers who wanted to get their first websites up and running. And on that site, I made the mistake that prevented the other, much bigger mistake: I listed my prices.
The prices listed for small business websites were, of course, much lower than the one I had quoted to the PoS for mere consultation. They, to their credit, did their research, and saw those prices. They emailed me asking about the pricing discrepancy, which was more than fair. I couldn’t very well tell them, “I asked for way more from you because you’re Satan. And because you can afford it while they can’t. And I’d charge any other political party the same, probably.”
Well, I wanted to, but I didn’t. That was perhaps the first professional thing I did in that whole situation.
It was after everything fell through that I realized I’d gotten very lucky. If I’d had any hand in that party’s operations, I would have hated myself for it long after. And if they’d put my name anywhere, I might never have been able to work with people I actually liked ever again.
Stick to your principles, simple as that. I guess, if I’m honest, these sorts of situations do a lot to help you define your principles, and to see how far you’re willing to bend them. I saw, I was disgusted, and I developed a stricter personal code.
And if you do intend to betray your principles for money, for goodness’ sake don’t list your prices anywhere. Your integrity should not come cheap.
You can build some pretty cool stuff with JavaScript. And you can build most of that stuff with plugins to save yourself the trouble of coding from scratch. One of the toughest features to build is an image cropping UI.
This has to support image uploading from the user, then it has to take that image into the frontend and let the user perfect their crop. After that it passes image crop data to the backend so the image can be cropped and saved.
That’s a lot of work!
Save yourself the trouble and use one of these free plugins to offload the heavy lifting…
Wix Code is a powerful new tool from cloud-based site builder Wix, released in December 2017.
Using Wix Code you can build scaleable applications and webpages. Pages can even pull data from the built-in database collections, to be fully dynamic. Plus you can add JavaScript to customise your front-end entirely.
Wix Code gives designers the kind of granular control that until now has been out of reach without hiring a developer to script a bespoke site.
Wix Code Features
Wix Code lets you build dynamic sites easily, and collect data from users, all without code; then it opens up the code option to give you even more control.
Your portfolio is often a company or client’s first impression of you. Yet while we would dress up and prepare our talking points for an interview, we tend to neglect our portfolio or follow design trends that don’t represent us well.
In my work with Semplice, a portfolio system for designers, I’ve seen hundreds of design portfolios over the years. And I continue to see common trends that could be holding designers back from their dream jobs. Below are five simple portfolio mistakes that can easily be fixed and make big difference in the work you do in the future.
1. All Photos, No Case Studies
As designers, we naturally focus on the visual aspect of our portfolios. After all, the point of our portfolio is to showcase our designs. But in most cases (with the possible exception of things like playgrounds or mood boards), your readers need, and want context for your work. Don’t just dump a bunch of photos on the page and leave it up to us to decipher what they mean. Write case studies for every project that walks us through your approach, from challenge to solution.
How to Do it RightWriting case studies feels less daunting if you break your project down into phases. You can even start by writing longer captions and a headline to go alongside each image, as shown in Mackey Saturday’s portfolio below. That’s basically all you need, since people will be scanning your page to see what’s most interesting to them. Keep it simple and and straightforward (no buzzwords or insider language), and you’ll find it’s quite easy to write case studies that elevate your portfolio significantly. Get more tips for writing portfolio case studies right here.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
What I Learned at Google as a Designer
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
If there’s one thing that we all have in common it’s having to use two hands to do anything on own phones. Am I right? Well, lucky for most of us, Opera has just released a new web browser for Android (sorry iPhone users) that makes it easier to operate interfaces with while one handed.
One of the worst things to try to do when only using one hand is typing. Specifically speaking, it is the worst when you have to move your thumb all the way up to the top and tap the URL box. All of this only for you to accidentally tap the screen on the way back down, restarting the process. Not anymore. Opera designed the browser so that as soon as it’s opened up, the URL box is highlighted and the keyboard is ready to go. No more of this four fingered balancing acts with our precious, priceless phones. That alone deserves a round of applause.
Don’t get up and leave just yet, it gets better. Opera has integrated what they call the “Fast Action Button”. This function allows you, at any time, to quickly swap to another site with the press of a button. Its design is pretty seamless in the fact that it literally only take one finger.
The button is located in the middle of the bottom of the screen. This, means that it’s out of the way, but not out of reach. At a moment’s notice, you can be bouncing back and forth between not just one or two, but multiple web browsers.
With the press of the button, you’ll open up a slide-wheel style menu that simply requires you to slide your finger to the desired site. No exiting browsers or clearing old tabs required.
Not only have Opera hit that nail right on the head, but they’ve driven it straight through the coffin of all other mobile browsers
Perhaps one of the coolest features that the browser has to offer is the ability to push websites from your phone to your computer. That’s not the end of it. As long as you’re also using Opera on your computer, you can send them right back to your phone. Some of this site swapping will happen automatically. When you’ve finished on your computer and have moved on to your phone, open a new tab and a “Continue from computer” option will pop up, allowing you to continue what you started. However, if you want to make sure everything is transferred properly, you can use the feature Opera is calling “Flow.”
Flow allows you to simply click on the icon and transfer the website, including the saved data to your phone or vice versa.
These are all extremely handy features. Opera is well known for ingenuity when it comes to mobile browsers, but this really takes the cake. This is exactly what Android mobile users have been looking for and it couldn’t have come any sooner. The reason people use their phones so often is for convenience sake. Not only have Opera hit that nail right on the head, but they’ve driven it straight through the coffin of all other mobile browsers.
Opera Touch is designed to do nothing but make our lives better with a feature rich browser that promises the easiest browsing in history. It’s easy to see exactly why this is such a big deal for anyone that uses their phone for not just work, but anything. It’s simple, straightforward, and easy to use for anyone. We all need a little simplicity in our lives, don’t we? Don’t just take my word for it, go and check out their features below and be sure to keep up with any updates they may have in the near future. What are you waiting for? You have a browser to download.
Communities don’t start overnight, and a customer base is not, by default, a community. When fans of any particular brand of software start talking, though, communities are bound to emerge. I have fond memories of a number of tutorial sites, you know?
Well Affinity, the company behind Affinity Designer and Affinity Photo, has apparently decided to try and jumpstart this process by launching Affinity Spotlight.
This new site does double duty as a learning resource for designers and photographers, and as an attempt to build a community around the Affinity brand. The site features tutorials, interviews, behind-the-scenes style articles, and articles geared toward plain old inspiration. It’s a bit like a cross between Tuts+, and Adobe’s own blog. Affinity Spotlight has a heavy focus on teaching the basics of its software to readers, but it also has a lot of content about the more conceptual aspects of creating art and design.
Since it is a fairly new site (having only just officially launched), there isn’t a ton of content just yet. They have content that goes back to December of last year, but the early stuff is basically all just news releases. Their learning-focused content is beginner-level for now, with titles like Blend modes explained, and Raw, actually (a title that I quite like).
Their inspirational and behind-the-scenes content, features some rather stunning work, by talented artists and designers. This, I think, can be enjoyed by creatives of any skill level, so if the beginner-level tutorials don’t appeal to you, you should go check that out.
It wasn’t all that long ago that web and product designers were presented with a choice: Fireworks, Illustrator, or Photoshop.
All owned by Adobe, they represented an industry that was dominated by one company. You either spent the large sum of money to buy the individual software or entire creative package, or used a lesser-known, less extensive (and expensive) software.
For a while, Adobe continued to innovate with this software, before beginning to rest on their laurels earlier this decade; it opened the door to new and inventive startups like Bohemian Coding—makers of Sketch—who very quickly began to gain a foothold on the web and product design industries. It drew users away from Adobe software at such a speed that they were forced to react. Similar new features were introduced to current software applications, as was a product design-specific software in the form of Adobe XD.
In more recent times we’ve seen the release of an incredible number of new product and web design tools: Figma, InVision, Framer, Gravit, Justinmind, Atomic, Alva, and Affinity Designer make for just a few of the companies to release competing design tools in the last few years.
the industry is now fragmented with designers all opting for different software and tools
The competitive element has pushed the product teams to innovate at never-before-seen levels. It’s led to some neat and impressive features around collaboration, prototyping, optimization, and workflows. Not only has it resulted in the end-products being better for the designer, it’s also lead to greater competition on pricing. Long gone are the days of paying hundreds of dollars up front for an Adobe software package. Many applications are now under $100, with others providing their software at a low monthly fee; others like Figma and Alva are entirely free to use for students and individuals.
With so much innovation and competition on pricing, it’s hard to believe there can be any downsides to this more competitive industry. But as in any industry, where a demand is formed and publicized, money and investment follows soon after. Typically this wouldn’t be a negative for the end user, however in the software industry there is more to consider.
Where once there was an industry standard software in Adobe (and later Sketch to some extent), the industry is now fragmented with designers all opting for different software and tools. It has formed an environment where there is great friction when collaborating, working with client files, and working in multiple teams.
Cross-platform compatibility of software—and often a lack thereof in the design industry—only compounds the issue further. No longer is it as simple as expecting a PSD at the end of a project, or syncing a Sketch file across a team. Instead there are so many options that there is no longer a standard format. SVG has its place but is far from usable as a format to share complex designs and prototypes, and collaborate across individuals and teams.
For the up and coming designers of the next generation, it’s making for a complicated scene of design software. There’s no longer a go-to option as there was with Photoshop and Sketch. While that often means there’s greater scope for finding one more specific to your needs and desires, it can otherwise be somewhat overwhelming and off-putting for beginners. It gets even more confusing when a number of software providers maintain different pricing models, operating system compatibilities, and seemingly similar feature sets.
For the freelance designer…the issue becomes magnified considerably
So where once we could suffice with one—possibly two—software applications, we now require multiple. For the freelance designer who is dropping in and out of teams and collaborating with new clients every week, the issue becomes magnified considerably.
To work this situation, they can now be expected to have access to most, if not all of this software and services. It becomes not only complex and overwhelming, but expensive too. It means having multiple applications open at once, resulting in a need for more capable and expensive Mac equipment. It means switching between tools you’re not a fan of, and having to learn new features at quite some pace. And the subscription and up-front costs can land a hefty bill on top of other expenses like business overheads and complementary tools like Marvel and Zeplin.
The situation looks to intensify over the coming years. More and more new applications are launching all the time, with many releasing in just the past six months. Some will come and go, while others will be adopted by a large enough proportion of designers to survive.
In a growing industry with more new designers trying their hand at design every year, there’s a place for most of these tools to survive and flourish. With that will come greater fragmentation and a negative impact on compatibility and collaboration. Teams will adapt and use a chosen software across the company. But freelancers and independent contractors will suffer the brunt of this development, and may eventually determine it as a factor to look to full-time work as a solution.
Unless there becomes a standout among this competing software, the situation looks set to continue driving innovation and competitiveness on price. But this will continue to worsen aspects such as collaboration as time goes on.
The design industry needs to develop some kind of solution. Whether that consists of an industry-standard file type, or a means to export designs to other software, is yet to be determined. Until then, freelancers will have to use workarounds and attempt to form some kind of system which allows them to switch between software and format dependent on client, company, and collaborators.
The popularity of video content has increased dramatically over the last few years and it’s easy to see why; videos are engaging for all age groups which also makes them an important marketing tool.
Businesses have developed dedicated video marketing strategies which generate more leads and boost sales. Video content is also being used by these same businesses to build a better brand experience and stand out from rest of the competition.
And while it’s entirely possible to create high-quality video content and share it through platforms like YouTube, there’s no guarantee that your video will get noticed by the masses. Why? There’s an enormous amount of video content being uploaded to the Internet every day.
In this post, we’ll step through five ways you can optimize your videos for search engines. By the time you’re done reading through this post, you’ll have a clear understanding of how you can implement video SEO techniques to improve your search rankings and reach a bigger audience.
Before we begin, let’s quickly take a look at the basics of video SEO and why it’s important.
The fact of the matter is that most consumers search the web when making purchase decisions. So, if you want to take advantage of video marketing, your videos should be optimized for search engines. Video Search Engine Optimization (video SEO) techniques are used by successful video content creators to improve their search engine rankings and increase visibility in search engine results pages.
Nowadays, it’s pretty common to see people consuming video content on their phones at sports events, walking around campus, doing chores around the house, and during their daily commute. Why is that so?
According to Cisco:
Every second, a million minutes of video content will cross the network by 2021. Globally, IP video traffic will be 82 percent of all consumer Internet traffic by 2021, up from 73 percent in 2016. It would take an individual more than 5 million years to watch the amount of video that will cross global IP networks each month in 2021.Think about it for a minute. That is an estimate of enormous proportions. You might be thinking What has this got to do with video SEO? Well, SEO itself is just one important component of digital marketing. The other crucial element is converting your video content traffic into paying customers. Videos can be the perfect tool to help you do just that.
If you want to take advantage of video marketing, your videos have to be optimized for search. Here is how you can drive more traffic to your video content and make your video search results more visible while generating quality leads.
Over the years, there has been a considerable increase in the usage and popularity of video. They help explain complex topics in a simple way and they play an integral role in increasing conversion rates. Your decision to adopt video as your go-to digital marketing tool is going pay you serious dividends—assuming you optimize your video content for search.
It’s pretty easy to see that video is gaining momentum. Let’s step through some of the different ways you can use video SEO to stay ahead of your competition.
You’ve probably noticed that Google has been displaying more and more videos in search results—a huge chunk of it coming from, to no one’s surprise, YouTube. Video publishing sites like YouTube and Vimeo are huge sources of traffic that receive higher click-through rates than plain text results.
Keywords are responsible for search results displayed on two of the largest search engines on internet—Google and YouTube. For this reason, if you want your video to be successful, you’ll have to use keywords. But how do you find keywords?
If, for instance, you’re in the web design niche, you could start out by running Google searches on terms like web design tutorials or web design tips and tricks.
Now that you have a good keyword to start out with, the next step is to check its search volume. We recommend using the Google Keyword Planner for this. Keywords that get anywhere from 1,000 to 10,000 monthly searches and have low to medium competition are generally good to use.
Tags are keywords assigned to videos. Think of them as the set of words that sum up what your video’s content is about. For those of you who don’t already know, tags, filenames, and descriptions play an integral role in video SEO.
Since you already have a keyword picked out, go ahead and use that in your video’s tags. This is the tag that you want to focus on and optimize your video for. Remember, you can (and should) use more than one tag as long as it’s relevant to your video’s content.
YouTube gives you 5,000 characters worth of description text that you can use to describe what your video is about. And if you’re not using those 5,000 characters to gain some SEO advantage then you’re missing out. Best practices indicate that you should use your keyword (the same one you used as your primary tag) a few times in your video’s description.
Finally, make sure you save your video with your primary keyword as its filename because there are a number of third-party tools on the web that crawl through and factor in video filenames even if Google and YouTube don’t. So, instead of saving the original video file as vid1.mp4 or youtube-vid.mp4, use your primary keyword in its filename. For example, we’d save the video as web-design-tips-and-tricks.mp4.
Video transcripts are a complete textual representation of the content spoken in the video. Metadata and video tags do not offer as much detail of your video’s content to search engines as transcriptions do. Search engine bots crawl text and use it for indexing. So, a video transcript helps search engines better understand the video’s content and improve its ranking.
Follow these steps to transcribe your own video files on YouTube:
Your transcription file should be saved as a plain text file i.e. .txt. Using special characters can disrupt speech recognition matching and readability of the transcript. A double line break should be used to signal long pause or new sentence. Add >> at the start of the new line to identify speakers or change of speaker. Insert a link to your website in the audio transcript at the end of the video.Taking this DIY approach to transcribing your video content will help you deliver more value to your viewership by improving their user experience and it’ll give you the opportunity to use the primary keyword you’re targeting for, a few more times.
Give each video its own dedicated page on your website instead of publishing multiple videos to a single page. Google gives preference to the first video it finds on a web page and ignores any other video content it finds on the same page. To work your way around Google’s video ranking preference, organize your web pages in a way so that there’s a single video on a page (or post).
You might also be tempted to publish the same video to different web pages on your site to increase its visibility; for instance, if your video is about web design tips and tricks then you might want to publish it in a blog post that you wrote about web designs tips, and you might also want to show it to visitors who land on your Projects page to showcase your ability; this is a strict no-no.
What this does is that it creates internal competition on your website for each instance of the video that you’ve published. Think of it this way, when someone searches for web design tips and tricks on Google, Google’s algorithm has to decide which page to display in its search results. And if all of your videos views are split among three different web pages, your chances of showing up in the search results will be pretty low. However, if you had published it on a single page, and that page was racking up all the views, comments, and impressions, then you’d have a better chance of showing up in search results.
Video sitemaps provide search engines with metadata about video content on a website and are an extension to your website’s existing sitemap.
You can use the sitemap to tell search engines about the category, title, description, length, and target audience for each video you embed on your website. In addition to this, you can also use it to give search engines more information about your video e.g. play page URL, expiration date, restrictions, and platform.
If your web page has a video on it then it’s sitemap may look something like this:
Video content is gaining momentum.
There are a number of different ways that you can use video SEO tips to increase your video’s visibility, improve its ranking, and show up in search engine results pages. We showed you some of the ways you can get started with video SEO on your own website and, hopefully, you’re in a good position to take things further.
We're located at Office 7,
35-37 Ludgate Hill,
London,
EC4M 7JN.
2024 WeebDigital
+442 081 233 277
hello@weebdigital.com
