Responsive web design
Personable's marketing site
To view the marketing site prototype on its coordinating viewport, please click that device to open. Note that when opening the desktop viewport, it was designed to be viewed on a desktop. Therefore the prototype may be skewed.
Please view this project on a desktop for a full explanation of my process.
Responsive Web Design
In order for Personable to be successful, it has to have users. Creating a marketing website will help showcase its amazing features and start to build trust with the user so they feel more comfortable and confident when downloading and using my application.
UX/UI Designer
1 week
Figma | Google Slides
Personable's Marketing Site
Role
Duration
Tools
Visual inspiration
Getting Started
In Addition to the UI Inspiration board, I expanded on the mood board I created when I started developing brand identity with Personable. I added these images, which helped further inform my line work, color injection, and over all feel of my website.
Because this was my first time intentionally working with responsive design principles, I wanted to gather inspiration on how other digital products were responsively designed. I created a UI Inspiration board that gave me examples of how components would shrink and expand when the viewport was changed. This also helped with my layout and overall design of my website..
low fidelity
Designing
After I gathered UI inspiration and expanded on my mood board, I put pen to paper and started sketching what my website was going to look like. When I was happy with design, I transferred my sketching into low fidelity wireframes. When considering how my website would respond to a smart phone viewport, I took on a stacking method to showcase all the same information
High fidelity
Designing
Using the skills and restraint I learned when bringing my design to high fidelity with Personable, I started injecting color, images, and interactions. I included mockups for my applications so users can get curious about the applications interface. A hero image that embodies the idea of making friends was included to draw users in and promote good feelings. The user always has the opportunity to download the app as they scroll through the page, as the navigation bar is sticky and includes a download CTA.
Prototype
Final Product
To view the marketing prototype on its coordinating viewport, please click that device to open.
My next steps for this website would be to design the "Take the Quiz" page to give users an opportunity to take their personality quiz here, and show them their results when they sign up for the application.