Restaurant UI Kit

Concept

For a college project, I chose to design a UI kit for a local restaurant. I had the option to either use and customize an existing downloadable kit, or to create my own from scratch.

Details

After researching what a typical UI kit would contain, and seeing what existed for downloadable UI kits, I felt it would be beneficial for draw the elements myself, rather than spending time learning and customizing a kit found online.

The general theme I wanted to use was blocky and chunky, based on the idea of a big, dense bun. I chose lots of hard rectangles even in places where you’d usually round off the corners (e.g. form elements). Using all caps in some places (where readability wouldn’t suffer) also contributed to that feel.

Using Montserrat as the main header typeface continues the chunky and geometric look, in addition to adding a bit of an early-20th century, art-deco feel, something I wanted to maintain from the existing brand. Univers for body I feel provides just enough contrast and is a little lighter and easier to read.

UI Kit - portfolio_Tabs and Bars

I chose red as a starting point for my main colour again to stick with the existing brand. For the main shade of red I added a bit of yellow to make it a quieter shade that could be used throughout the UI without being too strong. Two additional shades allow for various UI states, and I chose a complementary tertiary colour for specific cases. The background colour mixes in a little yellow again to reduce the intensity of a pure white, and lets me use white to pop out elements when needed.

UI Kit - portfolio_Inputs

When it came to elements in need of some depth (drop-downs for example), I found drop shadows didn’t work with the rest of the UI, so instead I used a hard shadow that looks more like a stroke around 2 sides. I used the same technique but with the primary red colour to pop out elements that didn’t need depth.

I deviated from the boxy theme for the breadcrumbs and pagination, because I feel showing the direction is important but didn’t want to add additional glyphs (such as arrows) to do so.

For anything that is pressable, such as buttons, I chose to use a two-toned colour to give them a subtle depth and a more familiar button-like appearance.UI Kit - portfolio_Images and Videos

Outcome

I’m quite satisfied with the result, it works well for the existing brand but could also easily be adapted to work almost anywhere. I went a little beyond the scope of the project so that I could define some additional elements that I foresaw a need for (menu items, videos, maps), in anticipation of using these in a future project.