Skin RX is a face and body wellness clinic that aims to provide the best quality care and service at an affordable price. For our final project, we were grouped to create a responsive website for a real-time client. Aside from designing and developing the website, I also designed the banner ads and redesigned the logo.
Logo & Branding
Sept 2018 – Dec 2018
Kenneth Sta. Cruz
ABOUT THE PROJECT
MINTER3 (Interactive Applications for Online Media 1) lays the foundation for developing websites using industry standards for development and ease of editing content. For our final project, we were grouped to create a responsive website for a real-time client using HTML and CSS. Our group leader, Kaitlyn, chose ‘Skin RX’ since it is their family business. Each member of the group made their own version of the website but we used the same colour, branding, and typography.
- To inform the user of the different services and products the business offers.
- To establish the business branding clearly and efficiently.
- To maximize the website’s capabilities towards increasing business productivity.
For my interpretation, I used different shades of pink to achieve a clean and relaxing look. I also designed all the banner ads found on the website. By combining the images I found on the Internet, I was able to create these product banners. For the promo banners, I designed them by reading their respective descriptions.
I redesigned SkinRX’s Logo. I omitted the swirly line and ‘Face and Body Wellness’ quote and only used ‘Skin RX’ for the final design. The typography I used is ‘Playlist Script’ and the colour I used is a darker red (#9a322d). For the favicon, I only used ‘RX’.
Here are some wireframes ideas for what my Home page layout might look like. We were required by the professor to submit three versions of wireframes for our website.
These are the final wireframes I submitted to the professor which were designed on Adobe Illustrator. However, upon finishing, I realized I was missing some content. I forgot to create a Promos page and also forgot to create individual subpages for the Services page. Since I was already on a time crunch, I went ahead and developed the website from scratch. If you visit the live website, it drastically looks different from the final version. That is because I mixed and matched some parts found in all wireframe versions.
I also did a major revision on the Services subpages after the project since my first version of these subpages actually looks different from the main 6 pages of my website.
SERVICES SUBPAGES REVAMP CONCEPT
Be consistent with your branding: I was aiming for a full-page popup look like the one from ‘Aesthetic Science’ but I encountered problems with the code that I ended up creating separate pages for the different types of services and having a different style in those subpages.