Sagar Sutar

While redesigning my portfolio, I have learned importance of design process for Web/UI design. So I thought to share my experience.

I started my design career with web design. Initially I used to code website/UI directly in sublime text without thinking much about experience and content of website. I used to decide content at the time of writing a code, that always forced me to shift focus between design, content and coding.

After working on few interactive projects in last 6-8 months at National Institute of Design, Ahmadabad as a student ( I am not saying here that NID help us to learn web design ), I have learned been learning to do a lot of research and analysis before designing any product. I tried to apply my learning to Web/UI design.

RESEARCH

While redesigning, instead of directly diving into the sea of HTML tags, I planned whole process of designing. I thought about what I want to highlight in my portfolio, what is the purpose my portfolio. Answers for those questions helped me to decide content -

I thought about menus – including number of menus, text of menu, position of menu bar. I tried to keep menu bar minimal.

I thought about content – I decided to put videos, photographs and text related to my projects because my primary focus was on projects and its content. I filled dozens of pages with hand-written content and finalized quality content. I wanted to keep all my projects open source, hence I have written about it from concept generation to implementation making this portfolio filled with text, photographs and videos. I tried to find out my own qualities and skills which I need to highlight while deciding contents for about page. I tried to get these content verified.

I thought about fonts – It has been well said that web designing is 95% about typography. I tried out different fonts starting from Open Sans, Source Sans pro, Merriweather etc. I ended up with Open Sans as it reads good on devices with all screen sizes.

I thought about colors – As my focus is content especially my projects, I used only dual color theme, with more weight to neutral colors - black and white, This helped to design clean and minimal design. Other color that I chose was #C1272D, which has enough red color mixed in it. I felt this color is enough warm and refreshing. I played with different color before finalizing the color palette.

I thought about interactions – I thought about animations and feedbacks that need to be shown when menu, links, buttons, images or videos are clicked. I used ripple animations as seen in Google's material design.

I redesigned my personal logo – First version of my website carried only initials of my name as a logo/favicon. I redesigned my logo completely. Initially I doodled few ideas by focusing on my personality attributes but later I found it is good to focus on my skills, so I tried to doodle ideas which can represent my art and technology skills. I doodled few alternatives and finalized one, which represents my development skills and my focus on art and technology domain, with two angular brackets connected with each other and forming a S – alphabet – my name initial.

Inspirations and trying out different alternatives helped me throughout this process of design.

VISUAL DESIGN

I started with visual design in parallel with my research just to get feedbacks for my research. Initially, I designed visuals with dummy text and finalized my content in parallel. I designed three different visual designs for my portfolio with each better than the previous one.

IMPLEMENTATION

I implemented entire website with cutting edge technologies like nodejs and ghost as blogging platform. I used waves.js for animating interactions as seen in Google's material design. less.js – CSS preprocessor, jade – HTML template engine. gruntjs – JavaScript task runner to easily build and deploy project (here is my gruntfile) and Yeoman the scaffolding tool with H5BP mobile boilerplate generator. All fonts are served by typekit. I tested my project at regular intervals with browserstack.

CONCLUSION

This research helped me to set my focus on different phases of my portfolio – design, content and implementation, one at a time.

Finally, I could say that I have found a UI design process which suits to me. This process is not perfect, but it is good to start with and it will definitely evolve over the time.

So there is a lot of research and analysis behind the web/UI design than just coding :)