President University

President University is a 100% English-speaking higher education institution in Indonesia, which was established to become a research and development center in the region and to set a new benchmark in Indonesian higher education

Project description

President University want to revamp the visual and user interface of their website to be more fresh and updated. My contribution to the project is designing the website’s UI and develop Front End website with bootstrap and jQuery frameworks.

Design Concept

I designed the design concept with flat and using more picture to bring up the visual of the university. Then, I combined more picture with darker background in order to make the picture more focus and vibrant.

The color of President University brand identity has a good brand color. Combined the darker blue with red would bring contrast and clarity to the website. I designed the layout using Boostrap Grid, and using the jQuery Carousel to layout the Slider Image.

Typorgraphy

Open Sans

For Heading and Title

Open Sans is a sans-serif typeface designed by Steve Matteson and commissioned by Google. According to Google, it was developed with an “upright stress, open forms and a neutral, yet friendly appearance” and is “optimized for legibility across print, web, and mobile interfaces.”

Roboto

For body text

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

logo and Icons

Using flat line icon in dark background will make a contrast flat look.

First Design

Revise Design

Development Front End

For front end development, I using the Boostrap 3 framework for layout and jQuery for javascript frameworks. You can look my finish front end demo on https://agamfauza.com/demos/presuniv/

© Copyright - Agam Fauza Portfolio