This website is for a client of mine that owns a new app called Tourist. The app aims to open up the tourism market by putting the control in the hands of consumers. It was important to my client to maintain a similar look and feel as the app itself. The app originally didn't have a logo, and the color scheme was just that light blue. I felt that it needed a bit more oomph, plus a slightly darker color for the text, so I added in the orange as the blue's direct color complement. My client liked the change so much they designed their logo using the same orange and changed the color scheme of the app to match!
This website has to cater to three main audiences. The first are potential tourists, meaning people from all over the world looking to take a tour on demand. The language had to be simple so as not to allienate non-English-speaking tourists, and the site had to simply show how to use the app. That's where the step-by-step path using app screenshots came into play.
The next two audiences are prospective guides and referrers. You can access info about becoming a guide and a referrer directly from the homepage, with fixed navigation buttons right at the top.
Some other development choices include having two different menus for the homepage and any other page. It looked a bit silly having a navigation button for "About" when that was the first thing on the homepage, so using some PHP "if/else" language, I was able to have different menus for the different pages.
I also got to play around with animations a bit on this website. My client wanted the header to be very narrow, but still show the app's logo and tagline. I decided to keep the header tall initially with all the info they requested, and once you scroll down the site, the header shrinks, stays fixed to the top, and the tagline info disappears. It was a bit difficult to ensure this looked flawless on every device size, but the media queries hold up! After developing this, I noticed that when you click on one of the frontpage nav buttons like "How it Works", the header hides the top part of the section. I fixed this by adding a hidden :before pseudotag to each section, and giving it a height to push it down from the top along with an equal negative top margin so it doesn't actually take on that height.
Overall, the site was fun and challenging to design and build. I think it does a great job catering to all three audiences as well as make my client proud to use it!