Case study on UI/UX design

I like to start sketching my designs with good old paper and pen. I think not looking at a screen is essential sometimes. Even when taking notes I’d rather handwrite and then hit the computer with a final copy, which is the work that I am showcasing here.

Embroidery Institute Laptop Mockup
Embroidery Institute Website Design Mockup

For optimal user experience, the different user interfaces should adapt their layouts for the following breakpoint widths: 480px, 600px, 840px, 960px, 1280px and 1440px.

Desktop Wireframe
Desktop Wireframe
Wireframe and Design for Handsets devices: Max/Min resolution 480px - 600px.
Wireframe for Handsets devices: Max/Min resolution 480px – 600px
Wireframe and Design for Tablets devices: Max/Min resolution 840px - 960px.
Design Mockup for Tablets devices: Max/Min resolution 840px – 960px

To build this website I used as a reference the Google´s Material Design which is not only a source on how to use color, fonts or even large images; it is a rich set of design styles and principles.
I highly recommend using Google’s Material Design to anyone who wants to learn more about UI/UX design.

Visit Project