A fully responsive landing page for a fake construction company
What I Learned
I wanted to be able to create a website from receiving a design and given no more information. Doing so meant I had to dig deep into the design and find details on my own.
One goal that I created for myself was working without communication. While using the design from Matthew Hogeboom, I had no communication with a client or designer. I had to find all the details without them being laid out for me.
Every margin width and font-size had to be tested to get as close to the design as possible without collaboration. It was a challenge and I had to come up with my own ideas for hover behaviors and similar features, but it meant I was able to use my creativity and make the website a little bit more of my own creation in the process.
The second major goal of this project was similar to the first goal, in that, I wanted to try my hand at creating a mobile design for the site. I felt creating a mobile site would exercise my creativity and put me in the role of a designer for a while. I'm not a designer and most challenges I have faced previously came from the design phase.
Unforeseen Challenges
While problems are always present in any project, these particular problems were the most notable and were where I grew from the most on this journey.
By far, the most painful and delaying problem I faced was trying to create a mobile site from a desktop design. Primarily, as a developer, coming up with any design is a challenge, but starting from a complex design and whittling it down to something more simple was difficult and it did not help that I started after I finished the desktop site. This project is where I learned the importance on mobile first development and I have thought about it on every project since.
Another issue I found when developing this website was from the design itself. The first issue was the hero section's image itself. The image on the mobile site looked awful and, eventually, I found a second image that worked with a more vertical screen.
The second issue with the image was the white text on the light colored picture. I was conflicted. On one hand, I know of several ways to fix the contrast issue, but on the other hand, my goal for this site was to use the design and try not to deviate. I opted for giving the text a small amount of shadow in hopes of bringing it out of the image. Ultimately, I left it as is to stay with the design.