What you see: frontend, UI and UX, explained with switches
The frontend is everything you see and touch on a website. It's built from HTML (what's on the page), CSS (how it looks) and JavaScript (how it reacts). UI is the look and the controls; UX is how easy it is to get things done. Flip the switches on the toy page below to see each part's job, then compare two sign-up forms to see UX in action.
Flip the switches on a toy web page
Switches
Fresh bread, baked at 6am
Order by 10am, collect after lunch.
Sourdough loaf
£4.00
Cinnamon bun
£2.50
Lemon cake
£3.00
This whole page is frontend. Flip the switches one at a time to see what each building block does.
Two sign-up forms: which one loses people?
Form A
Form A asks for nine things: First name, Last name, Email, Confirm email, Phone, Date of birth, Company, Fax number, Password, with no password hints and a small button labelled Submit.
Form B
Form B asks for an email and a password, shows the password rules as you type, and has a large Create account button.
Both forms do the same job and use similar colours. Make a guess, then send the visitors in.
The 8 words in this module
Each one has its own page with a demo and three quick questions. Work through them in order.
What is the frontend?
The frontend is everything you see and interact with on a website or app: the text, buttons, pictures and layout on your screen.
What is UI (user interface)?
UI is the look and controls of an app: the buttons, menus, text boxes, icons and colours you see and tap.
What is UX (user experience)?
UX is how easy and pleasant something is to use: whether people can do what they came to do without getting stuck or annoyed.
What is HTML?
HTML is the code that says what's on a web page: this is a heading, this is a paragraph, this is a button, this is a picture.
What is CSS?
CSS is the code that controls how a web page looks: colours, fonts, spacing and layout.
What is JavaScript?
JavaScript is the code that makes a web page react: opening menus, updating a basket or checking a form as you type.
What is responsive design?
Responsive design means a page rearranges itself to fit any screen, from a wide computer monitor to a small phone.
What is a component in web design?
A component is a reusable building block of a page, like a product card or a button, built once and used in many places.
Label parts of a screen as a UI element, a layout problem or a UX problem, then match each job to HTML, CSS or JavaScript.
Module check: name what you see
Question 1 of 2