Brochure Style Website Development

Yonge Apps is a boutique app developer based in Toronto, Ontario. As a fairly new start up, they wanted a site that was simple but could easily showcase their released and upcoming projects. We decided to go with a brochure style website, basically a pared down portfolio. We implemented a Bootstrap 3 source install and got to work immediately!

Brochure Style Website – The Plan

Yonge Apps already knew what pages they wanted. It would be a simple single-page build with five sections, the portfolio section being split into sub-sections for each new entry. The design was supplied by their creative team and I immediately started slicing out needed graphics.

Yonge Apps – The Pages

The first section, a simple slider incorporates a small story about the business on the first slide, before cycling through several different services offered. To accomplish this we used the built in Bootstrap carousel with some custom CSS to adjust the alignments. It turned out quite well and works incredibly on all devices and resolutions.

The Portfolio section of our brochure style website contains almost no words. Instead, we let the images do the talking with only a simple header underneath each item denoting it’s project title. We added an opacity effect on hover to help the selected image “pop” more. When an image is not hovered over, it supplies a nice overlay effect on the cityscape background.

When a user selects a portfolio item, they are treated to a nice horizontal slide animation taking them to the project. Here they will see a condensed summary of the project goals and tools, as well as several slides showing the product. The user is presented with a back button to absolve any navigation confusion when returning to the main portfolio section.

Process is a simple info-graphic detailing the entire creative process from inception to conclusion. Rather than doing several paragraph write ups on each stage, it was decided to stick with the theme of the site to use an image which conveys the entire process at a glance. This was a successful way to show how your team works and being short and sweet makes the chances your client will read it all the better. Consider a process info-graphic on your next brochure style website.

The Team page is fairly self explanatory. Yonge Apps is comprised of three gentlemen, and we gave them each a photo and one paragraph write up of what they bring to the company. Short, sweet, and to the point.

Finally, we have the most important page! Contact ensures clients can actually get a hold of you for quotes, questions or anything in between. I simply centred the form, added our email fields and script and we were off to the races. To protect from SPAM we incorporated a ReCAPTCHA with a custom skin using the ReCAPTCHA API. As this design was originally responsive, I actually created a responsive ReCAPTCHA you can read about and use here!

JavaScript Page Scroll

The client asked for a one page scroll feature, so we incorporated fullPage.js to our build to handle the heavy lifting. In addition to the classy vertical scroll, this script is also responsible for the portfolio sub page horizontal scroll. The client was very happy with this effect.

Brochure Style Website Development – Closing Thoughts

This project was great, but there were some restrictions that did limit our build. Though the site was designed from the ground up for responsiveness with Bootstrap, when we added fullPage.js we were no longer able to view all the content on a mobile device. That is, if the user tried to scroll the page would go to the next section. We had to disable our responsive features to make sure all devices could view the site, and though on some phones it might require the use of zoom it was the only solution within our timeframe.

A brochure style website is perfect for small businesses who won’t be updating blogs or their content too often. Keep it simple with lots of calls to action for the client to get in touch. The faster they can get to you, the faster you can help them!

One thought on “Brochure Style Website Development

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*