Bagus Andryan Website Relaunch

A little bit more professional yet still personal

Client

Myself

Role

Developer

Developed in

Augsburg

Year

2018

Platform

Responsive Website

Last year I decided to put my portfolio online on this domain. Due to time constraint I used online HTML template that I modified. This year I am confident enough to use my own skill to design and program my online portfolio. The result is what you see right now

Design is not always about creating something unique

New but unique

What I learned from top website redesign

YouTube, Instagram and Facebook have redesigned their website many times. One thing that you probably noticed is how they stay true to themselves. Their redesign interface is new but not necessarily unique. YouTube for example has kept their highlight color as red throughout their redesign history and got rid of needless colors such as blue for the text link. 

For the redesign of my website I picked the best from my old website: the color scheme. I just love how amaranth, white and black mix really well together creating a bright and clean interface.

 
BagusAndryan.com features new logo variation and font

Finding the right font

In the old version of the website 

I, to be honest, had difficulty finding the right font. In the design stage I was planing to use Raleway from Google Font as the main font of the website. After several prototyping I don’t like the way the letter ‘W’ looks like so I was once again in a journey to find the right font.

At the end I chose Muli, which also can be found on Google Font library, as the main font of the website. It is simply beautiful and its 900 weight also looks huge and amazing. 

Typography still plays an important role

Two mockups, soon thousands projects

Keep it simple yet interesting

Two types of page for many possibilities

Since the old website is very static, I wanted the new one to be dynamic. BagusAndryan.com now has a project page for projects instead of listing them on the front page with no to little information.

This page can be modified with its own look and feel. That’s why at the top you can see that the Bagus Andryan logo can have multiple color. In the color distribution section you can also find that white and black are equal this is because project page can either has black or white color.

The background and logo color can be chosen by looking at the color scheme of the main product of the project. For example Microsoft HoloLens features dark body, the project page for it thus has black background.

Axure is in my opinion the number one prototyping tool currently available in the market

Ultra prototyping tool

I’ve been using Axure since I worked at Fraunhofer IPA. Back then I didn’t know its truly potential until I worked at Kommdirekt GmbH as UI/UX Developer. In one project I created a full-working prototype of a website using the tool which mimics almost all function of the end product: working input fields, input field validations, sticky and mini header, responsiveness and more. 

For this project I made a simple prototype which showcases the header behavior: It will have a semi-transparent background once you scroll down and it sticks like the usual header you see in most of website nowadays. 

Axure is such a powerful you almost think the prototype is a working product

My project is online at AxShare. Check it out!

From moodboard to working prototype

The outcome of the design stage consists of mood board, mockups, a UI kit and a working prototype. In the mood board you will see the websites that inspires my design decision. In the mockups you fill see the blue print of my website. The UI kit will show you the font and color that I use. 

I usually don’t design an interface using Axure since it’s a prototyping tool. But I just wanted to try once for this project and it’s not that bad. I expected worse. The interface I created is the foundation of the prototype. If you access the prototype don’t forget to zoom out your browser since I put the prototype in a frame. 

The Axure project is now online and can be found at AxShare.