De·sign Guide·line
/dəˈzīn ˈɡīdˌlīn/
Oh no, not again! I’m sucked into this college student’s blog!
Must be what you’re thinking, and I apologize for it. But we’ve gotta make compromises one way or another, yeah? So let’s get on to our next topic: Design Guideline!
What Is Design Guideline?
Must be what you’re thinking. Or not. Chances are you know more about this stuff way more than me (cut me some slack please, I’m still a student). But I’m gonna save you some quick google search, and just explain it right away.
Design Guidelines are sets of recommendations and suggestions on good design practice. It’s usually used as instructions for the team to follow during a project, basing the design of their project and entire aesthetics (logo, font, color, etc) on the design guidelines. While the team can go about their creative ways and follow their artistic hearts, the design guideline is supposed to provide helpful advice and suggestions on how they could implement their functions.
The design guideline should follow a specific principle on how the design should be executed (ex: easy to understood interface, smooth navigation, etc). The principle can be varied, it depends on the project, it can be intuitiveness, learnability, efficiency, consistency, etc. Although throughout the project, this guideline might be followed a little or not even followed at all, it should still exist as the staple of the front-end design.
Creating assets and styles for specific websites aren’t easy tasks. You can’t just draw carelessly and call it the style for the whole project. Or take some random icons on google image search and use it for all the icons inside the project. You need to discuss it with your whole team (or just team of designers if the others are busy), and compromise. Mainly, the color scheme should follow the logo for the project, while the overall style should follow a specific theme (rounder objects are used to represent openness and simplicity, while sharper objects are used to represent professionalism and innovation).
Design Guidelines In UKM Indonesia
Alright, you must be wondering, what design guidelines we’ve implemented for UKM Indonesia. Well here’s a bit of spoiler for our design guidelines. (No snarky remark/weird banters here, I’m just really tired it’s 2 AM for God’s sake, I wanna finish as fast as I can).
Color Scheme
(Ignore the title shown on the color scheme image please). This color palette was actually decided after hours of discussion between two hipsters and the devil-like hustler. We kept changing color schemes at the start because we had some kind of design to follow. Specifically, the logo of UKM Indonesia.
Yeah, this shade of silver, emerald, gold, and bronze is not easy on the eyes. So we kept trying to change the color shade so it doesn’t stray too far from our original inspiration: this logo. In the end, we contacted our lovely PO and she told us it was fine as long as we had Prosperity Green and UI Yellow as our main colors (Sorry, UI Yellow is easiest to describe this shade of yellow). So, we finally found our colors. #FFD942 provides a special kind of yellow that doesn’t hurt our eyes, #FF8C19 gives off the kind of orange that is refreshing yet easy on the eyes, #3A9870 looks like the color of wealth and symbol of Live Long And Prosper, and the other colors complement each other.
Header
For the header, the main key is Simplicity.
We didn’t use very complicated colors as the header would be the number one thing everyone sees as it stays on every page. Therefore, we decided simple and clean #FFFFFF is the perfect shade of white, while pure and dark #000000 is the perfect shade of black. Of course, we kept the logo in the header. No reason not to.
Font Style
Here are the font styling we used. Being wide and bold, Montserrat is used mostly as titles. While Roboto is used mainly for normal texts on articles and such. Malgun Gothic is used on sub-titles (article card titles, etc). Heebo is used on the lacis (I’ve explained what they are last week). And that’s about it. We might add more or we might even delete some, but for now, we are content with this.
Icons
All of the icons are handmade by us hipsters (mostly by Wahyu, I helped only a bit like the calendar). Of course, we took inspirations from actual designs, like those found on flaticon. We used green for the logo because it complements the other colors very well, especially on the website.
Footer
I added the Header, it’s not nice to not add Footer too. Well that’s about it, it’s brought to you by FEB UI and LPEM FEB UI. Has links to social medias, and some important links like contact us, about, etc.
Afterwords
And we are at the end of this topic. Don’t forget to hit the appraise button and hit follow if you haven’t already to see what else this college student is going to screw up next!
Well it’s great to see how much we need design guidelines for our projects, and why it’s very good to have one. It might be a drag to create, but it will all payout at the end.
With this, I am at the end of my line. I hope that all of you will see a greater tomorrow and get knaledge from here. Sorry, the fatigue and exhaustion’s talking. I’ve gotta lay down. So, see you next week for our next topic!
さようなら~
Sayōnara~
