divijm / binnyk.github.io

Binny Kim Portfolio

binnyk.github.io

Overview

• Project brief
• Design guidelines
• Technology stack
• User stories
  • Owner / Developer
  • Potential employer
• Design process
  • Planning
  • Inspiration
  • Low fidelity
  • High fidelity
• Style guide
  • Colour
  • Typography

Project brief

• Design, build and deploy a personal website.
• Website will serve as a portfolio of projects for potential employers to see.

Design guidelines

Rather than designing/coding as I ago, I wanted to follow a set of principles that would guide every aspect of the portfolio site. These principles/guidelines are:

• Mobile first
• Projects centered
• Minimal/clean design

Technology stack

• Ruby on rails
• Sass
• Bootstrap

User stories

Owner/Developer

1. As a developer, I can showcase my projects so that potential employers can see my work.

Potential employer

1. As an employer, I can see a list of projects so that I can get a sense of the developer's work/projects.
2. As an employer, I am able to see the source code for each individual project so that I can see the design process and evaluate the code.
3. As an employer, I can view information about the developer so that I can get a sense of the person and cultural fit.
4. As an employer, I am able to get in contact with the developer.

Design process

Planning

Trello planning

Inspiration

Justin Forcier

A clean flat design portfolio website that focuses on projects in the form of cards.

Amy Simmons

Another flat design style portfolio website with a clear project structure.

Low fidelity

Project section wireframes

About section wireframes

High fidelity

Project section mockups

About section mockups

Style guide

Colour

• main highlight #F59F40
• header colour #3C3F4F
• sub header colours #ACB0C1
• paragraphs #9CA0B4

Typography

• Primary font: Avenir Next
• Secondary font: Lato