Very different. 

Contrastingly different.

Contrast in your website design

It’s a defining part of UX design, and It’s called the Von Restorff Effect.

Also known as the Isolation Effect, it predicts that when a grouping of similar objects, the not that stands out or differs from the others is most likely to be remembered.

Designers use high-contrasting colours, styles, and layouts that isolate certain elements or sections to highlight them and make sure it stands out. 

It’s why designers are resistant to change requests to bold, increase font size, or highlight yet another section.

Remember that UX design, which is the core of any well-performing website design, is closer to an Architectural composition than interior decorating.

How to add contrast to your website design

Adding contrast to your website design is essential for creating a visually appealing and user-friendly experience. Contrast helps distinguish different elements on the page, making it easier for users to navigate and understand the content.

Before you even start adding contrast to your website design, you’ll want to define your primary and secondary goals for your website.

• Is it to contact your business?
• Download a piece of content?
• Fill out a lead generation form?
• Sign up for a webinar?
• Register for a trial/demo?

Once you have your goals defined, follow the steps below.

Adding contrast to your website design

1. Understand the Types of Contrast:
   There are several types of contrast you can utilize in web design:

• Colour Contrast: Using different colours for various elements.
• Text Contrast: Making sure text is easily readable against its background.
• Size Contrast: Varying the sizes of elements to create a visual hierarchy.
• Shape Contrast: Using different shapes to differentiate elements.
• Contrast in Imagery: Employing images with varying levels of light and dark areas.

1. Choose a Clear Color Palette:
   Select a colour palette that includes both primary and secondary colours. Ensure that the colours you choose have enough contrast to be distinguishable from one another. Use tools like the Web Content Accessibility Guidelines (WCAG) colour contrast checker to ensure your colour choices meet accessibility standards.
2. Use High-Contrast Text:
   Ensure that text is easily readable by using high contrast between text and background colours. Dark text on a light background or vice versa usually works well. Avoid using low-contrast combinations that strain the eyes.
3. Create Visual Hierarchy:
   Utilize contrast in text sizes, fonts, and element spacing to establish a clear visual hierarchy. Important content should be more prominent, while secondary information can be presented with less contrast.
4. Play with Font Weight and Style:
   Vary font weights (bold, regular, light) and styles (italic, underline) to distinguish different types of content. This can help guide users’ attention and improve readability.
5. Utilize White Space:
   White space (or negative space) is the area between elements in your design. Proper use of white space enhances contrast by separating content and preventing visual clutter.
6. Experiment with Backgrounds:
   Backgrounds can be solid colours, gradients, images, or patterns. Make sure the content placed on a background stands out. For example, if you have a busy background image, ensure that text and essential elements have enough contrast to remain readable.
7. Apply Consistent Styling:
   Maintain consistent styling throughout your website. This includes using similar colours, fonts, and contrast levels. Consistency helps users understand your design and navigate more effectively.
8. Test for Accessibility:
   Ensure your design is accessible to users with various abilities. Use tools like colour contrast checkers and screen readers to make sure that your design is usable for everyone.
9. Get Feedback:
   Before finalizing your design, gather feedback from colleagues, users, or design communities. This can provide valuable insights and help you identify areas where additional contrast might be needed.
10. Iterate and Refine:
    Web design is an ongoing process. After launching your website, monitor user behaviour and gather analytics to identify areas where users might be struggling due to insufficient contrast. Continuously refine your design based on user feedback and data.

Remember that adding contrast doesn’t mean using loud or clashing colours; it means strategically differentiating elements so that they are distinguishable and enhance the overall user experience.

Need to hire a pro? Look through our website design services tailored for small businesses.

Having a brand style guide is crucial for small businesses because it helps to ensure consistency across all of your marketing efforts. Clear and consistent brand identity makes it easier for potential customers to recognize and remember your brand. 

But the most important reason to invest in your brand is TRUST.

A consistent and professional brand is crucial to building trust with your audience; that doesn’t happen overnight. It takes time, effort and consistent repetition to build the trust customers need to give you their money.

Here’s the catch: most small business owners and entrepreneurs are not the best at repetitive work, which is one characteristic that makes them strong entrepreneurs, especially in the early stages. 

And that’s where a properly designed brand style guide can help. It contains all the elements you need to visually represent your business in marketing and promotion – logos, imagery, colours, fonts, etc.

