What is Web Design?
Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.
Why is web design important?
First impressions really matter. We can’t stress this point enough: if you don’t have a strong web presence, you’re holding your brand back.
Prospective customers who search the web for your brand and find nothing might think you’ve gone out of business. If they search and find something subpar, they’ll get the impression that you don’t care much about your company or product. Make every relationship that begins on your website a great one by getting your web design right.
Now that you know what’s what and who’s who, let’s look at some tell-tale signs of great web design and what distinguishes it from not so great web design.
What does good web design look like?
Good web design isn’t subjective. With other types of design, like illustration or sticker design, a lot of what constitutes “good” is up to the viewer’s taste. With web design, the line between “good” and “not good” is much more defined. A well-designed website is a website that perfectly creates the experience your visitor is looking for.
Web design that works is web design that converts. In webspeak, “convert” means getting the user to take a specific action. When a user follows through with an action that your website set them up to take, your website made a conversion. Conversions can be anything, like signing up for a newsletter, making a purchase, opening an account or accessing more content on the website.
Effective web design brings a few different elements together to promote conversions. These include:
- Compelling use of negative space
- Clearly presented choices for the user (the fewer choices the user has, the less likely they are to become overwhelmed and confused)
- Obvious, clear calls to action
- Limited distractions and a well thought out user journey (ie. using only images and text that are 100% relevant to the subject on the page, featuring only buttons that lead to desired actions and using font variations for emphasis and calls to action, not just for the sake of featuring different fonts)
- Responsive design (a design that resizes and reorients itself to the user’s screen, making the website easy to use on any device: phone, tablet, laptop or desktop browser.
- Appropriately sized fonts that follow a hierarchy (see “Limited distractions”)
- Relevant, high-quality content and images that hook your readers’ attention
- A balance between the amount of text and images on each page (too much text can overwhelm a visitor, too little text can be equally disengaging)
Web design: what doesn’t work
We’ve gone over what good design is. Now let’s talk a bit about what it isn’t. As a general rule, visitors shouldn’t have to do any work to use your website. The whole experience of using your website should be straightforward and intuitive.
Here are some examples: Clear calls to action are great web design; murky ones are bad web design. High contrast fonts are smart, effective web design; low contrast fonts that are hard to read are poor web design.
Here are a few other elements to avoid:
- Distracting images and backgrounds. As a general rule, stay away from tiled backgrounds. Though there are a few select instances where a tiled background could be a good choice, in most cases they’re distracting.
- Non-responsive design. Nowadays your website simply needs to be mobile responsive.
- Unclear links and buttons. Visitors shouldn’t have to hunt for links and buttons, they should be able to quickly see which images and pieces of text will take them to new pages or confirm their choices. Similarly, users should be able to clearly recognize fillable fields.
- Generic or irrelevant stock photos and filler text without valuable information.
How to get web design done
When, getting web design right is a complex process and there are lots of things to look out for. Thankfully, you don’t have to do it alone. When you’re working with a professional web designer you can rely on their skill to get the perfect result.
There are a few different ways you can get the website you need. The way that’s right for you and your company depends on how complex of a website you need, how much you want to spend and how much of the work you can do yourself.
You can work directly with a freelance web designer. Simply browse designer portfolios and pick the designer you like best and who fits the style and look you’re going for. A freelance designer can customize an existing template or design a completely fresh template for your website. If you want your website built from scratch, you can work with a freelancer who has the skills to make it happen.
What is a Web designer, and what do they do?
WEB DESIGNER: A DEFINITION
Not to be confused with web developers, web designers are creative, digital professionals who craft the overall vision and plan for a website. Web design is less about using code to bring a website to life, and more about determining a site’s layout, color palette, fonts, and visual themes.
There are some other differences between web designers and web developers as well, but that’s the “short story” answer. Another way of understanding web design work is to consider what projects web designers work on, which brings us to…
WHAT DOES A WEB DESIGNER DO?
MediaBistro defines it (charmingly) like this:
“These visual architects are responsible for the overall awesomeness of a website’s look—its layout, colors, fonts, icons, buttons, the whole shebang.”
Anywhere online that you see elements of visual design, it’s likely a web designer has played a part in the process. The web design role might include the following tasks or responsibilities:
- Designing web pages or whole websites
- Designing site navigations
- Mocking up mobile-first and/or responsive websites that look good on all sizes of screens
- Coding pages or sites using HTML and/or styling those projects via stylesheets and CSS (this is increasingly part of the role, though not universal—see the next chapter on skills)
- Project managing, including overseeing teams and/or clients
What skills do you need to become a web designer?
Obviously, you need a good design eye and an understanding of layout, hierarchy, color theory, typography and web font. A strong grasp of UX/UI design foundations is also important. It helps you create a seamless design that smoothly guides users through a site without them getting frustrated.
Web design skills can be broken down into hard and soft categories. Let’s start with the necessary tech and visual design skills, which fall firmly into the “hard” skills camp:
- Layout and navigation principles
- Color and typography
- Responsive / mobile first design
- Design software such as Adobe Photoshop, Illustrator, and Sketch
- Wireframing / prototyping approaches, practices, and software
- HTML & CSS*
Additional soft skills to consider:
- Time management/project management skills
- Client relations/communication skills
- Knowledge of digital marketing best practices
Who is a web designer’s boss?
A freelance designer typically reports directly to the clients. If a designer’s at a larger company, a project manager or an art, UX Design or design director may call the shots. At a smaller agency, the boss might be the owner, if he chooses to oversee each project.
Web designer salaries:
According to Indeed, as of January 2019, the average web designer salary in the U.S. is $47,049.60 ($22.62/hour).
We’ve broken that number down further in our Web Design Salary Series article, but keep in mind that it will vary according to certain elements—location, experience, expertise, etc. To determine what you can reasonably expect to make, Glassdoor’s Know Your Worth tool is a great way to plug in specific details about your own circumstances to calculate a likely salary (and the right number to give when asked your salary requirements). You may also want to explore how to calculate your rate for freelance web design work.
The truth of the matter is that web developers on average do make more money than web designers. But if you’re a creative looking for a financially stable career, shifting into tech as a web designer is a smart move long-term.
Freelancing as a web designer
Step 1: Learn as Many Technologies/Languages as You Can
Web development projects require knowledge of more than one programming language. This means the more technologies and languages you know, the more jobs you’ll be able to accept, making this a vital first step. To prioritize, start with languages that are both versatile and in-demand, such as Python, and continue building your experience with more technologies over time.
Step 2: Dot Your I’s and Cross Your T’s
The next step is setting up the logistics of your business. There are several steps involved in establishing a new freelancing business:
- Meet with a Certified Public Accountant to determine the best structure for your business; you’ll need this information for the next steps.
- Register your business name in the state you live or work in.
- Apply for a Federal EIN, if applicable, and find out when and how often you will be required to pay taxes.
- Secure liability insurance, if necessary.
- Purchase the software and equipment you need to set up your home office.
- Write a business plan. This document is vital in providing vision and direction for your business, establishing goals, and measuring achievements, and is often required in order to secure any business financing you may need.
The US Small Business Administration provides step-by-step guidance and hundreds of resources, including education on meeting requirements, for small business owners. Requirements also vary by state, so be sure to contact your state small business division for guidance and questions.
Step 3: Build Your Freelancing Website
One of the most challenging aspects of getting into freelance work is having a portfolio showing completed client projects.
For this reason, your personal freelance website should be a showcase piece in and of itself. Take time to create an engaging, interactive site using current design trends. Be sure to indicate that you’ve built the site from the ground up and can do the same for your clients. Tell your clients who you are, what you’re passionate about, what you can do for them, how it will benefit them, and why they should choose you.
Add opportunities for interaction, such as links to social networking accounts, a contact form or even a live chat option. Lastly, consider including a blog to showcase your expertise of latest web development trends and techniques, and to also aid in increasing your SEO.
Step 4: Market Your Services
To effectively market your freelance services, you should ask yourself, “Who is my target market?” If you’re passionate about one area of business or another that may help define your target market. Some sample target markets include:
- Local small businesses that do not have an online presence yet
- Non-profit organizations whose current websites are ineffective
- Sales companies who don’t offer online purchasing
You can also target a single industry. Perhaps you grew up helping your parents run an auto body shop, so you have industry knowledge that you can apply to potential clients in that industry.
Once you’ve established your target market and set your rates, you can begin to market your services. In many cases, this might mean stopping by a local business to say, “I noticed your website isn’t as effective as it could be, and I was wondering if I could show you my ideas,” or shooting a quick email to businesses outside your local trade area to say the same thing.
Because your forte is web development, it’s important that anything digital that comes from you is visually appealing and showcases your work, so make sure to put time and effort into this process. Having a business card is important, as well, because you never know when you may run into a potential client and have an opportunity to leave your contact information.
Step 5: Stay Current
Obtain ongoing education in web development and continue to learn new languages and technologies as they emerge. Use downtime to obtain additional certifications. Subscribe to newsletters and publications that provide continuing education in your field. This will prevent you from becoming outdated as a developer and allow you to continue to expand your clientele as your skill set grows.
To wrap things up, while starting your freelance career in web development requires the significant investment of your time and effort, the end result is a career that provides maximum freedom, flexibility, work-life balance and potential for earning. Continue to push your learning, and increasing your skillset to offer the most value to future clients.
Taking your web design skills to the next level
When you start out as a web designer, you do all you can to grasp the basic design principles so that you have a solid foundation to start your journey on. As you become more proficient in your craft, you start to learn techniques that are more advanced, and you begin to implement bigger and better things in your work until you reach a point where you feel pretty comfortable to step outside the bounds of the ordinary.
1) Design in shades of gray, then add color
If your web designer creates wireframes prior to visual designs, then you know the value of starting with shades of gray. Turn your wireframe into a grayscale visual design, add your photography, then carefully add color to design elements one at a time.
This will prevent an “overdesigned” website and help to place prominence on just the items that need it.
2) Use Keynote (Mac) to create rapid page prototypes
You don’t need Photoshop to create rapid prototypes of web pages, landing pages, call to actions or other web interface elements. There’s an entire underground movement around using Keynote (that’s Apple’s version of PowerPoint) to create mockups.
There’s even an online repository containing user interface design templates for wireframing, prototyping and testing mobile and web apps in Keynote.
3) Add web fonts to your corporate style guide
It’s 2015, and if your corporate style guide doesn’t include web fonts, then you need to look into adding those so your website has the same governance that corporate documents and collateral does.
If you haven’t looked into this yet, Google Fonts is a great place to start. Find a suitable web font and define usage in your corporate style guide so you use it consistently online
4) Bury those social media icons
You did all that work to get people to your website, and yet you’re inviting them to leave? That’s what you’re doing when you place social media icons in a prominent location of your website, like in the header. Bury the icons in the footer.
If people are on your website, you want them to stay, learn and perhaps inquire about your services, not check out company picnic photos and bowling outings on Facebook. Social media should send people to your website, not vice versa.
5) Ditch the slideshow/carousel
When the homepage slideshow/image carousel came into fashion, it was a way to get lots of information on the first page of your website. The problem is that most people don’t stay on the page long enough to experience all of the tiles/messages.
What’s more is that the messages and images usually aren’t relevant to your prospect’s first visit. What’s the one thing a visitor should take away from their website visit? Promote that one thing — usually what your company does in layman’s terms — and ditch the rest.
6) Simplify navigation
Reducing your visitors’ options might seem counter intuitive, but it can actually help guide people to your most productive content. Rather than overwhelming your website visitors with links to every page, simplify your navigation.
Eliminate dropdown menus and especially multi-tier dropdown navigation that only the most skilled mouse user can navigate, and go a step further by reducing the number of links in the header or sidebar of your website.
7) Remove sidebars
The sidebar has been an especially popular web design trend for the last ten years, especially on blogs. Many companies are finding that when they remove sidebars from their blogs, it encourages reader attention to the article and the call to action at the end.
Removing the sidebar on our company blog has increased the number of clicks on call to action graphics over 35%.
8) Get color inspiration from nature
Struggling to find the perfect color combination for your website or a call to action graphic? Get your inspiration from nature. You can either use your own camera to photograph natural wonders around you or find landscape photos on the web, the use a color picker to select a color. Nature’s color palette never fails.
9) Step away from the computer
I believe that good design starts with great planning. Getting your ideas down on paper or on a whiteboard can help you iterate through a design, refining it and adding detail as you go along. Drawing on a whiteboard can also make the design process collaborative and allow other team members to give input.
It’s also easy to erase pencil from paper or marker from a whiteboard and make quick changes, and once you have something concrete to work with, snap a photo with your mobile phone and get to work on screen.
10) Use Pinterest to create mood boards
When you’re putting together inspiration and ideas for a new website, or you’re redesigning part of your website, you need a way to collect your inspiration in one place for future reference.
Did you know that you can use Pinterest to create a mood board of your favorite images, colors, layouts, patterns, sample websites and concept material? Another great advantage of using Pinterest is that other designers create and share mood boards too, and they’ve already curated a ton of resources that you can use.
11) Increase your font size
Typography is incredibly important in web design. Text is hard enough to read on a computer screen, so you have to make the important things stand out.
One way to do this is to increase your font sizes, especially for headings and important blocks of text. Consider increasing the size of your normal font, too.
12) Use white space
It may be hard to believe that using whitespace is a hack, but I evaluate websites every day that could use more whitespace. Not every blank area of the screen needs to be filled.
Even though whitespace and simplicity are in style right now, too many companies try to cram everything into a small space, or worse yet, “above the fold.” Give your design room to breathe, and your website visitors will be able to find things easier.
13) Use the squint test
Want a quick way to learn what’s most prominent on your website? Back away from your computer screen and squint. Most everything will become blurry, and only the larger, colorful, more prominent features will be noticeable.
It’s said that this technique helps a designer understand what a first-time visitor may notice when he scans your website. Will the visitor notice what’s most important?
Tools and technologies
Web designers are using a different set of tools depending on the processes they are involved. This tool was updated by time to support newer standards and software versions, but principles remained. Web and graphic designers are using vector and raster graphics for creating images for web or prototype design. Technologies for creating a website that is used today involves standardized tags that could be written by hand or WYSIWYG software.
Code quality matters
When creating a website, the best practice would be adjusting to standards. This involves coding errors and assumption that identificators and classes will recognize each other in a proper way. That is usually done using the description of the element’s function. Creating a website, and not going with standards, can be a really bad idea, because it can make your website unusable. The standards are there because of proper web page’s schedule, design and to ensure that coded elements are closed in a proper way. Checking with V3C validator can be done only when proper declaration of web page (DOCTYPE) is finished, which is used to find coding errors in certain lines of a code. The system determines errors and areas which doesn’t fit to web design standards, and this information can be altered after.
Visual identity and design
The web site looks should be adjusted to target group that is planned. This could be age group or special view on a culture that designer should understand, so he could visually reflect that. Designers should also understand client, his company and the field of business so they would know what type of website they need. Esthetics and final design of the web site should never be in conflict with content or anything else, so users could find information or products they came for as fast as possible.
Redesigning and rebranding – bringing websites to life
Redesign of neglected websites can bring them back to life based on two aspects: visual appearance and the website’s visibility in search engines.
Weunique Branding Agency is a web design agency which keeps in touch with the latest web technologies and techniques.
The result is an improved website: different, better, with a unique, modern appearance that will result in better ranking of your company. Furthermore, you receive basic SEO that will increase the number of visitors on your website.
Looking for a professional web design service?
An experienced and creative Web Design agency developing innovatively designed online solutions. Our websites are functional, designed with a pixel-perfect approach, with interesting content that will make visitors keep coming back for more information, and will maximize business productivity for our clients. Our websites feature flawless design, quality content and the latest web technologies for smooth display in all web browsers.