Gorilla Web Design Website

Project Summary

Guerrilla Web Design Agency is a fully responsive website developed using HTML5, CSS3, JavaScript, jQuery and Bootstrap 4.1.  This is my second fully responsive website built as a personal project, with the idea of keeping user friendliness in my mind.

I name it Guerrilla Web Design to represent the powerful possibilities of web design.

Project Details

Role

Designer/Developer

languages

HTML5, CSS3, Bootstrap, JavaScript, jQuery

goal

Create a fully responsive modern website

Process

The first steps of preproduction I drew up a mind map to brainstorm ideas and crucial elements needed to produce the mood and feel of Gorilla Web Design Agency’s brand identity. 

Sketches

I then gathered up all my ideas and began getting creative by drawing up sketches, laying out the information architecture to show where each UI elements should be placed for user friendly experience.

Wireframes

Finally, before developing the website I used Adobe XD to create low fidelity wireframes to confirm the design model of the project. 

Special Features

  • Transparent navigation menu that turns dark as you scroll down for better UX
  • Smooth parallax effect as you scroll down past the header and the about page
  • To make the website more dynamic I used animations from animate.css library
  •  To create a smooth filterable portfolio I used Isotope.js which is a JavaScript library that essentially makes it easy to sort, filter and add Masonry layouts to items on a webpage
  • Smooth scrolling effect throughout the website
  • OWL Carousel jQuery slider plugin for creating a fully responsive carousel sliders
  • jQuery plugin counterup effect so the numbers count up from zero on the awards section
  • Smooth scroll to the top of the page from the bottom for better user experience

Final Product

Target Audience

Business professionals looking to communicate their web design brand and gain credibility 

Design Choices

With user friendliness being the main objective in this project I decided to build a single page website to make it easier to navigate. I used a complement divide color scheme with orange & black being the most dominant colors as I really wanted to make the user feel warmth, energy and also make it fun to scroll through the website.  

Design Philosophy

The goal of Gorilla Web Design was to put the skills I learned over the last 11 months to the test and build a fully responsive website from scratch using HTML5, CSS3, Bootstrap grid system and some jQuery.   

Challenges

One of the biggest challenges I faced in this project was using jQuery to create the count up numbers effect. Also I wanted to create a more smooth way to portray Gorilla Web Design’s projects so at first I created a lightbox gallery but towards the end of the project I decided a filterable portfolio would be a better function. This was the first time for me using isotope.js so it essentially made the project take longer that expected.   

Thanks for Reading!

Lets Work Together!