Let’s dive a little deeper into what a brand style guide includes. Here are some of the key elements that you’ll typically find in a brand style guide:

1. Logo: Your logo is the centrepiece of your brand identity. Your brand style guide should include guidelines for how your logo should be used, including size, placement, and clear space requirements.
2. Colour palette: Your brand’s colours help create a unique visual identity for your business. Your brand style guide should include your primary colour palette and any secondary colours you use.
3. Typography: The fonts you use in your marketing materials can greatly impact the overall look and feel of your brand. Your brand style guide should specify which font to use for headlines, body text, and any other text in your marketing materials.
4. Tone of voice: Your brand’s tone of voice refers to the personality and style of your brand’s communication. Are you casual and conversational, or more formal and professional? Your brand style guide should include guidelines for your tone of voice in your marketing materials.
5. Imagery: The images you use in your marketing materials can also help to create a visual identity for your brand. Your brand style guide should specify what kinds of images to use (e.g. photographs, illustrations) and any stylistic requirements (e.g. colour filters, image sizes).
6. Brand messaging: Your brand style guide should also include guidelines for the key messages and taglines you use in your marketing materials. This will help ensure your messaging is consistent and aligned with your brand identity.

By including these elements in your brand style guide, you can ensure that your brand is consistently presented across all your marketing materials. 

This makes it easier for potential customers to recognize and remember your brand quickly and helps build trust and credibility with your audience. 

When your brand is presented consistently and professionally, it shows that you take your business seriously and care about delivering a high-quality experience to your customers. 

Interested in your brand style guide? Reach out to us and get more info on how it can help you build more trust in social media posts, ads or any other marketing you are doing.

A responsive website adjusts its layout and content to fit the screen size of the device it’s being viewed on. So whether you’re using a desktop computer, a tablet, or a smartphone, you’ll have a great browsing experience.

Why is responsive design so important? For starters, more and more people are using mobile devices to access the internet. More than half of all internet traffic in Canada comes from mobile devices. If your website isn’t optimized for mobile, you could miss out on a lot of potential traffic.

More than just traffic

But it’s not just about traffic. A responsive website also improves user experience. Have you ever tried to pinch and zoom to read tiny text on a website that wasn’t mobile-friendly? It’s not a great experience. A responsive design ensures that the text and images on your site are easy to read and interact with, no matter what device your visitor is using.

So how does responsive design work? The key is in the CSS (Cascading Style Sheets) code that controls the layout and presentation of a website. With responsive design, the CSS is written in a way that allows it to adapt to different screen sizes.

It’s about a good user experience

For example, let’s say you have a website with a sidebar that displays on desktop screens. On a smaller screen, like a tablet or smartphone, that sidebar might take up too much space and make the website hard to read. With responsive design, the CSS code would detect the screen size and adjust the layout accordingly. On a smaller screen, the sidebar might move to the bottom of the page or disappear altogether.

Of course, it’s not just about layout. A responsive website also needs to consider things like image size, font size, and navigation. For example, if your website has a menu bar with many items, that menu might need to be condensed or reorganized on a smaller screen.

So, what are the benefits of a responsive website?

1. Improved user experience: As we’ve already mentioned, a responsive website makes it easy for visitors to navigate and interact with your site, no matter their device.
2. Better SEO: Google has stated that mobile-friendly websites will rank higher in search results than those not optimized for mobile. So, if you want to improve your search engine rankings, responsive design is necessary.
3. Increased conversions: A website that’s easy to use and navigate is more likely to convert visitors into customers. If your website isn’t responsive, visitors may get frustrated and leave before they can purchase or contact you.
4. Cost-effective: Instead of creating separate websites for desktop and mobile devices, responsive design allows you to create one website that works for all devices. This can save you time and money in the long run.
5. Future-proof: As new devices with different screen sizes and resolutions are released, a responsive website can adapt without requiring a complete redesign.

So, how can you make sure your website is responsive? If you’re building a new website, choose a web design framework or CMS (Content Management System) that supports responsive design. If you already have a website, you may need a web developer to make the necessary changes.

Testing your website on different devices ensures it looks and functions correctly. Many online tools, like Google’s Mobile-Friendly Test, can help you do this.

So, do you need a responsive website? I hope this is a clear and resounding YES, and you don’t hire anyone to build a website that doesn’t intend to make it responsive.

