UI Design

Take a Leap UI

This is a design to show the elegance of a simple colour pallete.

Also using pseudo elements to compliment certain elements of the design.

View Here

A Photo UI

A simple grid layout using grid and media queries.

This design uses a imagery, text and colour to make an elegant splash page.

View Here

Design UI

I always like to better myself. This is an improvement of an older design. I make use of the new technologies I have learnt for instance this makes use of Pseudo classes.

As I learn and research more I have found myself to look at my own work and improve. I did a similar design once and found myself wanting to improve. This was the result.

View Here

Travel UI

Here is a simple UI using Flexbox and Media Queries.

It is a minimal design that can look good on both desktop and mobile.

View Here

The Lamp UI

This UI is a more broken layout that uses CSS Grid

It takes advantage of overlapping grid areas to allow a more free flowing layout. It was designed with mobile first in mind. This way of designing and developing for mobile screens first is a preferred method. This is because it allows for easier development and better decision making when changing screen sizes.

View Here

Plant UI

This was designed using Figma to create an elegant minimal design.

It shows the importance of a simple design to capture a topic and look aesthetic.

View Here

City Homes UI

Using Figma the goal of this UI is to show the aesthetic of a broken layout.

It also shows the different button styles available.

View Here

Outside UI

This very simple page is here to demonstrate the use of a mobile first design approach.

It doesn't use CSS grid or flexbox. I beleive it's important to not rely on certain technologies but to encourage the use of many to not limit what can be created.

View Here

The Chair UI

This very simple page is here to demonstrate the use of a mobile first design approach.

Using media queries and Grid this simple page uses technologies when it needs to. For instance CSS grid could have been used sooner however it would have been unnecessary and overcomplicated the layout when transitioning to desktop.

View Here

Architecture UI

This is a rethought out design for an Architecture inspired theme I previously did.

This new design is more modern and inviting using better imagery and a keeping to a minimal design to allow for a better aesthetic. The use of pseudo classes also offers a more fun design.

View Here

Charity UI

Using an image as a background it can offer a more inviting welcome.

A landing page should also be simple and elegant as it is the first people see of a businesses online presence.

View Here

Construct UI

This design is aims to really represent a company, using good imagery and having a unique design following down the page.

To develop this I would use pseudo classes and flexbox.

View Here

Coffee UI

This design is aims to intoduce colour in a simple way allowing for a site to not just be black and white but introduce others.

This colour pallete works with the topic and allows for the user to shift their focus to certain places due to colours used.

View Here