Applications

Member lesson

Website and product interface

Lesson 7 of 12 in Applications.

Turning a Brand Identity Into a Custom Website · Flux Academy
Lesson

A website is the application where brand and function argue hardest, and function has to win the argument more often than designers like. The brand is expressed in typography, colour, space, motion and photography, and almost never in reinventing how a form works.

the systemshopfrontall of itphonethe mark alonea vanreadable at speeda formalmost nonedesign the smallest one first and the rest survive
One system reaching a shopfront, a phone, a van and a form, each needing a different amount of it.
An ink drawing of two people on either side of a divided wooden tray of card buttons, cards and form fields, each assembling a different web page layout on paper from the same parts.
Two people who were not on the original project build new web pages from the same tray of ready-made parts, so every new page still looks related.
Member

The rest of this is for members.

You have read the opening of this lesson. The rest of it comes with a membership.

One membership covers all four courses and Brands.

  • All lessons in the four Learn courses
  • All brand breakdowns in the Brands section
  • All quizzes, flashcards and crosswords
  • An AI teacher on every lesson, for up to 60 questions a day
  • All course material published during the membership

Price

Membership is from $12 a month on the Yearly plan, which is charged at $144 once a year. Lifetime access is $59, paid once.Membership is from ₹200 a month on the Yearly plan, which is charged at ₹2,400 + GST once a year. Lifetime access is ₹3,999 + GST, paid once.

Check what stuck

Members only

You can't take this check yet.

Members answer these 3 questions and keep the ticket for this lesson. Every lesson has one.

  1. Question 1, locked

    Why does a colour token called brand-blue-500 cause trouble that one called surface-raised does not?

    • It is longer to type, so developers shorten it inconsistently across the codebase
    • It names the appearance, so it becomes a lie the day the brand blue changes and the code has to be searched and replaced
    • It cannot be used in dark mode, because numbered scales only hold on light backgrounds
    • It binds the colour to a single component, so nothing else is allowed to reference it
  2. Question 2, locked

    Which of these words means this? “Components and tokens shared between design and code. The real deliverable.”

    • Build and strike
    • Touchpoint inventory
    • Stress test
    • Design system
  3. Question 3, locked

    Which of these words means this? “A named value for a colour, size or space. Changed once, applied everywhere.”

    • Theme file
    • Token
    • Six-sheet
    • Transactional email

Elsewhere in the library

Hear about new courses.

Leave an email and we will tell you when something new lands. We do not write often.