Client
Cosmic Tee (imaginary t-shirt e-commerce website)
Tools
Adobe PS, AI, liners
Task
Logo Design, T-Shirt Illustrations, Website Layout (UX-UI)
Year
2018
Summary
Cosmic Tee is a t-shirt company based in US. The t-shirts are produced using organic cotton and direct-to garment printing. The main categories (illustrations, images, quotes) have a common theme: space exploration. In the online shop you will find t-shirts for children, women and men, that can be personalized by color and have subjects such as: astronauts, stars, space ships, planets, aliens and monsters.
Brand attributes: imaginative, reliable, eco-friendly.
I created for this project a logo with a mark that reflects the design concept (fresh, dynamic, elegant). The primary colors are sky blue, dark blue and black and the secondary color is yellow. I used the sans-serif typeface Aller for headlines and body-text and the serif Aleo typeface for the web navigation elements.
WEB DESIGN
With the purpose of designing a website that is both enjoyable and functional, I thought about an ideal potential client and how he or she would value readability and consistency. For this task, I created a persona, a site map and a wireframe.
The resulted website is clean and minimal, with a 12 column Bootstrap grid and a few pages that cover a complete shopping experience:
1. Homepage (containing a search bar, clear vertical menu navigation, a full-width header with a call to action button, a 'my account' space and a mini-cart, relevant images for recommendations prioritized over other elements like the newsletter subscription button).
2. Login (simple, responsive, user-friendly).
1. Homepage (containing a search bar, clear vertical menu navigation, a full-width header with a call to action button, a 'my account' space and a mini-cart, relevant images for recommendations prioritized over other elements like the newsletter subscription button).
2. Login (simple, responsive, user-friendly).
3. Listing (with real time filters, sorting, pagination, a 'recently viewed' section and consistent icons to remind the user of the benefits offered: world-wide shipping, secure payment, customer support).
4. Product (breadcrumb, large image, price, main call-to-action, description, specifications: organic cotton, vibrant colors etc)
5. Checkout (containing 3 sections - cart, shipping, billing - with a focus on the purchasing flow: minimal header and footer, a preview of the cart products and the possibility to edit them, not too many fields to fill in, two payment options and an area with icons conveying responsibility: fast delivery, hassle-free returns).
