This landing page design is professional and clean, yet also inviting and friendly. This style appeals to both residential and commercial clients and everyone inbetween. With it's responsive functionality, this website is perfect for sales to show to potential clients while on site.
Our designers used the complimentary colours from your logo, blue and orange as well as some deep greys to keep the design anchored.
We utilized a condensed, square font for the headings and a clean sans-serif font for the body text. These fonts are both web safe and will experience no issues rendering across platforms and browsers.
This is a reactive design. What this means is as the screen gets larger or smaller, the website will adjust to that size so that the content is both easier to navigate and more aesthetically pleasing on all platforms from laptops to cell phones.
The desktop design is what will appear on resolutions larger than 1024 x 768. The elements will become larger and more spread out depending on the specific size of the screen. Shown below is what the design would look like on a 1920 x 1080 screen.
These slides are the perfect way to touch on all the various services Dr. HVAC offers their customers.
The top of the website follows web standards. The Dr. HVAC logo is at the top left, immediately establishing that this is their website. The horizontal main navigation is clear and prompts the user to click. The navigation also features an advanced CSS drop down menu (more on this below).
One of the main purposes of any landing page is to direct your users where to go next. That is why I have included 4 Actionable Item buttons directly below the jQuery. These buttons are shortcuts to the areas of your website your clients will most likely want to explore.
All the content on this website will never be more than a couple of clicks away, creating an smoother navigation for users. This is the menu for the desktop version of the website, the tablet and mobile versions will have a different version that better suits a touch interface.
The design remains very similar to the desktop version, except that the main navigation collapses in to a mobile friendly version (more on that below) and text and buttons become larger for easier viewing and navigation at the smaller size.
The mobile design will also display perfectly whether the device is held vertically or horizontally. The mobile layout shrinks down to one column so that, once again, all the content remains big enough and accessible even at the much smaller screen size.