Catalog / Learning path
Web design
foundations.
A practical path for Jambo trainees learning how visual design, responsive layout, component craft, and landing page strategy connect in real product work.
Perception
Visual foundations
Start with how people group, scan, and compare things on screen. Proximity, similarity, continuity, closure, hierarchy, balance, and negative space decide whether a page feels clear before anyone reads the copy.
Practice: Take one busy section and redraw it with fewer groups, clearer spacing, and one obvious focal point.
Readability
Type and color
Use typography and color as a system, not decoration. Limit typefaces, set a readable scale, give paragraphs enough line height, and check contrast before a palette is considered usable.
Practice: Create a mini style guide with one typeface, six text styles, one primary color, one accent, neutrals, and semantic colors for success, warning, and error.
Structure
Layout and responsiveness
A web page is a set of boxes inside boxes. Columns, gutters, containers, padding, breakpoints, and stack direction determine how a design survives real screen sizes.
Practice: Design the same hero on mobile, tablet, and desktop. Change layout direction, type scale, spacing, and image treatment instead of simply shrinking the desktop screen.
Landing page workflow
Discover the job
Before layout work, define the audience, offer, objections, constraints, and one measurable goal. A landing page for a fintech app, a farm tool, and a hiring campaign should not share the same structure just because they share a template.
Map the page
Sketch the information architecture first: header, hero, social proof, problem-solution, benefits, product proof, testimonials, final CTA, secondary CTA, and footer. Remove sections that do not support the goal.
Build the visual direction
Use references and mood boards to align tone before high-fidelity design. Then turn the chosen direction into a style guide for type, color, spacing, buttons, cards, and imagery.
Move from wireframe to prototype
Low-fidelity wireframes decide structure, mid-fidelity wireframes decide density, and high-fidelity prototypes test the full story. Keep mobile and desktop versions visible together.
Prepare handoff and launch
A handoff should include responsive notes, component states, copy states, assets, interaction notes, analytics events, accessibility checks, speed checks, and launch ownership.