A Guide for you all

WAHYU ADT
UKM Heroes
Published in
3 min readOct 10, 2019

Alo !

In this short story, i will tell you about our project’s Design Guidelines. This Design Guidelines will be the reference for our group to work on. But what is Design Guidelines exactly? Design Guidelines is sets of instructions and standardized design style. Although the Design Guidelines can be a bit flexible and open for the creativity of the team, it is suggested to follow the advices and instructions in the Design Guidelines to achieve Design Consistency.

Our Design Guidelines

No more waiting, here’s our guidelines !

Logo

Original Logo

We still keep this logo from the old Website and because we can’t change it anyway. So …. yeah. But the logo has some meaning and it affect our color schemas that will be discussed next.

Color

We are choosing these colors because we found out that the Colors on the UKM Indonesia’s logo has its own meaning when we discussed the color with our Product Owner. She said that we need to follow or if we want to be creative, not to be so far away from the logo’s Yellow and Green color.

The logo consists of Silver-grayish , Emerald green, goldish yellow, and bronze or in some source it will be dark and orange-ish brown instead. The green resemblance prosperity — in dollars, since prosperity in rupiah is red — , the yellow is our identity as University of Indonesia. We choose a calm and a bit soft color because we need to create a fresher look for the website and to not apply the original color. The original colors produces a weird combination when we applied to the mockup.

Typography

We use 4 main fonts, Montserrat, Roboto, Malgun Gothic Regular, and Heebo. Although we will see some Montserrat Alternate in some of our icons.

Iconography

We will implement some icon in things like lacis and other possible placement. We made the icon by ourselves and i created the icons using “Gravit Designer” app that available both online and in Windows Store.

Icon (old)
What we have now

Event and Article Cards

Event Cards

For the article pages, we will have some changes depending on where the article at, mostly on this section

Information

Which must be different for other pages.

And that’s our Design Guidelines. Actually there exists another section, which is Photography and Videography. But our Product Owner hasn’t give us the requested assets like their company profile, original Photos, and videos.

That’s all !

Wahyu Ananda Duli Tokan

--

--