Case Study

Intro

The project is a portfolio for myself so I can gain employment in the field of graphic design.

Initial Design Idea


Have a single page website where there is a carousel of all my works. When clicking a photo, the bottom left corner will update with brief information about the project and a link to the project page itself. The bottom right corner is a state bio with links to my social media and a little blurb about me and a photo.

Site Inspiration

Feedback

The single page carousel portfolio might be too confusing of a layout for people to understand. They might know where to look for more information.

Post Feedback Idea

Feedback on the initial idea advised that it wouldn’t be intuitive for people who aren’t familiar with websites. It was advised that it would be more clear if the carousel could be used as a preview for the portfolio, and there should be a separate project grid in the event that the viewer wants to see more of my work.

Process

The Design Process first started with coding because it made sense to me that the foundation of the site and the user interface be functional, then afterwards I would apply the styling within the constraints of the site. After the functionality of the website has been completed, that's where choosing which of my previous works can be put on the portfolio and begin resizing the images. This part also involves figuring out the layout depending on the project; so for anything that involves layout design, adjust the project page to have more vertical images and horizontal for mock ups and works that are specifically only horizontal.

Carousel JavaScript to Display Info onclick

<script> function updateWorkDescription(title, description, url) { document.getElementById('sectionToUpdate').innerHTML = '<h2>' + title + '</h2>' + '<p>' + description + '</p>' + '<a href="' + url + '">View Project</a>'; } </script>

Assets

Color Palette

Fonts

Logo Variations

Results

The website turned out okay. I think I should have stuck out with my initial idea and tried to stick with it and make it work because now when I look at my website, I feel like it’s too plain and simple, but in a way I don’t like. The website I took inspiration from was both simple but still engaging to interact with.

Key Takeaways

Mobile first design actually makes everything easy when you start applying it to desktop, compared to the other way around. Maybe I should stick to an idea I really like instead and seeing how I can adapt it to be more accessible for everyday users as opposed to redesigning the entire page for make it accessible.

Conclusion

Overall, I’m more impressed that I was able to make a sort of interesting and functional portfolio site. I would never do this again. Web design makes me cry.