Schlagwort-Archive: UI Design

Day 03 – CSS and the Layout Ideas

Photo by Burst on Pexels.com

For today, I have been watching and taking notes on one of the videos I have linked on my Homework section of yesterday’s entry: UI/UX Design Tutorial.

This video explained perfectly well how your pages should be connected to each other and design it as a so-called Wireframe. Since this is my first try on creating a website on my own, I will mostly stick to the page layout which has been explained in the video. The Homepage containts:

The Homepage / Landing Page

  • Navigation / Menu aka the „Hero“ Banner
  • A logo
  • Information about this website
  • A Footer
  • A Contact Form (without any real function for now)
  • I will leave out the „Sponsors“ and „Review“ Section, since this goes beyond the initial goal of creating a simple website by using HTML and CSS only.

The Features Page

  • Taking over the Hero Banner
  • Presenting 3 Features about a coffeeshop

The Content Page

  • Which coffee the shop sells
  • The Snacks they sell
  • maybe some „upcoming events“?

I have also started with the CSS – Section of the freecodecamp Course and will continue learning from it for the following days.

In Addition to that, I have been looking at some layouts from different coffeeshop websites I have been visiting lately. Here are some of them:

Homework:

I will restrict myself on creating a „Desktop“ – View.

Tomorrow, I will convert these ideas into a Figma – UI Layout and based off that, start creating the CSS Styling needed for my website. I also need to continue the CSS – Course.