Tag: Intro

  • RE:Creation No. 3: Dorset Cereals

    Dorset Cereals
    An open Dorset Cereals box in a chair.

    In this episode of RE:Creation, we’ll be recreating a cereal box in HTML and CSS. One thing I like about consumer product packaging is that almost everything is written there in that little space. It’s like a website in the palm of your hands at a grocery aisle (or at your breakfast table).

    First, let’s lay down all the steps that we will take in order to make this happen.

    RE:Creation steps
    A diagram showing the steps of RE:Creation.
    1. Planning
      • What is the goal?
      • How to approach this thing?
      • What are the elements involved?
    2. Doing
      • Converting to Text
      • Converting to HTML
      • Converting to CSS
    3. Wrapping up
      • Did we achieve the goal?
      • What did we learn?

    Planning

    In order for us to have a clear scope of this exercise, we need to see the all the elements of the packaging through an expanded view.

    Dorset Cereals - Expanded View
    Dorset Cereals packaging in an expanded view.

    Goal

    The main goal is for us to recreate it using HTML and CSS and learn various concepts of design and coding along the way.

    Approach

    First, look at the information and identify which are important compared to others — that will be the arrangement of contents in HTML. For example, the front of the packaging comes first before the sides and back.

    Next, look at how the panels are laid out — that will be the visual arrangement in CSS. For example, the back of the packaging is at the leftmost — which means, it comes first before the sides and front (for left to right direction).

    Elements

    We’re breaking down the packaging to its individual elements by panel and flap. We have 4 panels and 9 flaps, for a total of 13 segments — this is also how we are scoping each section of the recreation. For example, we will tackle the front panel first, then back panel, and so on.

    Dorset Cereals - Segment Labels
    Dorset Cereals packaging with segment labels.

    Let’s begin converting the front panel to Text.

  • Nutrition Facts Label

    Introduction

    In this second episode of RE:Creation, we’re going to re-create something that we’re all familiar with—the Nutrition Facts Label. This particular design is specific to U.S. Food and Drug Administration—although most nutrition information from other countries appear similar in terms of their tabular design.

    We may ask, isn’t this label a print material (as opposed to digital)? Yes, this label—and others like it—are plastered in every packaging of edible products across the planet. Why would we delve into converting it for web then?

    Nutrition Facts Label
    An example of a Nutrition Facts label.
    (more…)
  • RE:Creation No. 1: Google

    Google Homepage
    A screenshot of Google’s homepage. 7 September 2018

    For the first episode of RE:Creation, we’ll be re-creating the most visited website in the world—Google. It looks like a fairly simple web page—both in content and functionality, so it’s a perfect choice.

    Let’s begin!

  • Introduction to RE:Creation

    What is RE:Creation?

    RE:Creation is a design and coding activity in which we reverse engineer and recreate the HTML & CSS components of a chosen web page.

    RE:Creation is short for Reverse Engineering Creation. It involves both discovery (theoretical) and delivery (technical) processes.

    Objective

    RE:Creation’s objective is to promote the fundamentals in designing digital products such as websites and web apps.

    These fundamentals revolve around design disciplines such as Information Architecture, Interaction Design, User Interface Design, Visual Design & Accessibility, and Frontend Design.

    Requirements

    The requirements to participate in a RE:Creation are simple: first, basic knowledge of HTML & CSS and second, a computer with these software:

    • Text Editor (TextEdit, Notepad)
    • Web Browser (Chrome, Firefox)

    Using these software for RE:Creation does not require internet connection.

    Alternatively, a web app called CodePen could be used online. It functions both as Text Editor and Web Browser for editing and displaying web documents, respectively.

    Dive right in!

    References