However, creating a website can be daunting, especially for small business owners lacking the necessary skills and expertise. This is where website design agencies come in. 

A website design agency can help small business owners create a professional-looking website that represents their brand and meets their specific needs.

But with so many website design agencies out there, choosing the right one for your small business can be a challenge. Here are some important items to consider when selecting a website design agency for your small business:

1. Experience and Expertise

When selecting a website design agency, it’s important to consider their experience and expertise. You want to work with a team with a proven track record of creating successful websites for small businesses. Look for an agency with experience working with businesses similar to yours and can offer a portfolio of their previous work. Additionally, you want to work with an agency with expertise in the latest web design trends and technologies. This ensures that your website will not only look great but will also be functional and user-friendly.

2. Communication and Collaboration

Effective communication and collaboration are key to a successful website design project. When selecting a website design agency, look for a team that values communication and is willing to collaborate with you throughout the project. This includes regular check-ins, open dialogue, and the ability to provide feedback and make necessary changes. A good website design agency should be able to explain technical concepts in a way that’s easy to understand and should be responsive to your questions and concerns.

3. Services Offered

Not all website design agencies offer the same services. Some agencies specialize in certain areas, such as e-commerce or mobile app design, while others offer a full suite of web design services. When selecting a website design agency, it’s important to consider their specific services and whether they align with your business’s needs. For example, if you plan to sell products online, you’ll want to work with an agency that has experience in e-commerce design.

4. Pricing and Budget

Website design costs vary significantly depending on the agency and the project’s scope. When selecting a website design agency, it’s important to consider your budget and the agency’s pricing structure. Some agencies charge a flat rate for their services, while others charge by the hour or have a project-based pricing structure. Look for an agency that is transparent about its pricing and can provide a detailed cost estimate.

5. Customer Service and Support

Customer service and support are essential when it comes to website design. After all, your website is a critical component of your business, and any issues or downtime can significantly impact your bottom line. When selecting a website design agency, look for a team that offers ongoing support and maintenance services. This includes regular backups, security updates, and troubleshooting assistance. Additionally, consider the agency’s customer service reputation and reviews from past clients.

6. Timeline and Project Management

Creating a website is a complex project that requires careful planning and execution. When selecting a website design agency, consider its project management process and timeline. Look for an agency that can provide a clear timeline for the project and is willing to work with your specific needs and deadlines. Additionally, consider the agency’s project management tools and processes, such as how they handle communication, revisions, and changes to the project scope.

7. Company Culture and Values

Finally, it’s important to consider the company culture and values of the website design agency. Look for an agency that aligns with your business’s values and mission. It may not seem important, but it will play a key role in how you communicate and how both sides handle friction and roadblocks.

The sum it all up: do your research, look past the pretty design, and keep in mind that you typically get what you pay for.

Web Design: The Look and Feel

Web design refers to the visual aspect of a website, including its layout, colours, typography, and graphics. It’s the process of creating a user-friendly, aesthetically pleasing, and intuitive interface that enhances the user experience. In simpler terms, web design is all about creating the “look and feel” of a website.

Web designers are responsible for creating the overall visual design of a website, as well as the user interface (UI) and user experience (UX). They work closely with clients to understand their business goals, target audience, and branding requirements and then create a website design that aligns with these factors.

Web designers typically use tools like Adobe Photoshop, Sketch, or Figma to create wireframes and mockups of a website design. They also work with developers to ensure the design is functional and responsive across different devices and platforms.

One of the most critical aspects of web design is user experience. A well-designed website not only looks good, but it’s also easy to navigate, intuitive to use, and provides a seamless experience for the user. Good web design considers factors like user behaviour, usability, accessibility, and information architecture.

Web Development: The Functionality

Web development, on the other hand, refers to the process of building a website from scratch or customizing an existing website template. It’s the process of turning a design into a functional website using programming languages like HTML, CSS, JavaScript, and PHP.

Web developers are responsible for coding the website and making it work. They work with the design team to ensure the website is functional, responsive, and compatible with different devices and platforms. They also implement features like forms, databases, and content management systems (CMS) that make the website dynamic and interactive.

Web development can be divided into two categories: front-end and back-end. Front-end development involves coding the parts of a website that users interact with, like the user interface, forms, and animations. Back-end development involves coding the parts of a website that users don’t see, like the server-side code, databases, and CMS.

