UI / UX Design Practice Landing Page

Project Summary

UI / UX Design Practice is a fully responsive landing page developed using HTML5, CSS3, JavaScript, jQuery and Bootstrap 4.1. This was my first bootstrap project developed for a school assignment for my Web Design and Interaction course. With the idea of creating a modern and user friendly design using bootstrap frameworks as it is a very common tool used in web design today. The motive of this project was to demonstrate working knowledge and application of advanced layout methods utilizing one of the frameworks learned in class (Bootstrap or Pure).

Project Details

Role

Designer/Developer

languages

HTML5, CSS3, Bootstrap, JavaScript, jQuery

goal

Create a fully responsive modern landing page

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 the UI / UX Designer’s Landing Page.

Sketches

I then gathered up my ideas and started creating sketches, laying out the information architecture to show where each UI elements should be placed for user friendly experience.

Wireframes

Finally, before developing the landing page I used Adobe XD to create low fidelity wireframes to confirm the design model of the project for both desktop and mobile. 

Special Features

  • SVG animated logo created with Adobe Illustrator, Code Pen and Visual Studio Code.
  • To make the website more dynamic I used animations from animate.css library to animate images
  • popper.js for positioning HTML elements
  • Font Awesome icons for high quality styling
  • Bootstrap grid system for responsive design
  • Creating fully responsive website design across multiple devices by applying Media Queries

Final Product

Target Audience

Business professionals, UI / UX Designers looking to communicate their brand and gain credibility.  

Design Choices

With user friendliness being the main objective in this project I decided to use a complementary color scheme with Aqua blue & turquoise being the most dominant colours as I really wanted to make the user feel peaceful, and also make it fun to scroll through the website.  

Design Philosophy

The goal of the UI / UX design practice landing page was to use the skills I learned in my Web Design & Interaction course to build a fully responsive single page that follows best practices taking into account concepts such as mobile limitations, site optimization and SEO. I decided to use HTML5, CSS3, Bootstrap grid system and some JavaScript and jQuery.     

Challenges

One of the biggest challenges I faced in this project was using jQuery to create the effect on the social media icons fading in from the left and right. Also, it was very challenging to get the animations to initiate at certain points when the user scrolls down the page.   

Thanks for Reading!

Lets Work Together!