WEB DESIGN TIPS FOR SERVICE PROFESSIONALS
break up content using color and shapes
In this example, we are using both a color gradient and some shape at the top to break up the content. This is a great way to show a call to action or very important information that you want the user to see. It makes your website more appealing to the eyes and can help transition from one topic to another. We have done case studies where we have re-designed a website using these simple tips and have watched conversion rates and leads skyrocket while the website is getting a similar amount of traffic as they were before the re-design. The small details matter.
Making Your Website Interactive
Many of the service business professionals we work with are providing a service that provides a before and after result. Whether you are a carpet cleaner, landscaper, pressure washer, window cleaner, janitorial, or other service business. The example below is a great way to show off your work.
Here are some before and after photos that allow the user to interact with your website. IMPORTANT NOTE: when taking before and after photos, it is best to keep the same lighting and angles as much as you can. As you will notice, one of these is a better example of that than the other. This improves trust with users that the photos haven’t been edited or manipulated and the results shown are what you provide. If getting the same angle and lighting is difficult, just ensure items such as a light switch or outlet allow the area to be identifiable so the user knows it is a clean before and after of the same area. As you can see, we can provide a horizontal and vertical effect.
Example One
Example Two
shadows and shapes for images
Stock images are common to use in websites to get the right look and feel but a lot of people are apprehensive of using them. We get it, a square or rectangular stock image may not give you the right look that you’re wanting. We recommend using shapes and the use of inner shadows or drop shadows to give the images some style.
Normal stock photo
As you can see, here is a normal stock photo simply resized and nothing special done to it. For some people this is fine for their design, but if you want something different here is another example.
Edited stock photo
With this quick example you can see how using shapes and shadows can create some depth for the photo and make it look like you’re looking into the screen beyond the text. This could be done with any shape you want.
working with wireframing & re-design
Working with Another Company's Design
This is a wireframe or mockup that was created by a branding company that our client wanted us to model their web design off of. We have worked with clients that have gotten mockups from services like 99designs and other similar services.
As you can see there are some changes that the client made during the development, but the wireframe was a great starting point to get to the final result they wanted. We made some user experience suggestions as well to help with maximizing conversions.
using what you have for a re-design
Here is what we started with. The internal pages had some great wording and content but this website wasn’t mobile friendly and was created by the client when they first started. Then they hired us to get the look they wanted.
Their final website pictured here went through a few different revisions. After some great input from the client on the look, message, and feel they wanted their prospects and current clients to see. They wanted their logo and brand to stand out and be front and center. Website re-design is a cost effective option where we can put your existing wording and content on a more user-friendly layout with some simple user experience improvements.