Back to Top

User Interface Design

User interface (UI) of websites for all screens and style guides as a basis for a design system which incorporates the branding's look and feel.

The look and feel of a website can be as simple as providing color and fonts from branding, but it’s so much more. Is the spacing wide or narrow? Are the headings bold or light? Are there blocks, lines, curves or other key graphics involved? Translating branding from a few key elements into structure of a website is an interesting exercise that can provide the client with many options. I tend to create several and then reduce them down to 2 or 3. Pairing opposites help to gauge the clients reaction to one style or another. Finding the balanced middle ground is the rewarding goal.

Project Examples

SCAG 2016-2040 RTP/SCS

The UI elements for this website needed to be responsive, so mockups of complex content were created for various screen sizes. The Focus Areas had a lot of interactivity and colors to incorporate into the designs.
No items found.

Port of Seattle

Working with existing brand, I created 3 design concepts, which were fleshed out into two UI options and then a final UI style guide that is still used today. Key UI elements were call-out boxes and tables.
No items found.

511.org SF Bay

A lot of the UI elements were focused on lists and detail pages, but I also had to design and build HTML for several microsites that needed logins such as the Commuter Benefits Program and the 511 RideMatch system.
No items found.

The Toll Roads of Orange County

The various UI elements created included lists, grids, calendars and accordions to name a few. All of it needed to be responsive as this was the first mobile-friendly website for the Toll Roads.
No items found.

Larry for Mayor

Tweaking and modifying a WordPress theme to create a strong and yet welcoming design with space, standard and delight.
No items found.

MTC Web Accessibility

For visual designs on websites, color contrast and text alternatives are the topmost issues.
No items found.

Insight Terra

The variety of UI was modified from a webflow theme as well as creating a unique dropdown and footer, but making sure there are consistent components that are reused like the page headers.
No items found.