Respect for The Creative Process = Quality Design
DreamMakers residential and commercial landscapers always offer high-quality services from the simplest to the most complex projects. Their custom landscaping provides clients with a refined, casual environment that is both comfortable and cultivated. They don’t just design landscapes, they create lifestyles. For quality design for their clients they put focus into the process and have the development work to show it. From on-sight inspections to 3D modeling of ideas, they have an intimate approach to each project to assure the client is engaged and happy with the final product. Their clients pay for quality and surety. Their background in respecting the creative process made them one of my favorite clients because the same level attention is needed from wireframes to launch for a custom website. This website design is simple and accessible to relate to the relaxing spaces DreamMakers provides.
A Soft Rebranding for The Appropriate Style
DreamMakers had a current website that allowed me to review existing content to have a full understanding of their services and the inconsistencies that needed to be resolved for the new site. They had a visual identity of a lawn service including hunter green and white as their branded colors with a logo that included three pillars of written content. They did not look like a high-end landscaping design service till you saw their portfolio. I could not change their logo but with transparent concepting to match their vision, we landing on a color scheme that was more luxurious to match their work. I paired their new look with the Google Serif Font Lora to keep it simple, and then made a few small edits to the logo for it to be more legible for digital. This concluded the base aesthetic for their new website and it was time to switch gears to the real design challenges; the UI.
UI for Desktop Version
Andrew Straley was Website Director for this project and supplied the Site Map for this project. Go Andrew! As a designer, I do prefer and recommend starting with mobile then moving into a design for desktop which consist of adding more content but in this case the Developer preferred to work with the Desktop version first. In any case, if the Developer is requesting a process for healthier code than that is the route to go. I used OmniGraffle for the wireframing of this project. From working with it on this project, I do not like it as much as Axure but it does the trick and is a bit cheaper. Axure just provides a variety of handy features and it was easier for me to catch on to the interface.
This client's portfolio was grand and they had over 100 great photos of their work, 3-D renderings, planning details, and mood boards. I wanted to use them and planned upfront to utilize the imagery in the interface. As always, these started as sketches on paper. As I read through each page of copy I scribble and highlight over the copy and sketch out boxes as I organize the content in my brain for digestion. It gets messy. I do this over and over with different prints for each page before I start wireframing on the computer. As a visual learner, it helps me process the content and simultaneously prototype through sketching. Once I get into wireframing on the computer, I sometimes get stuck on making a decision once I have multiple version in front of me. In which case I either bring a team member over for a second opinion or play on some of my favorite websites to help me decide on the best option. This particular design was a combination of both practices.
It is important to keep in mind that this stage isn't about creativity, but the preciseness of flow. I find myself skipping to the aesthetics that will make the flow of content better while still in the wireframing stage and have to backup. Sketching allows me to see such leaps to cut back before I spend too much time down the wrong road. If I do not allow myself to keep it simple at this stage, I will not be able to review as many options to find the best solution. To keep the flow entertaining is how we get creative in the next step, not in wireframing. But if wireframing feels easy, then you are overlooking stuff. It should look simple, but it is the process of elimination that makes great UI to appear simple and that takes a lot of work! Above are some of the final wireframes that were used for the final design. To keep this post from being a mile long, I have just included a scan of some of the sketches in the background of the final wireframes.
A Few Notes on the Desktop Design
Three aspects of the design I want to cover is the homepage video frame, navigation menu and parallax design. The client did have an archive of video testimonials and videos with comic sans font. We had to do some digging to get a video without the editing that included the font. I used one we received from the production manager of the videos on the homepage. To help sell the use of an edited logo with two of the pillars of copy removed, I utilized aspects of the logo on the homepage. Making the circular graphic of the logo a frame holder and providing the "Outdoor Living & Design" to the right corner, it kept the visual aspects of the mark prominent without having to use the full logo. You can see this on the design at the top of this article but the copy to the right is no longer currently present on the site.
The second feature worthy of discussion is the main menu navigation design. It is always a bummer for me when a hamburger menu design isn't the best option. This was one those cases where the extra rollover experience required by the off-canvas effect needed to me removed. Moving forward with keeping the menu bold and simple, I used the full space to divide the buttons out in a grid and designed a high contrast hover to give a direct visual response to the user's actions. The Developer did a good job in preserving the smooth transitional effects of the dropdowns that were simply styled. The font styling is utilizing the global highlight color khaki/beige to stay consistent with the site CSS of internal pages. It wasn't my go-to color, I tend to pick a brighter color of the scheme for the highlight. However, I found it to be a relaxed tone of understated elegance and pleasant to interact with next to the dense blue-greens. There are for sure many design details that did not get carried through in development, such as type treatments and spacing that I find disappointing. Overall, I do believe the design keeps a causal, leisure appeal that you would want in a backyard living space.
Lastly, I want to discuss the direction for a parallax effect of this website. The client had a ton of great photos of their work, good to use for portfolio for content throughout website. To give their work the attention it deserved, I designed the sight to have a “revealing animation” to all images, using the same image for a background imaged with a dense overlay and copy and revealing the full image at 100% opacity as a transition into a section with copy. This effect is used throughout. They website was designed to work as sections as the user scrolled, both vertical and horizontal content, snapping each section above the fold. You can see these indicators to the right and on click it works the same way. However, the scrolling effect was lost in Development and the horizontal parallax is not current on live version.
UI for Mobile Design
I love this part! I do find it easier in the long run to start with mobile but I also like it the most so it might be a bias opinion... probably not though. Above you can see some of the wireframing for the mobile design. One of my favorite page designs is "Service Overview" page, which combines a short description of each service and photo gallary the user can swipe through eliminating 9 pages from the desktop version.
Final Mobile Design
This is the easiest part for me! Designing with the removed interactive effects and breaking it all down to the raw allowed for easy interface for the user to experience the full website. Canvas was used for the mobile design and the use of accordian designs came in handy.
Minor edits were completed for the tablet design but wireframing was not performed prior. There were some design effects that were missed in development that is a big bummer for me but overall the project came out well and the client was really happy. At the end, that is always a big goal accomplished. So I will cheers to that!