Why Understanding the Difference Matters

Understanding the difference between web design and web development is essential for businesses looking to create a website or redesign an existing one. It helps them determine their requirements and find the right professionals for the job.

If you want to create a website that looks great and provides a seamless user experience, you need to work with a web designer. A web designer can help you create a visual design that aligns with your branding and business goals, ensuring that the website is intuitive and easy to navigate.

On the other hand, if you need a dynamic, interactive website with advanced features like databases and content management systems, you need to work with a web developer. A web developer can help you code the website and make it functional, responsive, and compatible with different devices and platforms.

It’s also important to note that while web design and web development are distinct disciplines, they often overlap. A good website requires both a strong visual design and functional code. Web designers and developers must work closely to ensure that the website meets the client’s requirements and provides an excellent user experience.

More technically, it’s the sum total of all the layers in your website stack working together to present the webpage through a browser.

Think of your website like a sandwich. 

And like every good sandwich, it has layers.

The layers are the ingredients of your sandwich.

Here are common (and simplified) ingredients layers that most WordPress sandwiches websites have:

• Domain
• DNS
• Web server
• Website files
• Database
• Browser
• Device

The “Frontend” of your website is a compilation of all these layers working together, and it’s what the visitor will see on their end.

It’s the result of all the design and development put into a website.

Hungry for a little more knowledge?

So here’s how it all plays out using our sandwich analogy:

• Layers = ingredients
• Recipe = programming/code
• Kitchen = web stack
• Chef = web designer/developer
• Sandwich = website
• Browser = customer
• Frontend = what is presented to the customer

Now here’s the interesting part.

When you click a link or type in the URL for a website, your requesting or ordering a sandwich.

That sandwich is then assembled (on-demand) in the kitchen using ingredients set in the recipe by the chef and delivers it to the customer to eat. 

More technically, the website is assembled (on-demand) by the web stack using the layers programmed by the web developer and presented in the browser to click through.

Now, web developers and chefs alike will critique my anecdote here, but I think they can all agree that it serves the purpose of illustrating the complexity of website, even if they don’t agree on the specifics.

Looking for a chef to design your special sandwich?

We can help with that.

https://webtechagency.ca/websites-design-services/

We’re a big fan of the new Molson design and a few of us would have loved to be in the room when this project was being discussed and strategized.

Our favourite part of logo/brand design is how far you can take the creative application of the brand in different environments while still staying true to the representation of the brand.

And we recognize how challenging it can be to work with such an iconic brand while pushing it into the contemporary.

 Well played BrandOpus and Molson Coors.

Original article:

https://www.transformmagazine.net/articles/2019/molson-portfolio-draws-on-heritage-visual-equity-in-rebrand/

Along with our team, we’ve been busy in the past 12 months reshaping our project workflows and internal processes to create more value through our services to you, our clients. More on that later.

Even before the sale, Webtech has been on a growth path for the past few years, and 2022 has been more of the same.

One of the key areas of growth is the range of services we offer. 

Long gone are the days of Webtech offering simple websites and web hosting.

Webtech of today

Today, we’re providing a wide range of web design solutions, complete website support services, brand design, SEO, advisory services and helping clients with social media.

Keeping in step with our growth, we’re updating our name and branding to Webtech Agency. 

Along with a name change, you’ll notice an updated logo, a new website and more ways for us to help you get more value from the web.

The good news is that your current services remain intact and as they were.

The better news is that we’re working on a few new projects aimed at helping you get more value from our team.

New projects

A few of the upcoming projects are:

• Newsletter with insight and advice
• More tailored solutions for you
• New services packed with value
• Better reporting to keep you current

We also want to take a moment to thank you for your positive reviews and referrals. It means the world to us knowing our clients continue to support us since the company’s start in 1997.

We’re continuing to build, and you’ll hear from us again soon with more updates and news.

Cheers,

Melissa & Joey.

Different scope.

Size of budget.

Range of features.

Unique goals.

Successful web projects should all start in the same place…

Planning.

So, here are 7 planning essentials before starting up a new website design project.

1. Research your competition.

You don’t want to launch your project and realise you aimed too low to compete in your market.

• What are they doing on their site?
• How good is their design?
• How much content do they have?
• What features have they added?
• What are their calls to action?

