UI Design

Work samples following a modern aesthetic.

The following are webpages I have created as a web developer/software engineer. Before delving into backend coding, I started in the front-end creating static web pages. This article serves as a showcase of my experience with modern web design aesthetics.


1) GoWonder.com

A snapshot of GoWonder as it was created can be found here.
Figure 1: Wonder Splash page. Note the heavy use of flat design, translucent elements, and sans serif font.

Wonder is a fintech start-up looking revolutionize the digital gifting space. With a team of two others, I was given a high-fidelity mockup for the whole splash page, and tasked to recreate the design as a webpage on the live site. I used HTML5 and CSS3, with the help of Bootstrap.

Figure 2: Scolling down, the fixed navigation bar persists along the top of the page. Note the stripe partitioning between the first and second subsections.
Figure 3: Card elements. Note the use of simply illustrated iconography and muted colors. Note, also, the persistence of the fixed navigation bar.

The page was not mandated to be responsive but showcased several modern design conventions. These include flat design utilizing muted colors and sans serif fonts, a fixed navigation bar, stripe partitioning (Figure 2), and card elements (Figure 3).


2) Statfuse.com

A snapshot of Statfuse’s About page can be found here. The page on the live website as it stands now is largely unchanged from the original.
Figure 4: Statfuse About page; the site saw up to 500 new visitors a day. Shown is another fixed navigation bar, simple iconography, and sans serif fonts.

Statfuse aggregates admission data to analyze a user’s application, then calculates their chances of admission to universities. At the time of development, the website — with the About page serving as the initial access point— saw upwards of 500 new users a day. No high-fidelity mockup accompanied this project, only a rough spec of required elements (such as the search box at the top, and footer at the bottom) and copywrite.

Figure 5: Scrolling down, the fixed navigation bar persists again. Notice also the use of striped partitioning, and Bootstrap column elements to respect a Responsive Design mandate, and subtle drop shadows in the iconography.
Figure 6: Calls to action. Bright orange buttons were used against the page’s blues, in addition to changes in subtle typographical changes to create a high contrast that enticed the user to join.

Bootstrap and LESS were used exclusively. Some design conventions observed were Responsive Design elements, flat design (this time with subtle drop shadows), a fixed navigation bar, striped partitioning (Figure 5), sans serif font, and bold colors. Strategic use of contrasting colors were used on the most important calls to action as well (Figure 6).

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.