The web design team at InMotion Hosting has the pleasure of serving many types of businesses at different stages in their web presence journey. The experienced team, which is made up of senior web designers, senior front-end developers, and dedicated project success advisers, has created beautiful, modern designs for businesses looking to establish a brand new site or give a fresh look to an existing site.
Web design trends are constantly changing. While you don’t need to overhaul your website every year, you should make sure your website maintains a fresh, contemporary look. If your website was designed a couple of years ago, it may be easier to simply redesign your existing site to meet modern web standards.
When tasked with a redesign, it’s important for the designers to apply the latest styles without losing the original spirit of the brand. Redesigns are different from brand new sites because you want the essence of the business to still be recognizable. Loyal readers and customers should still recognize the business when the website loads.
Below is a customer highlight showing the before and after of the design process, and how our web design team keeps the brand in mind when redesigning a website.
Trester Demolition & Concrete Cutting needed a new design and didn’t want anything brought over from the old website. The designer, Barbara D., then used her years of design experience to give them a fresh look that is still true to their brand and business.
The Trester Demolition & Concrete Cutting Redesign
Before the design process begins, web design clients first complete an interview form which allows them to list their goals, wants, and needs for their new website. They also complete an interview phone call, with a dedicated project success adviser who walks them through the web design process and what to expect per their goals.
After the phone call, the senior web designer creates a comp, which is a high-fidelity image, of their homepage. The comp shows the client how their homepage will look once coded, and gives the design team the freedom to make major changes easily without the need to recode the entire site.
Design Overview
At the start of the process, Trester Demolition & Concrete Cutting provided a wonderful new logo that drove many of the decisions during the design stage. The designer used the blues, grays, and blacks from the logo throughout the design, and added images and patterns similar to the pattern seen in the logo.
They also provided specific content for the homepage and following their content guidelines, the designer created a layout using full-width backgrounds for every section going down the homepage, adding some texture with a concrete pattern to two of the sections and a gray horizontal gradient to echo the logo gradient in the center section. She separated the sections with blue 12 pixel thick dividing lines as visual separators and color accents.
The designer pushed the large, main image (or, the hero image) on the homepage design to the top of the page and added a transparent white header on top of the image with the logo prominently displayed to the left. For the hero image, the designer chose a stock image that already had a vignette effect and added a black and white filter to remove the blue tone of the original image. She also added a slight drop shadow to create visual depth. The large hero image will have a parallax effect once coded.
Font Considerations
The navigation text is black but the designer used the blue from the logo as the hover color for the nav menu items, and as an accent throughout the design. As indicated in the after image, a hover color is the color the menu items changes to once the end user hovers their mouse over the menu item.
The design team uses Google web safe fonts in their designs. Web safe fonts ensure that the chosen font will be seen by the end user no matter the device or browser. The font used in the logo is not a Google safe font, so she chose the modern, clean sans-serif IBM Plex Sans — using medium and regular weights between heading tags and body text.
Highlighting Services
Moving down the page, in the “What We Do” section, the designer started out with two stock images. Later in the process, the clients provided two images for her to use. She then added a dark overlay as a hover effect to the image and also made the text hover state blue to match the logo. The images are placed on a medium grey shade concrete pattern.
In the next section, which enumerates the different types of demolition they do, the designer used a gradient background and added two rows of captioned icons that communicate their demolition services.
The last section highlights their sawing services. For balance, the designer repeated the concrete background pattern and white fonts used in the “What We Do” section. She also found a stock icon collection of differently shaped saw blades, which was perfect for the subject matter, and used an overlay of white for consistency.
For the footer, the designer made a foundation layer using a deeper grey with a slight blue hue and adding white text and blue social media icons. Under this row, the copyright strip is black with white text, forming the visual bottom edge of the website.
Web Design Services
By utilizing web trends and years of professional experience, the designer was able to create a modern, intuitive design for the client that still captured the essence of the business and brand. As web trends change, it’s important to present an easy to use website that is modern and clean. Redesigns can be hard but working with an experienced web design team can save you time, money, and help the continued promotion of your business.
If you’re thinking about redesigning your website, consider InMotion Web Design Services. Our professional team of web designers and frontend developers will create a custom, beautiful website that draws in your end users and assists your business growth!
