The client had a rough, unfinished draft of a homepage / landing page for their new product, and wanted a polished, finished mockup that would then need to be coded in HTML5/ CSS3 + Bootstrap4. The rough draft we started with was disproportionate with overly large elements that were unintentional, and colors that were unappealing. Additionally, there were large sections that had yet to be mocked up. The project took 4 days of intensive redesign using Sketch, Adobe XD, and Invision App, followed by 1 day of programming in HTML5/ CSS3 and Bootstrap4.
This was the unfinished rough draft provided by the client.
Looking at it zoomed out seems ok, but once I put it on Invision App, much of it is clearly oversized, especially farther down the page. Additionally, it didn't appear to be using the Bootstrap 12-column layout - the maximum widths of the content do not match from section to section, so there was a fair amount of cleaning up to do. The biggest issue was that the client was unhappy with the design.
There were quite a few drafts in between this first draft which was handed to me, and the final draft -- in order to figure out what style the client had in mind for his brand, I usually gave him at least two options at each review point.
The client wanted something simple, but colorful and vibrant - he wanted to emphasize the qualities of this new driveway paint and also bring out the samples because most driveway paint sellers do not offer samples. I pulled the colors from his existing Tower paint logo and from the photos of the driveway paint cans to stay inline with the brand, since this is the first project for this particular product there weren't set style guidelines to follow.
Here is the final draft:
Progress went much faster once I figured out what the client liked in terms of styles - I would say it is bold, contrasting, colorful and a little edgy with the use of angles and split screens.
A few of the UX suggestions I had:
This part flew by in comparison to the mockup stage. I've worked on projects where they choose not to use mockups and just code it per written agreements and requested changes-- it's so much more efficient to spend the time to nail down the mockup to a point where it's at least 90% there, than to have to recode the entire thing 2+ times.
The most challenging part of the front-end programming was getting the angled containers just right. In some cases, I've seen online where programmers opt to use images for angles, but in this case, I wanted a sharp clear line, and also, needed it to work responsively with bootstrap -- particularly the section that is both angled and split screen with text-- so I needed to code it. The problem with rotating containers is that if you have a normal div at 100% width and rotate it, then the corner will stick up - so the solution was to make the rotate <div> 120% wide, with -10% margins on the left and right, and have the parent of the <div> have an overflow:hidden;. Then - to get the text and split screen just right, I rotated the child <div> the opposite direction, and used Bootstrap for the split screen on desktop.
Another challenging aspect was the carousel for this page - I needed to code the color selectors to display above the carousel indicators at the bottom of the carousel for desktop, and below it for mobile. The color selectors needed to be fixed and on top of the carousel.
I took advantage of quite a few Bootstrap elements on this page, such as the carousel, navbar, dropdown, accordian, and of course the layout/grid system as well as margins and padding.