What you will learn
- Sketch low-detail wireframes for key pages at mobile and desktop sizes
- Choose a small, accessible palette of colours and fonts
- Record design decisions as reusable theme values and components
A wireframe is a simple sketch of a page's layout, showing where content goes without colours or final images. Draw the home page and one inner page at mobile width first, then desktop. Paper is fine, or you can use a design tool such as Figma. Focus on order and priority: what visitors see first, and where the main call to action sits.
Once the layout works, choose a small visual system. Pick one or two fonts, a main brand colour, a neutral for text and backgrounds, and one accent for buttons. Check that text colours meet contrast guidelines against their backgrounds. Use a consistent spacing scale, which Tailwind already provides, so gaps between sections and elements feel even throughout the site.
Write these choices down where your code can use them. Add brand colours and fonts to your Tailwind theme, so classes like bg-brand work everywhere. Then list the components your wireframes repeat, such as buttons, cards, section headings and the navigation bar. Building these once as React components keeps the site consistent and makes later changes quick.