A Helpful Guide to Understand Web Design
What is Web Design?
A website designer works on the look and feel, layout, and, in some cases, content of a website. Appearance, for instance, relates to the colors, font, and images used. Layout refers to how information is structured and categorized. Good web design is easy to use, aesthetically pleasing and suits the user group and brand of the website.
Many web pages are designed with a focus on simplicity so that no superfluous information and functionality ever distracts or confuses users. The key focus of a web designer’s output is to create a site that wins the trust of the target audience and removes as many points of user frustration as possible.
UX Design vs UI Design
What Does UX Mean?
in Web Design?
Top Reasons to Invest in UX Design
Google’s recent algorithm updates have been heavily focused on UX Design as ranking signals. The post-pandemic era might just be the ideal time to invest in UX Design since more people are shopping for goods and services from home and an easy-to-use website is a key to reaching them. Below are the Top 5 Reasons to Invest in UX Design.
Improve the Customer Experience
Anticipating a user’s wants and needs and helping them navigate the site toward an end goal is the key to excellent UX Design. An excellent UX design encourages interaction with your business through call-to-action (CTA) buttons, surveys, newsletter sign-up prompts, and contact forms. The color and location of these items are not just guessed; there are psychological attributes that lead to the best placement of these items.
Decrease Bounce Rate
A 100% bounce rate is when a person visits your website and immediately leaves without visiting any other pages. A strong UX Design gives users a clear path to relevant information and encourages them to stick around on your site. When this happens it lowers your bounce rate and increases conversion rates.
Drive eCommerce Sales
Cut Customer Service Costs
Although it doesn’t eliminate the need for customer service, an efficient UX layout can help save money when people can easily find answers to their questions without having to contact customer service reps via forms, chats, calls, emails, or social media.
Improve Ranking Signals
User experience has evolved into a vital ranking signal. With Google valuing mobile-friendliness and website loading speeds as vital cogs in the ranking wheel, there is no choice but to incorporate UX design as a priority in your SEO and business growth strategies.
What Does UI Mean?
in Web Design?
Top Reasons to Invest in UI Design
User Interface (UI) design is what connects visitors and your website, as it contains the basic design elements that help users navigate your site and make decisions. Here are three main reasons to invest in UI design:
Build Your Brand
UI is the choice of color, button style, and typography, so good UI design speaks volumes about your brand! Your website’s UI should instantly portray your company’s voice, culture, values, and more.
Convert Visitors into Customers and Leads
Have you ever visited a website where you were about to make a purchase but then quickly changed your mind for some reason? It could have been subconscious emotional feelings that steered you in that direction. The wrong UI design choices can prevent conversions, but good design can put people in the mood to convert – make contact, download content, or make a purchase. Many brands opt to utilize a certain color scheme throughout their marketing materials, and the same goes for websites. The color palette used can promote emotion which tends to resonate well with users and can result in a higher number of conversions.
Increase Customer Retention
As business owners, we don’t want people to only do business with us once or come to our store once, purchase or not, and never return. We understand that if we present people with a good and memorable experience, they will return to do business with us. A solid UI design for a website lays the groundwork for a quality experience much like customer service would in a store or office. When someone feels welcome and appreciated, they will return and purchase more. A website with a well-designed UI can also develop those feelings within your customers.
Web Design & Aesthetics
What is Aesthetics
in Web Design?
Aesthetics are essentially what we believe to be visually pleasing about a design or artwork. When applied to a website, aesthetics include color palette, contrast, graphics, layout, and more, which are all part of the larger UX and UI design. A website’s aesthetics can influence a brand’s credibility and perception, which is why this is a perfect follow-up topic to UI design. Studies have shown a clear link between solid design and site credibility. A pleasant and smart design allows the user to have a positive experience and a positive experience leads to more trust and conversions.
What Usability is
Important in Web Design
We have developed into a society that wants on-demand information delivered as quickly and easily as possible. For that reason, an easy-to-use website will prosper over those that are elaborately designed. A website should allow your visitors to understand who you are and what you are offering as quickly as possible then easily guide users to the information they need. Customers no longer accept websites that are slow to load or difficult to navigate – their expectations have evolved as have their needs. If website usability suffers so can your business’ online success.
7 Ingredients of an Aesthetically Pleasing Website
What makes a website pleasing to the eye? What usability factors improve visitor engagement and stickiness? Here are 7 of the most critical elements to consider when you are designing a site or assessing a current site for User Experience.
Color
One of the most powerful subconscious visual tools is the deliberate use of color to influence the user experience on a website. Reds are “hot” colors and command attention. Blues and greens are “cool” colors and have a calming effect. Think carefully about the colors you choose for your logo first, then for the site’s background, headers, navigation, and links.
Images
In recent years, it has become an industry standard to not use stock images on websites because they are obviously staged and people don’t relate well to “fake”.
A picture can tell a thousand words but the wrong picture can tell the completely wrong story. Not to mention a waste of precious real estate where you could be positively affecting the user experience. Whether you use photography, diagrams, or illustrations, be sure to use imagery that feels connectable or real. If your imagery is effective, it can evoke emotion and encourage further engagement, which gets users closer to your end goal of conversion.
Textual Content
Unlike a slick magazine print campaign, a website needs to be created with relevant, up-to-date, keyword-rich content. In the image above, you can see how text/heading size is extremely important. Use headings and subheadings (H1s, H2s, H3s, etc.) to organize the text and allow easy visual scanning.
H1: You will read this first (Primary topic/keyword string)
H2: And then you will read this (Main subtopic)
H3: Then this one (Information related to the above main subtopic)
H4: And you will read this last. (Important highlights to the H3 above)
Outside of your content headings, there are things you can do to make your text more visually appealing. Consider the fonts you are using – bolded text, font size, or font color can assist in communicating important concepts. Guide users to additional resources with links that stand out from the rest of your body copy. If your subject matter is complex, provide a glossary and link key terms to it frequently, so you don’t have to define concepts repeatedly on a page.
Navigation
Where is the navigation on the majority of websites? At the top and favoring the right-hand side. That is now second nature to people, why fight the human brain’s tendencies? Make it easy for visitors to find what they are looking for. Provide a Search function, side navigation categories, footer navigation text links, top navigation buttons or tabs, or whatever will make it utterly seamless for a user to move around your site, no matter where they start.
Alignment
If your text is center-aligned, the image below is left-aligned, and the next set of text is also center-aligned, this creates a wall in people’s thought processes. Elements or sections on your site should be visually connected and balanced. A page that is disorganized or hard to follow will have a much higher bounce rate leading to very few conversions. A page with a clear message, cleanly aligned visual elements, and a clear call to action will have a higher conversion rate.
Consistency and Continuity
Be consistent throughout your site so that a visitor navigating from page to page will always know where they are and how to get to the next item of interest. Continuity is one of the single most important elements in conversion. When a user clicks to navigate to a new page, that page must match their expectations and deliver a consistent, continuous message.
White Space
White space is an often undervalued commodity. But it’s a concept used throughout design and aesthetics. It’s like listening instead of always talking. It’s a welcome break on a busy day. It will allow your visitors to focus on what’s important. If every pixel is vying for your visitors’ attention, you will never get your key message across.
We can help you build a beautiful & usable website
Make it a priority to look at your website. Evaluate it using these 7 Points of Aesthetics. Is there room for improvement?
Maybe it’s time for a mini makeover!
Site Speed
What is Site Speed?
Website speed refers to how quickly a browser can load fully functional web pages from a given site. Websites loading slower than 4 seconds can drive users away. In contrast, sites that load quickly, under 2 seconds, will typically receive more traffic and have better conversion rates.
We all remember the slowest service we had at a restaurant that caused us to never return. The same mindset happens when a visitor reaches a slow-responding website. More negative effects of a slow website are poor search engine rankings, lower overall site traffic, and negative user experiences.
Why is Site Speed Important?
Conversion Rate
Multiple studies have demonstrated that site speed affects conversion rate. Not only do more users stay on fast-loading sites, but they also convert at higher rates compared to slower sites.
Bounce Rate
Bounce rate is the percentage of users who leave a website after viewing only one page. Users are likely to close the window or click away if a page does not load within a few seconds. BBC discovered that they lost 10% of their total users for every additional second it took for their pages to load.
Conversion Rate
Google tends to prioritize getting relevant information to users as quickly as possible and has stated, “Site performance is a factor in Google search rankings.” A site’s performance on mobile devices is especially important for SEO. You can also see what other SEO tools are important to use.
User Experience
Long page load times and poor response times to user actions create a bad user experience. Waiting for content to load becomes frustrating for users and may provoke them to leave the site or application altogether.
What Factors Affect Site Speed?
Page Weight
The amount of resources, files, and/or scripts a website needs to load makes a huge impact on site performance. Uncompressed image/video content and CSS and JavaScript files not inlined all add significant ‘weight’, or load time, to a webpage.
Keeping websites light (meaning, small file sizes, and quick-loading pages) has grown more difficult as web technologies have evolved. From single-page applications requiring multiple JavaScript functions to pages with third-party pop-up ads to homepages with moving backgrounds, developers can add more functionality than ever to webpages, and as a result, the average total page weight is increasing.
Network Conditions
A website will only load as fast as the network connection will allow. For example, mobile devices using 3G or 4G instead of connecting to the Internet over WiFi will typically have slower network connections. Although this is largely out of developers’ hands, there are still techniques for delivering web resources quickly, even over slow connections. Techniques include minification, compression, and hosting content with a CDN.
Hosting Location
If the content has to travel a long way to arrive at the device, this results in a high amount of network latency. For instance, if a website’s HTML and CSS files are hosted in a data center in Ohio, and its images are hosted in a data center in the UK, a user in the United States will have to wait while all of these image files to travel thousands of miles to their device. Using a Content Delivery Network (CDN) helps relieve this bottleneck but it is still important to host your main website files within the same country as your audience.
ADA Compliant Websites
What is an ADA Compliant Web Design?
ADA compliance refers to the Americans with Disabilities Act Standards for Accessible Design, which states that all electronic and information technology (like websites) must be accessible to people with disabilities.
In 2010, the Department of Justice announced that it intended to adjust its legislation, the Americans with Disabilities Act, to consider how websites should work to accommodate people with disabilities.
In 2016 there was a significant case involving the University of California, Berkeley. In that case, the DOJ found the school should adopt the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) to make their website accessible. Those guidelines are now widely accepted as the ADA compliant standard.
7 Steps to Design an ADA Compliant Website
How can you create an ADA-compliant website?
Here are 7 steps toward building a more inclusive site and adopting the WCAG.
1. Evaluate Your Current Site
- Perceivable
- Operable
- Understandable
- Robust
2. Choose ADA Compliant Graphics
Carefully chosen graphics are a huge part of an ADA-compliant website. Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves with the content.
3. Add Alt Text and Readable Fonts
Making your site observable and your content writing readable for all potential users takes a lot of thoughtful choices. To get started, provide alt-text for all images in your code. Alt-text attributes allow screen readers to describe your images audibly. Graphics should also have a title, description, and/or a caption that can be read aloud to the visually impaired. You want everyone to be able to enjoy your informative or fun visual content.
Fonts are another crucial component of accessibility. Use fonts that are easy to read, such as Georgia, Open Sans, and Quicksand. Avoid putting a light font color on a light background; a combination like yellow text on a pale background causes people to strain to read it. Equally problematic is a pale font on a stark black background. Stick to light backgrounds with dark for most of your content.
4. Use Logical Website Features
An ADA-compliant website must also be comprehensible to a broad audience. The site should operate predictably and have helpful labels over blocks of content and media. For example, put a clear “x” in the upper corner of a pop-up to show users how to close the window instead of having to click or touch in a blank area. The site should be developed in a way that avoids user error, for example, legible instructions on all forms where users are expected to enter information.
5. Use Standard HTML Tags
This means the code should be readable by an assistive reading device. You should also provide documents in a text-based format at all times, even when you also offer a PDF. Complex images with text can’t be understood by software that reads aloud for visually impaired website users and will not pass ADA-compliant standards. The good news is that most website platforms, including WordPress, are designed to operate using modern code format.
6. Keyboard- and Pause-Friendly
The primary use of the Operable category in ADA-compliant standards is to ensure your site can be navigated using a keyboard without a mouse. This ranges from things that are seemingly obvious like being able to tab through content sections and website navigation, to things that are commonly overlooked like, the ability to pause content or slow down automatic scrolling/slideshow movements.
7. Remain Up-to-Date on ADA Compliance Changes
Remember, ADA compliance is constantly evolving. As new technologies are made available for people with disabilities, they should be accounted for in your web code. But a truly compliant, ADA-compliant website will adopt new web design best practices as they emerge.
We can help your site become accessible & meet all ADA Compliance guidelines.
Website Structures
What is Website Structure & Why is it Important?
A website’s structure helps to form coherent, discoverable, and predictable patterns. Users feel satisfied when they find information quickly and a solid and relatable structure is essential to the usability of the website. UX designers can solve broader issues in UI design and usability through the correct website structure for the client’s industry. Think of UI and Usability as smaller parts of the UX.
Good website structure is necessary for grouping and cataloging content. When taking into account potential architectures, designers/developers can typically choose from either a top-down or bottom-up approach based on their users’ needs and business goals.
Types of Website Structures
Having a proper understanding of website structures makes it easier for designers to create a meaningful website information architecture. There are four main types of website structures, let’s look into them one by one.
Hierarchical Model
The Hierarchical Model is one of the most common types of site architecture. The Hierarchical Model is often used on websites that contain a large amount of data. The Hierarchical Model is similar to a tree where the homepage is the trunk that branches out into categories and pages, often called the “core pages”. Sites like CNN.com and BBC.co.uk are great examples of the hierarchical model.
Sequential Model
Sequential models are popular when leading users through a sequence of step-by-step processes. like onboarding or new account creation. UX designers can use this model to create flows for a process. Individual pages on wikiHow.com are strong examples of pages designed with a sequence in mind.
Matrix Model
The Matrix Model is one of the oldest site structure types on the internet. This model is unique and non-traditional in its behavior. A matrix-type structure gives users options to choose where they want to go next. These types of sites are best navigated via search or internal links. Wikipedia is a great example of the Matrix Model.
Database Model
A Database Model is a progressive approach to the website structure. To build a website structure like this, designers should think about the bottom-up approach by considering a page’s metadata and adhering to strong information architecture and taxonomic best practices. Medium.com and its posts and pages are a great example of a database model.
Why You Should Start with the Site Structure
By considering the visitors’ needs first when starting a new design, UX designers can create a website structure that helps the visitor rather than hinders. A good structure adds to usability and can help improve the site’s overall user experience. Simply put, a website’s structure helps the designer create alluring user experiences through improved discoverability and intuitiveness.
WordPress Websites
WordPress Versus the Competition
WordPress tops the list of the three most commonly used site builders in the world. This platform is considered to be one of the easiest to use for a novice while providing customization ability for developers. There are other platforms you can use such as Squarespace, GoDaddy, Wix, and more, but they don’t allow developers to customize their code with the ease that WordPress does.
WordPress has a marketplace where you can download plugins to change/customize almost anything as well. Joomla, Drupal, and custom websites require a level of technical know-how and familiarity with HTML, CSS, and the programming language PHP. WordPress allows experienced users to work at that level, too—but, unlike Joomla and Drupal, it also includes features for beginners, so that they can set up a site quickly with no knowledge of code or programming.
7 Benefits of Using the WordPress Platform
Here’s a look at a few key benefits of using WordPress to set up and run your business or personal site.
1. Flexible and Adaptable for Changing Needs
Although WordPress was originally designed to support blogging, it also powers a wide range of sites with other purposes. WordPress has scalability and is also used to run complex sites for large multinational corporations and manage small businesses. WordPress sites can contain full-service eCommerce stores, showcase a portfolio, or host a social network, group, or podcast. Thanks to its many themes and easy access to its source files, WordPress is also endlessly adaptable to a company’s changing needs.
2. User-Friendly, Even for Beginners
A WordPress site can be installed and up and running fairly quickly, even without any technical expertise. All a user needs is a domain name and a web hosting account. WordPress can be installed free through your WordPress hosting provider or uploaded directly from WordPress.org. From there, an intuitive and easy-to-manage Admin Dashboard has all the features needed to customize a site’s heading and layout and to start creating pages and posts right away.
3. Templates or Themes Provides Multiple Options
WordPress themes offer users an array of choices for fine-tuning the appearance and functions of a new site, thanks to its large and growing directory of basic and premium themes. Many of these are instantly available to a new site owner through the WordPress Theme Directory, and thousands more can be purchased through design marketplaces and third-party designers from around the world. Themes can be previewed live and installed at any time to change the look and layout of a WordPress site.
4. Plugins Extend Functionality
WordPress includes all the elements needed to create a basic site, but many site owners want more specialized functions related to a site’s specific needs. The WordPress plugin directory includes thousands of plugins that allow users to add features such as shopping carts, galleries, contact forms, and more to any compatible WordPress site. Users can also purchase and install hundreds of custom plugins from third-party developers if they can’t find a free version to do what they need.
5. WordPress Sites Are Mobile Responsive
More and more people are using their mobile devices to view websites and Google knows it. That is why mobile responsiveness is also a factor in Google rankings. Now websites need to look good on any device to rank well on Google. WordPress offers a variety of responsive theme designs, and users can also make a static site responsive with plugins and adjustments to theme files.
6. WordPress Sites Have a Built-In Blog
Since WordPress is a content management system (CMS), it has multiple features that make publishing content easy. One of these is an integrated blog feature that can be accessed from any device, at any time. This makes it possible for sites unrelated to blogging to use the blog feature for adding updates or announcements.
7. The WordPress Community Offers Free Support
WordPress is used by over 30 percent of CMS-based websites worldwide, and it’s easy to see why. WordPress makes website creation something almost anyone can do, not just experienced developers.
If you are building a WordPress site, you should consider a hosting provider that offers WordPress hosting. This will help save time and allow you to access your WordPress dashboard through your account.
Check Out Our WordPress Template Sites
Results Repeat offers an array of WordPress templates sites on our theme gallery.
Explore our demo sites today and reach out for a brand new website!
Website Hosting
What is Web Hosting?
Web Hosting is when a web server, from a hosting provider, allocates storage and bandwidth space for a website to store its files and makes them available to the public.
When you set out in search of the right hosting plan, you can get quickly overwhelmed with some of the most confusing marketing in the tech industry. You’ll find sales pitches promising you 99.99% uptime (which comes to roughly an hour of downtime a year) and advanced features like a “new era” control panel. What you should know is that these details are usually pretty standard across the board.
Some choose to manage their accounts and hire professional help when needed, while others use an agency to help maintain their hosting from the top down. It all depends on what your needs are, how big your site is, and what type of site you are running (eCommerce, blog, etc.).
Ask Your Hosting Provider Questions
Before you start your investigation into web hosting services or consult your trusted web professionals, you should research a few things that will help in finding the proper fit.
What is Bandwidth Availability?
Bandwidth Availability or Scalability refers to how well a hosting service can handle large increases of visitors to requested sites or pages. You want the option to grow with the hosting provider and not have to change platforms when you need to scale up.
Does Your Hosting Service Provide an SSL?
An SSL (https://www.example.com), provides your website with the security needed for users to enter their information into forms, login areas, and carts for eCommerce. This is an important part of any hosting plan so be sure it’s included with yours.
How Much Storage Comes with the Hosting Service?
Depending on the size of your website, this is a very important question to ask. Some hosting providers charge incrementally for storage usage. If you have a photography website, you would need more storage.
What Are the Different Types of Hosting Services?
Shared Web Hosting
The most common form of Web Hosting is Shared Hosting. As the name states, your site is hosted on a “shared” server with other hosting customers of the provider and might cost you as little as $10 a month. Your neighbors might number in tens or even hundreds. Some smaller hosting companies pride themselves on a high-quality network setup with many included services and keep the number of customers on a server at a responsible level.
For websites with lower amounts of traffic, Shared Hosting can be a good choice and save money in the long run. However, it is suggested you consult with web professionals before choosing one of these hosts.
Cloud/Container Hosting
Cloud Hosting makes applications and websites accessible using cloud resources. Instead of using a single, physical server as above, solutions are deployed on a network of connected virtual and physical cloud servers, ensuring greater flexibility and scalability. The combination of less maintenance and valuable features for your web professionals makes Cloud/Container hosting an easy choice.
Virtual Private Server (VPS) Hosting
A step up in cost and maintenance requirements is VPS or Virtual Private Server hosting. This option normally allows for more bandwidth or scalability depending on the hosting provider’s packages. Confusingly, this type of service can be branded as cloud hosting. While you could argue that there are some cloud aspects in VPS hosting, true cloud hosting is different. This brings us to our next style of hosting.
Dedicated Hosting
The hosting style that started the internet, and is still available today is Dedicated Hosting. Huge websites that require a lot of storage and bandwidth, the likes of Fortune 500 companies, are usually the ones that can afford this type of hosting.
The raw performance of such a server is unbeatable but requires maintenance from an IT professional, physical storage space, and cooling requirements.
What Does All This Mean for Me and My Website?
The reason you read this post is most likely because you are taking a hands-on role in your website’s design process. Being informed of the above information, you’ll guarantee that you’ll get a website that meets or exceeds your expectations. Tell your web designer about your brand, your voice, and what you plan to achieve with the website. The more information they have, the more equipped they are to deliver the perfect web design for you. Explain your vision to them and then let them work their magic.
It’s hard to argue with the facts, and as a marketing professional, it’s easier to believe in existing data than just plain ideas. However, many times those ideas can be aligned with the data to compromise during a build. Consider giving this list a re-read the next time you are involved in a website refresh or redesign, as it can act as a guide to help make sure you end up with a better user experience and higher conversion rates!
