UI design + coding

Quinny C.

This online portfolio was the final project of the UI Design program I took at BrainStation. There, I learned and became enamoured by the process of creating and testing my ideas through drawing sketches, creating wireframes, turning the wireframes into high-fidelity designs, and finally producing a prototype.

This component of my design journey taught me how to make sense of design architecture the importance of a smooth user flow and how to apply my knowledge to using softwares such as Sketch, Adobe XD, InVision, and Zeplin. The culmination of my practice created the website you are viewing now.

I created this wordmark as a way for viewers to know whose work they are looking at as soon as they land on the home page. The simplistic design works as to not distract from the content itself.

UI library

main navigation the hover state of main navigation sub navigation the hover state of sub navigation previous and next buttons

Because screens are often dominated by visuals, I think a design system based on words becomes more effective in catching a viewer’s attention and focus.

Sketches

initial sketches for three column home page initial sketches for four column home page

Wireframes

medium-fidelity wireframes for desktop design

High-fidelity design

high-fidelity design for desktop home page

To view the presentation PDF, click here.Quinny'c online portfolio presentation pdf (Opens a new tab)

To view the prototype on InVision, click here.Quinny's online portfolio on InVision (Opens a new tab)

PREVIOUS

/

NEXT