Design
Design at LlamaMakers is much bigger than websites. This page covers every field we work in: brand identity, UI/UX, print, packaging, editorial, social, signage and wraps, plus the principles and taste rules that apply to all of them.
The principles behind everything
| Principle | What it means | Fast test |
|---|---|---|
| Hierarchy | The eye should know where to go first, second, third. Size, weight, color and position create that order on purpose. | Squint. Does the most important thing still win? |
| Contrast | Elements that differ should differ clearly: big vs small, dark vs light, loud vs quiet. Timid contrast reads as a mistake. | If two things are almost the same size, make them the same or very different. |
| Whitespace | Empty space is a design material, not waste. It groups related things and gives importance room to breathe. | Can you remove elements instead of shrinking them? |
| Typography | Two families max per piece, sized on a scale, with real hierarchy. Type IS the design in most professional work. | Would the piece still look good with no images? |
| Color with intent | A palette is chosen once (usually 1 dominant + 1 accent + neutrals) and applied consistently. Accent color is spent, not sprayed. | Could you name the role of each color? |
| Alignment & grid | Everything sits on a grid; nothing floats arbitrarily. Grids are why professional work feels calm. | Turn on guides. Do edges line up? |
No emojis, ever. No template sameness or AI tells (identical rounded-card grids, icon-in-tinted-square headers, brochure copy). Real fonts chosen per project, never defaults. Images never repeat within a deliverable set. Steal structure from great real-world work (Design Library, Refero), never pixels. If it looks like everyone else's, it is not done.
The fields at a glance
| Field | Typical deliverables | Primary tools | Color space |
|---|---|---|---|
| Brand identity | Logo suite, palette, type system, brand guidelines | Illustrator, Figma | Both (define both) |
| UI / UX | Websites, apps, dashboards, prototypes | Figma, code (our sites are designed in code) | RGB |
| Editorial / print | Brochures, flyers, booklets, letterheads, business cards, menus | InDesign (or scripted PDF), Illustrator | CMYK |
| Packaging | Boxes, labels, pouches, dielines | Illustrator + supplier dielines | CMYK (+ spot colors) |
| Wraps & signage | Vehicle wraps, storefront signs, banners, trade-show walls | Illustrator at scale, vendor templates | CMYK, vector-first |
| Social & ads | Post/carousel/story templates, ad creatives, thumbnails | Express/Photoshop, motion tools | RGB |
| Presentations | Pitch decks, report templates (our letterhead system) | PPTX pipeline, HTML-to-PDF | RGB |
One habit that spans all of them: check the color space and final output size BEFORE designing. Print work at RGB screen resolution is unfixable later.
Brand identity & logo design
Branding is the foundation every other field consumes. A brand identity is a decision system, not just a mark.
- Logo suite: primary mark, simplified/secondary mark, icon-only version, and light/dark variants. Always delivered as vectors (SVG/AI) plus PNG exports. A logo that only exists as one PNG is a liability.
- Logo qualities to test: works at 16px (favicon) and on a billboard; recognizable in one color; doesn't depend on a gradient or effect to read; distinct within the client's industry.
- Palette: 1 dominant, 1–2 accents, neutrals, plus semantic colors if the brand has UI. Provide HEX (screen), CMYK (print), and usage notes ("accent for CTAs only").
- Type system: display face + text face, with the pairing rationale and where each is used. License-checked for the client's use.
- Guidelines document: the rules others must follow: clear space, minimum sizes, do/don't examples, voice notes. Our own brand manual is the reference for what this looks like.
The LlamaMakers identity itself: neon llama mark (dark-background native), the six-vibe system, the character suite, and the no-emoji/witty-voice rules. When a client asks "what do I get in branding?", show our own kit: logo suite, palette, fonts, characters, guidelines.
UI / UX design
- UX is the argument, UI is the finish. UX decides what's on the page, in what order, and what the user should do next (research, sitemaps, wireframes, user flows). UI makes that argument beautiful in the brand's vibe.
- Our specialty: conversion-led small-business sites in the six vibes; we design in code rather than pixel mockups for speed, using the Starter Kit + Design Library patterns.
- Wireframe → visual → motion: structure first (boxes and hierarchy, no styling), then the vibe's type/color/imagery, then choreographed motion with one signature moment.
- States are design: hover, focus, error, empty, loading, success. A form without a designed error state is half-designed.
- UX heuristics we enforce: one primary CTA per screen; labels over placeholder-only inputs; touch targets 44px+; nothing important hidden behind hover on mobile; the back button always works.
Editorial & print (flyers, brochures, booklets, stationery)
- Flyers: one message, one CTA, readable at arm's length. Headline does 80% of the work. A5/A4 or US Letter/Half; 3mm (0.125in) bleed; text inside the safe margin.
- Brochures: tri-fold or bi-fold; design panel by panel in reading order (cover → inside flow → back with contact/CTA). Panel widths differ on a tri-fold; use the printer's template.
- Booklets / reports: multi-page editorial: consistent grid, running headers/footers, page numbers, real typographic hierarchy. Our letterhead and client handover docs follow this system.
- Business cards & stationery: the identity at its smallest: name, one title, one phone, one email, site. Resist cramming; whitespace is the luxury signal.
- Print non-negotiables: CMYK color, 300 DPI images, bleed + crop marks, fonts outlined or embedded, and a printed-at-size proof (or PDF/X) before any run. Screen-bright neons shift in CMYK; warn clients whose brand is neon (ours is; we know).
Packaging
- Start from the dieline: the flat cutting/folding template from the packaging supplier. Never design packaging without the real dieline; every panel, flap, and glue area is dictated by it.
- Design in 3D thinking: the front panel sells on the shelf, the back informs, the top/sides orient. Mock it up folded (or photograph a plotter sample) before approval.
- Materials change color: kraft board mutes colors, gloss lamination deepens them, white-ink-on-clear behaves differently again. Ask the supplier for material proofs.
- Regulatory content: weights, ingredients, barcodes, recycling marks have legal placement/size rules per product category; the client must supply and approve these.
- Labels & pouches: same discipline, smaller canvas: strong shelf-visible hierarchy (brand, variant, size), print method awareness (digital vs flexo affects fine detail).
Vehicle wraps & signage
- Wraps are moving billboards read in 3 seconds. Business name, one service line, one phone/URL, big. If a driver can't absorb it at a red light, it failed.
- Design on the vehicle template: real make/model outlines with doors, handles, windows, and curves marked. Critical text never crosses panel gaps, handles, or deep curves.
- Vector-first at scale: logos and text as vectors; photographic areas need very high resolution (designed at scale, printed around 72–150 DPI at full size is normal for large format).
- Window areas: perforated film keeps windows see-through; design accordingly (no fine detail on perf).
- Signage & banners: same rules bigger: viewing distance drives type size (roughly 1 inch of letter height per 10 feet of distance), high contrast, and the shop's material/finishing specs before design starts.
Social & ad creative
- Design as a system, not one-offs: reusable post/carousel/story templates in the brand's identity so the feed looks owned. Deep violet-black + neon pops is our house style.
- Platform sizes: square 1080×1080, portrait 1080×1350 (best feed real estate), story/reel 1080×1920, plus per-platform safe zones for UI overlays.
- The 3-second rule: the first frame/slide must stop the scroll with one bold statement. Detail lives in later slides or the caption.
- Carousels tell one story: our best-performing format idea is the vibe-switch carousel (same page, six vibes). Hook slide → transformation slides → CTA slide to llamamakers.com/start.
- Character content: the llama characters (stills + animated clips) are the house alternative to stock photography. See Characters for usage rules.
Process, files & handover (any field)
- Brief first: audience, message, format, size/spec, deadline, where it will be produced (which printer/vendor). No brief, no design.
- Research the client's competitors and the strongest real examples of the format before opening a tool (Design Library + Refero for structure).
- Concept → one strong direction presented with rationale (not 5 half-ideas) → one consolidated revision round → production files.
- Name files properly: client_piece_size_version (acme_trifold_a4_v2.pdf). "final_FINAL2" is banned.
- Deliver both: production files (print-ready PDF with bleed/marks, or exported web assets) AND editable sources (AI/Figma/InDesign package with fonts/links).
- Archive every project's sources in the client folder on F:\projects; assets bought under our Envato license live in the Design Library for reuse.