Senior UI/UX
and front-end
developer

Questions & Answers

10 Things Business Leaders Need to Know About Website Reskinning

#front-end #reskin #UI development

In today’s fast-paced digital landscape, keeping your website up-to-date is essential for maintaining a solid online presence. While a complete website redesign may seem like the go-to solution, it’s often time-consuming and costly. This is where website reskinning comes in—a quicker, more cost-effective way to refresh the look of your site without changing its core structure or functionality.

A reskin involves updating the visual elements of your website, such as colours, fonts, and imagery, to give it a modern appearance and align it with current branding. A well-timed reskin can be a game-changer for businesses looking to enhance user experience and stay competitive.

In this Q&A style post, I will answer the most commonly asked questions about website reskinning - what it is, what benefits it can provide to the business, and why it might be the perfect alternative to a complete redesign.

1. What is website reskinning, and how is it different from a redesign?

Website reskinning focuses on changing a site’s appearance without altering its core structure or functionality. It’s a visual overhaul, often involving updates to colours, fonts, images, and layouts, while the site’s back-end code and content typically stay the same.

  • Reskinning: Involves aesthetic changes to give the site a fresh look.
  • Redesign: Involves more profound changes to both the design and functionality, often requiring back-end adjustments, navigation reworks, and structural updates.

2. Why should a business reskin its website instead of redesigning it?

A website reskin is ideal when:

  • The site’s structure, functionality, and performance still meet business needs.
  • The goal is to refresh the website’s appearance quickly and affordably without significant disruption.
  • There’s a need to modernise the UI of a website while avoiding the costs and time investment of a full redesign.
  • The focus is on improving user experience and aesthetics without rebuilding the core systems. A redesign, however, may be necessary if the site’s usability, content structure, or technology stack is outdated.

3. How often should a website be reskinned?

Typically, a website should be reskinned every 3-4 years to stay current with design trends, align with evolving brand guidelines, and maintain a fresh user experience. Market changes, user feedback, and competition may also drive the need for a faster refresh.

4. What elements of a website change during a reskin?

The following elements are usually updated during a reskin:

  • Colours: To reflect current branding or design trends.
  • Typography: To improve readability or align with branding.
  • Images and Graphics: Replaced or updated to match a new visual theme or style.
  • Website responsiveness: To improve the usability of the website on smaller devices.
  • Layout: To improve spacing, button styles, hover effects, and overall visual aesthetics without changing the website’s structure. Core elements like the content, navigation, and functionality usually remain the same.

5. How long does a website reskin typically take?

The timeline for a website reskin depends a lot on its complexity and the project’s scope:

  • Design Phase: Creating and refining new visual designs typically takes 2-4 weeks, depending on the complexity of the website and the amount of stakeholder feedback required.
  • Development Phase: Implementing the design changes highly depends not only on the website’s size but also on the state of the code (i.e. an existing technical debt). On average, the reskin’s development phase can take 4 to 8 weeks.
  • Testing Phase: Allow 1-2 weeks for thorough testing across different browsers and devices. Larger sites or more complex branding changes will extend the timeline, while smaller sites can be tested more quickly.

All of the above also depend on the overall reskin release plan. If you want to release all changes to production in one go, the timeline for the project will be shorter. However, if you want to introduce the changes gradually, this will take more time.

6. Will a website reskin affect SEO?

A reskin can impact SEO, both positively and negatively:

  • Positive Impact: A reskin that improves mobile responsiveness, page speed, or user experience can positively affect SEO rankings.
  • Negative Impact: Any unintentional HTML structure, metadata, or site speed changes could harm rankings. SEO best practices should be followed throughout the reskinning process to mitigate the risks, and performance should be monitored post-launch.

7. Can a website reskin be done without changing the existing back-end or CMS?

A reskin focuses on the front end (visual elements), leaving the back end and CMS functionality unchanged. This makes reskinning an efficient option for businesses that want to refresh their design while keeping their content management process intact.

8. What are the costs involved in reskinning a website?

The cost of reskinning a website varies depending on factors like:

  • Website Size: Larger sites with more pages require more design and development work.
  • Custom Design Work: Custom designs tailored to a company’s needs will be more expensive than off-the-shelf templates.
  • Hiring Professional Designers or Agencies: Outsourcing the reskin to a professional team will incur higher costs but may result in better quality. On average, reskinning costs can range from a few thousand pounds for a small site to higher amounts for more complex projects with larger codebases and custom designs.

9. Will a website be down during the reskinning deployment process?

In most cases, downtime can be minimised or even avoided during a reskin deployment to production. A staging environment allows the new design to be tested and refined without affecting the live site. Once the reskin is ready, the new design can be deployed with minimal disruption. Deploying changes during off-peak hours or using strategies like blue-green deployment can minimise downtime.

10. How will users be affected by a website reskin?

A well-executed reskin should enhance the user experience by delivering a more visually appealing and modern interface without disrupting users’ interaction with the site. However, sudden or drastic design changes may confuse regular users, so it’s important to:

  • Introduce changes gradually, especially on sites with a larger number of visitors.
  • Maintain consistency in key UI elements.
  • Ensure usability testing is conducted to confirm that users can easily navigate the refreshed design.
  • Communicate the changes to users beforehand to reduce confusion or resistance to the new look.

Summary

In this post, I answered business leaders’ or owners’ most commonly asked questions about website reskinning. To summarise, reskinning offers businesses a practical and efficient way to modernise their online presence without a complete redesign. By focusing on visual updates, reskinning can help improve user experience, align your site with current branding, and boost engagement while maintaining your website’s core structure and functionality.

Whether you want to refresh your website’s look, improve performance, or stay competitive in a fast-evolving digital world, I hope this post helps you make informed decisions for your business.

Glossary of Terms

  • Website Reskinning: The process of updating the visual design of a website, such as colours, fonts, images, and layout, without changing its core functionality or structure.
  • Website Redesign: A comprehensive overhaul of a website’s design and functionality, often involving changes to the back end, structure, navigation, and user experience.
  • CMS (Content Management System): A software platform used to manage, create, and modify digital content on a website without needing to write code. Examples include WordPress, Joomla, and Drupal.
  • User Experience (UX): Refers to the overall experience a person has when interacting with a website or digital product, including ease of use, accessibility, and how intuitive the design is.
  • Visual Elements: The components of a website’s design that are visible to users, such as colours, typography, images, buttons, and layout.
  • Responsive Design: A design approach that ensures a website’s layout and content adapts to different screen sizes and devices, such as smartphones, tablets, and desktop computers.
  • Staging Environment: A testing version of a website where changes can be made and reviewed before they go live. It mirrors the live website but is not publicly accessible.
  • Blue-Green Deployment: A deployment strategy that maintains two identical environments (blue and green). The live site runs in one environment while changes are made in another. When the changes are ready, traffic is switched to the updated environment.
  • SEO (Search Engine Optimisation): Improving a website’s visibility on search engines like Google. This involves optimising elements such as keywords, content, metadata, and website structure to improve search rankings.
  • Technical Debt: Refers to the concept of taking shortcuts in the development process that may lead to future complications. It often results from outdated code or systems that require extra time and resources to address in future updates.

Next article

Domino's

How We Are Utilising Figma Variables API for Standardised UI Development at Domino’s

  • UI development
  • design system
  • design tokens
  • front-end
  • process improvements