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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