It sets your benchmark to be competitive.

2. Focus on your target audience

Without a clear understanding of your ideal visitor, your design and content will be too general to make an impact.

• What location defines them?
• What are their pain-points?
• What do they value?
• What are their associated interests?

Marketing success will depend on how well you know your audience.

3. Establish your goal.

What should your website do for you?

How will it create value in your business?

• Generate leads? 
• Process orders? 
• Rank in search?
• Members portal?
• Improve your reputation?

Clarify how your website should perform and how it should be measured.

4. Plan your content. 

Don’t think about design until you have clarity on your content topics.

Organize your topics into categories: products, about, work examples, resources, etc.

Content building often takes more time than building the website.

Start planning to fill the gaps in your content ASAP.

5. Find inspiration.

You’ll need to convey your design ideas to a creative-type person. That isn’t easy for most.

Find inspiration in other websites and marketing materials.

Focus on shapes, colours, styles, and features.

List brands that you like and why you like them.

Describe what you want in your words. Let the designer translate.

6. Set realistic timelines.

Quality work takes time, and is worth the investment. 

Give yourself enough time to properly review the website.

Think ‘months’ not ‘weeks’.

Be clear about your expectations, but give space for adjustment.

7. Set a realistic budget range.

Your budget should be a clear range that you’re comfortable paying.

Underpaying is more problematic than overpaying.

Focus on your goal and the added value over the next 12 months. 

The added value should be 10x the cost of the website budget.

As a business owner, you don’t need to be able to code or design a site—you just need to know how to gauge success. Here are the three most important factors in determining if your web design is up-to-snuff:

A good website is professional.

Your website design should be clean, contemporary and positions your brand appropriately within your marketplace. Your website should look like it belongs to a professional business, was designed by a professional designer, and is well thought out. It should also look like it has been designed for the kind of business you’re in and the audience you are trying to reach. Your website should be consistent with the brand identity of your company or organization, as well as convey its unique message clearly through its design elements (colors, typography).

Your website design doesn’t need to be bleeding edge, but it should meet current base standards for what your market expects of your brand.

A good website is organized.

Information should be easily accessible and clearly labeled so that visitors to your website know where to find what they’re looking for. If you have a lot of content, it can be helpful to organize your site into sections or subsections. For example, if you have a health blog, you may want to split up your posts into categories like “foods you should eat more of” or “workout tips.” This way, people who are only interested in reading about one specific topic will be able to quickly find the corresponding section on your site without having to scroll through every single post on your blog (which would take forever!). 

To make things even easier on visitors—and Google—you might want to include breadcrumb links at the bottom of each page within those sections so they can move back up through any other pages they may have missed while browsing down through all the content available on that page. This way visitors won’t feel lost when navigating between different sections of content within your website.

And that goes for website pages as well. Your website content should be structured in a familiar pattern, again, making it easy for your visitors to navigate through your website.

A good website makes it easy to take the next step.

A good website is easy to navigate, makes it easy for people to take the next step, and clearly states what action you want them to take.

To make sure your website is as effective as possible:

• Clearly state what action you want a visitor to take. Is it making an appointment? Sending an email? Downloading something? Make that clear at the top of your site. Be specific about what you’re asking people to do so they know exactly what you want from them and how they can help with your mission (and no longer feel confused).
• Make sure contact information like phone numbers, email addresses, and addresses are easy-to-find on every page of your website — especially if it’s not obvious where visitors should go next! Your goal is for everyone who finds out about your company through a Google search or social media post (or how ever they found you) be able to quickly get in touch with someone at the company without having any trouble finding their email address or phone number — so make sure those details appear prominently on every page of your site. 
• Providing location information if needed is crucial. If you need customers to visit your location, make it easy for them to find you by adding directions and instructions. You might miss out on an opportunity if a potential customer is confused about where you’re located. 

Conclusion

A good website is one of the most valuable sales tools your company can have. If a visitor to your site isn’t impressed and doesn’t understand what you do quickly, they will leave and go to a competitor’s website. And that’s bad for business! You want potential customers to understand what you do and why they should buy from you. A well-designed site makes this easy for them by giving them all of the information they need in an attractive package.

The best way to build an effective website is through hiring experienced professionals. A professional website designer can help you avoid costly mistakes when building a website for your business and guide you through the process quicker than doing it on your own.