Who: Sierra café is a new Colombian brand that exports special coffee.
What: Responsive bootstrap process. The brief was to make a fictional or real mini website with 5 pages in at least 3 breakpoints. With a series of component rules required in class.
How: The proposal and the sketch up process was made in Figma with wireframing of low and high fidelity. Then the visual was made with Canva, illustrator and photoshop. Then the coding phase was made with Visual Studio Code : HTML, CSS and bootstrap.
When: It was made for Universitat Barcelona Master of digital content design 2023-02.
Grid used for phone : 6X8 pt
Homepage
The homepage consists of a navigation bar followed by a main heading (H1) and a centered introductory paragraph. Next, a native video serves as a visual moodboard, followed by a two-column section describing the company's vision and linking to an external video. Below, products are displayed in card format, and the homepage values, Jumbotron, and footer are repeated.
Products Page
This page showcases products organized by farm, with a prominent hero image and description. A two-column section highlights technical features of the product. Further down, products are displayed as cards with an image, title, price, and buy button.
Blog Page
The blog page presents dense blog content, beginning with a navigation bar, breadcrumb, and article title. The main content of the article is displayed with random images alongside a sidebar featuring categories and recent posts. The homepage values, Jumbotron, and footer are repeated here, with a color change in the Jumbotron.
Contact Page
The contact page facilitates user inquiries with a two-column section: one side provides descriptive contact information for Sierra Café, while the other features a short and concise contact form. The page ends with a footer that includes the logo and property rights.
Each page is designed with a clear focus on usability and user experience, using an organized structure and suitable visual elements for each purpose.
Deskopt grid : 12 x 48 pt
Low fidelity prototypes :
High wireframes prototypes: watch in more detail: https://www.figma.com/design/qXW11V14ZZNUowWkUOuKTX/Untitled?node-id=134-839&t=nCDd9VY7o6pnXX0S-1
Language used : HTML 5, CSS, BOOTSTRAP, TXT Codes:
See hole project and report here: Link
Credits :
Client: Sierra Cafe.co
School: Universitat de Barcelona
Designer and developer: Angela Maria Zuluaga
2023
