Overview
To showcase the HTML/CSS I learned up to this point, I coded a personal blog website documenting my journey and what inspires in me in my passion: art. I want to fully express my creativity not only through the design of the interface but also through story-telling, guiding the user through my time pursuing my degree and giving them an insight into what sparks my creativity.
Problem
How can I document my journey in art and inspire others to do art as well?
Solution
I coded a blog-style website that talks about my education and artworks as well as what has inspires me in art and design.
Timeline
My Roles
1 month
Web Development Graphic Design
Wireframe
Final Product
Wireframing & Logo Design
I first designed some wire frames layouts for the website in Figma. The final version ended up slightly different. I wanted the website to be image-heavy to showcase my work.
I then designed my logo. Because typography was such a big part of my graphic design education, I tried to arrange the titles and logo with a big focus on type. Motifs that I really enjoy like stars and gradient orbs were also added as well.
Coding
I used Dreamweaver to code the website, while making sure to incorporate techniques that I learned in class (drop down menu, clickable thumbnails, GPS embedding,etc) in a way to enhance the storytelling aspect of my blog.
Final Thoughts & Next Step
This project presents a fun challenge for me as it's mainly development-focused. It was through making this website that I was able to plan how I was going to make this portfolio. As a designer, I don't get to see the development side as often, so completing this project gives me an insight into the time and effort it takes to takes to turn a design into code. It allows me to sympathize with developers more as well. As this is made for desktop, I think the next step to improve this project is to code it for multiple break points, making it viewable on tablets and phones.