Menu
About Demo
Table of Contents
This was a power demo a-z. This means in a short time frame I designed the logo, color pallette, imagery and illustration and developed what you see here.
What this is?
This was an exercise to go through production with the objective of increase my pace and effectiveness. To go over the workflows;
  • Logo creation
  • UI design
  • UX design
  • Illustration Creation
  • Imagery Curation and Editing
  • Development
Known areas for improvement
These are the things that didn't make in durning period I lotted for the projects, or features that need some more love.
  • I would like to make scroll to next section
  • I think there is room for some animations to enhance the experience
  • A coffee video on repeat would be a nice enhancement
  • Adding filter to the shop (this feature would be part of integrating with shopify
  • Adding about coffee product page to give the audience more information about the coffee and enhance the experience
Credits
Branding
I use the term branding here softly as this project did not require true branding. For example, community position, market differentiation from a business and social perspective.
Mark/Logo
Concept and designed by Lucas Zapico, there was a Pinterest search and some inspiration from my own person collection of Marks.
Color Palette
Inspiration for Color Palette Color and Fonts
Typography
Google FontsIM Fell Double Pica - Script Type
Design
Photography
Photos found on Unsplash photo credit below;Photo by Nathan Dumlao on UnsplashPhoto by LUM3N on UnsplashPhoto by William Moreland on Unsplash
A bit of photo hacking done with RemoveBackground
UX
UX was mocked in Figma by design.Lucas Zapico. Though the user experience was relatively simple. I recently did a research pass on UX be practice for shopping experience and the main take away and driving force is to make the search and exploration of products navigable. This being said, I know it could be improved, but I am happy with the results from a power pass.
UI
UI was designed in Figma by design.Lucas Zapico
Illustration
Pencil and paper illustration was designed in Figma by design.Lucas Zapico
Development
All development was done by dev.Lucas Zapico
Platform
Gatsbyjs
Icons
React Icons
CSS/SCSS
Tachyons
Animations
React Spring
If you got this far you're a legend! Stay classy from me to you!