Background
This project is a personal website I created for my own business. As part of my web design and development course, I first designed the site in Figma, carefully planning the layout and user experience. I then brought these mockups to life by developing the site, ensuring it accurately reflected my initial designs and provided a professional online presence for my business.
Roles/Responsibilities
UX/UI Designer, UI Developer
Tools Used
Figma, HTML, CSS, JavaScript, Github, Visual Studio Code
Design Solution
I created both mobile and desktop versions of the site in Figma, ensuring a seamless user experience across devices. I then developed the site using HTML, CSS, and JavaScript, translating the designs into fully functional web pages.
Sketches
Sketches below are for the Home page, List of courses table, and Blog page (specifically the lightbox when one blog post was selected).
Mockups
Desktop Mockups
Mobile Mockups
Prototype
Web Development
After creating mockups in Figma for the vision of the site, I was then tasked with coding this site in HTML, CSS, and Javascript for a functional website.
Design & Development Reflections
- Without the right development skills, coding a site based on a design is challenging
- Matching designs is more challenging then it seems
- Having not as much time to code compared to designing meant I had to compromise my design
- I had to compromise a design based on my development knowledge
- Responsiveness is not as easy to implement as it is for designers to come up with
- I prefer design over development but it was a great learning experience to understand development better
Designed
Developed
Next Steps
If I were to continue this project I would definitely take the chance to learn more about how easy my designs are to develop with the right technical skills a developer would have. I would also like to learn more about responsiveness.
jenpatt-designs.com 