Website and Phone App
Concept Design
Phone Application Concept Design
This project was made for educational projects. I do not own the rights to Disney or Square Enix Characters and Properties.
This is a video displaying a graphic design project I made during a Digital Publishing class in fall of 2022. The assignment was to create a concept design of a companion app for a preexisting product and/or media franchise and I decided to create an encyclopedia app meant to pair with the Kingdom Hearts Series Ultimania Books. The property has a very distinct visual style and set of iconography associated with it, so I spent a significant amount of time researching and gathering the correct fonts and graphical assets that I'd need to make this concept presentation. I also needed to properly utilize the tools in InVision to make the concept function like a properly programmed app by organizing the different pages to transition to eachother in the manner you would expect them to as a real app. I also designed and implemented the basic animations expected from using interactive media that indicates to the user that their actions are resulting in some sort of feedback. This project illustrates my ability to emulate a preexisting graphic design style while adapting it to a new medium that is dependent on user input.
Travel Website Concept Design
This project I consider a predecessor to the phone app project, as most of the knowledge I gathered from creating this Travel Website Concept was expanded on for the phone-app project. The thing that makes this project unique from the Phone App Concept is that most of the interactions are built around the idea of hovering your mouse over an interactable object, rather than being limited to finger taps on a smart phone app. Because of this, this project was less demanding in terms of the number of unique “pages” I needed as you can see on the interaction map, and I was able to get a lot of mileage from reusing the general design I had for the website while only having to change/add the elements that were involved in each specific interaction.
Because most of this project was built around using interactions to expand the amount of content that was visible on a single “page”, most of the work went into designing the landing page that would introduce users to the website. The “hero image” I used to represent the subject of my concept, The City of Prague, would largely define the color palette and aesthetic for the entire website. The fonts I used would also follow this theme, as I largely used tall and skinny fonts from a serif family to represent the “100 spires” or fonts with very defined “0” shapes for reasons I’ll explain next.
The second main motif for the design was the “clocktower” motif. The “explore” section of the concept relied on this motif the heaviest, as one of the featured excursions was about Prague’s famous clock tower. Because of this, circles ended up being used as a shorthand for this specific idea that I used throughout the website’s design.
This is a screenshot of the interaction map for the “demo” version of the clocktower “excursions” section where I tested out how the interactions should work before I implemented it in the main project file.
Business Website Concept Design
This project was done when I was taking a course in Web Development, and me and a team of 5+ students had to create a concept of a website for a real client who was looking for a website for their business. A member of our team knew someone who was looking to have a website designed for their land development business, and I was responsible for handling all of the “graphic design” responsibilities for the project. Due to the group’s collective skill level, I was focused more on the fundamentals of the project and relied on my frame of reference for programming on to how we could realistically make the website function on a basic level. With that in mind, my thumbnail relied a lot more on the fundamentals of graphic design, using different scales of similar shapes to imply “hierarchy” for what content is most important, and breaking up sections of text with different shapes and pictures as necessary.