เวลาลูกค้าเลือกเราให้ออกแบบเว็บไซต์หรือแอปให้ ก่อนจะเริ่มลงมือทำ UI ทีละหน้า คำถามแรก ๆ ที่ควรตอบให้ได้คือ
“หน้าตางานนี้ควรไปทางไหนกันแน่?”
เพราะคำว่า “สวย” ของแต่ละคนไม่เหมือนกัน
คำว่า “น่ารัก” ก็ไม่เหมือนกัน
แม้แต่คำว่า “มินิมอล” ยังมีได้ประมาณร้อยเวอร์ชัน
ลูกค้าอาจบอกว่า
“อยากได้แอปหวาน ๆ เน้นสีชมพู”
ในหัวของลูกค้า อาจเห็นแอปสีชมพูฟุ้ง ๆ เหมือนนมเย็น มีดอกไม้ มีความละมุน มีความเจ้าหญิงนิด ๆ 🌸
แต่ในหัวของดีไซน์เนอร์ อาจเห็นอีกแบบเลย
ชมพูเป็นแค่สีหลัก พื้นหลังขาว มีพื้นที่ว่างเยอะ ฟอนต์อ่านง่าย ไม่มีดอกไม้สักดอก
ทั้งสองฝั่งไม่ได้ผิดนะคะ
แค่ “ภาพในหัว” ยังไม่ตรงกัน
แล้วถ้าเรารีบกระโดดไปทำ UI เลย 2–3 หน้า ใช้เวลาคิด ใช้แรงจัดเต็ม แต่พอส่งไปแล้วลูกค้าบอกว่า “ยังไม่ใช่” ความเหนื่อยจะเริ่มมา กำลังใจเริ่มหาย แล้วก็จะเข้าสู่ลูปส่ง reference ไปมาแบบไม่รู้จบ
จะดีกว่าไหม
ถ้าเรามีพื้นที่เล็ก ๆ ที่ช่วยทำให้ทุกคนเห็นภาพเดียวกันก่อน
พื้นที่นั้นแหละค่ะ คือ Moodboard
Moodboard คืออะไร?
Moodboard คือบอร์ดที่รวบรวมทิศทางของงานออกมาเป็นภาพเดียว เพื่อสื่ออารมณ์ สไตล์ และภาพรวมของงานให้คนที่เกี่ยวข้องเข้าใจตรงกัน
ในงานออกแบบทั่วไป มู้ดบอร์ดอาจประกอบด้วยสี ภาพถ่าย วัสดุ ฟอนต์ texture หรือ reference ต่าง ๆ
ส่วน UI Moodboard จะโฟกัสกับงานออกแบบหน้าจอมากขึ้น เช่น
- สีหลักของโปรดักต์
- ฟอนต์ที่อยากใช้
- แนวภาพประกอบหรือภาพถ่าย
- สไตล์ไอคอน
- ปุ่ม ช่องกรอกข้อมูล หรือ component ตัวอย่าง
- ตัวอย่างหน้าจอสั้น ๆ
- ระยะห่าง ความโปร่ง ความแน่นของ layout
พูดง่าย ๆ คือ มันเป็นเหมือน “ตัวอย่างรสชาติ” ของงาน ก่อนที่เราจะเริ่มทำอาหารจานจริง
ยังไม่ต้องเป๊ะทุกจุด
ยังไม่ต้องล็อกทุก component
แต่ต้องพอทำให้ทุกคนพูดได้ว่า
“ใช่ งานนี้ควรไปทางนี้แหละ”
แล้วมู้ดบอร์ดช่วยอะไร?
สำหรับดีไซน์เนอร์ มู้ดบอร์ดช่วยจัดความคิดให้เป็นภาพ ไม่ใช่แค่บอกว่า “อยากให้ดู clean, modern, friendly” แล้วปล่อยให้ทุกคนจินตนาการกันเอง
มันช่วยให้เราอธิบายเหตุผลของสไตล์ได้ง่ายขึ้น เช่น ทำไมใช้สีนี้ ทำไมฟอนต์นี้เหมาะ ทำไมไอคอนควรเป็นแบบ rounded มากกว่า sharp
สำหรับลูกค้า มู้ดบอร์ดช่วยให้เห็นภาพตั้งแต่ต้นว่าโปรดักต์จะออกมาประมาณไหน ตรงไหนใช่ ตรงไหนยังไม่ใช่ จะได้รีบปรับก่อนที่งานจะวิ่งไปไกล
เพราะการแก้ทิศทางตั้งแต่ตอนเป็นมู้ดบอร์ด ง่ายกว่าการแก้ทั้งระบบตอนทำ UI ไปแล้วเยอะมาก
มู้ดบอร์ดที่ดีเลยเหมือนวิดีโอคอลที่ Wi-Fi แรง ๆ
ภาพชัด เสียงชัด คุยกันรู้เรื่องทั้งสองฝั่ง
เริ่มทำมู้ดบอร์ดยังไง?
เริ่มจากข้อมูลที่มีอยู่ก่อน เช่น
- โปรดักต์นี้คืออะไร
- กลุ่มผู้ใช้เป็นใคร
- แบรนด์อยากให้คนรู้สึกแบบไหน
- ลูกค้าชอบหรือไม่ชอบอะไร
- มีข้อจำกัดเรื่องสี ฟอนต์ หรือ guideline เดิมไหม
- งานนี้ต้องดูสนุก น่าเชื่อถือ หรูหรา อบอุ่น หรือจริงจังแค่ไหน
จากนั้นลองสรุปออกมาเป็น keyword สั้น ๆ เพื่อใช้เป็นเข็มทิศของบอร์ด เช่น
Mood: Optimistic, Loving
Tone: Happy, Soft, Friendly
Style: Light, Clean, Playful
สมมุติโจทย์ตัวอย่างคือ
Blossom Girl
แอป iOS สำหรับเด็กผู้หญิงอายุ 8–14 ปี ใช้วาดรูประบายสีแบบง่าย ๆ โทนพาสเทล อ่อนหวาน น่ารัก ใช้ง่าย และไม่ทำร้ายสายตา
จากโจทย์นี้ เราจะเริ่มแตกองค์ประกอบของ UI Moodboard ออกมาได้ชัดขึ้น
8 องค์ประกอบใน UI Moodboard
1. Color Palette
สีคือสิ่งแรก ๆ ที่คนรู้สึกได้ทันที ถึงยังไม่ได้อ่านอะไรเลย
ในมู้ดบอร์ด เราไม่จำเป็นต้องลงละเอียดถึงระดับสี error, warning, success ตั้งแต่แรกก็ได้ แต่ควรมีชุดสีหลักที่บอกอารมณ์ของงานชัดเจน
เช่นในเคส Blossom Girl เราอาจเริ่มจากชมพูพาสเทล เขียวอ่อน ขาวครีม และเหลืองส้มเล็กน้อยไว้ใช้เน้นบางจุด
จากนั้นค่อยตัดให้เหลือชุดสีที่ใช้งานได้จริง ไม่ฟุ้งเกินไป และยังอ่านง่ายอยู่
2. Fonts
ฟอนต์มีผลกับบุคลิกของงานมากกว่าที่คิด
งานที่ใช้ฟอนต์ตัวกลม ๆ จะให้ความรู้สึกเป็นมิตร
งานที่ใช้ฟอนต์คม ๆ อาจดูจริงจัง ทันสมัย หรือพรีเมียมกว่า
งานที่ใช้ฟอนต์ลายมืออาจดูน่ารัก อบอุ่น หรือเป็นกันเอง
ปกติในหนึ่งบอร์ด เลือกประมาณ 1–3 ฟอนต์ก็พอ และควรลองวางทั้งหัวเรื่องกับเนื้อหาจริง ๆ ให้เห็นว่าอ่านแล้วรู้สึกยังไง
ในเคส Blossom Girl อาจใช้ฟอนต์เนื้อหาแบบ sans-serif ที่อ่านง่าย และใช้ฟอนต์หัวเรื่องที่มีความนุ่มหรือคล้ายลายมือเล็กน้อย เพื่อเพิ่มความน่ารักโดยไม่ทำให้อ่านยาก
3. Photography / Illustration
ภาพถ่ายและภาพประกอบเป็นส่วนที่ส่งอารมณ์ได้เร็วมาก
บางครั้งแค่เปลี่ยนภาพประกอบ งานก็เปลี่ยนบุคลิกไปเลย
จากน่ารักเป็นจริงจัง
จากพรีเมียมเป็นเข้าถึงง่าย
จากสนุกเป็นดูเป็นทางการขึ้น
ถ้าเจอภาพที่ object ใช่ แต่โทนสียังไม่เข้ากับบอร์ด เราอาจปรับสี ปรับแสง หรือเลือกภาพชุดใหม่ให้เข้ากันมากขึ้นได้
และที่สำคัญมาก ๆ คืออย่าลืมเช็กลิขสิทธิ์ภาพ โดยเฉพาะงานที่จะนำไปใช้จริงกับลูกค้า
4. Iconography
ไอคอนเล็กนิดเดียว แต่มีผลกับภาพรวมมาก
ลองเลือกไอคอนสัก 5–10 ตัวที่น่าจะได้ใช้จริงในโปรดักต์ แล้วดูว่าสไตล์ของมันเข้ากับ mood ของงานไหม เช่น
- Filled ดูชัด หนักแน่น
- Outline ดูเบา โปร่ง
- Rounded ดูเป็นมิตร
- Sharp ดูจริงจังหรือเท่ขึ้น
- Hand-drawn ดูสนุกและเป็นกันเอง
ในเคส Blossom Girl เราอาจเลือกไอคอนแบบ rounded หรือ soft outline เพื่อให้ดูน่ารักและไม่แข็งเกินไปสำหรับเด็ก
5. UI Preview / One Screen
ส่วนนี้คือการเอาทุกอย่างมาลองประกอบกันให้เห็นเป็นหน้าจอจริงสักหน้า
ยังไม่ต้องเป็น UI ที่สมบูรณ์ทั้ง flow
แต่ควรเป็นหน้าที่โชว์ mood ของงานได้ชัด เช่น หน้า Home, หน้า Dashboard, หน้า Create หรือหน้าหลักที่ผู้ใช้จะเจอบ่อย
จุดนี้จะช่วยตอบคำถามได้ดีมากว่า สี ฟอนต์ ภาพ ไอคอน ปุ่ม และระยะห่าง พอมาอยู่ด้วยกันแล้ว “รอดไหม”
บางทีตอนแยกดูทีละชิ้น ทุกอย่างดูสวยหมด แต่พอมารวมกันจริง อาจแน่นไป หวานไป จืดไป หรืออ่านยากกว่าที่คิด
6. Spatial Awareness
พูดง่าย ๆ คือเรื่องระยะห่าง พื้นที่ว่าง และจังหวะการจัดวาง
งานที่มีพื้นที่ว่างเยอะ จะให้ความรู้สึกโปร่ง เบา พรีเมียม หรือสงบ
งานที่จัดแน่นขึ้น อาจให้ความรู้สึก active, content-heavy หรือใช้งานจริงจังมากกว่า
ในมู้ดบอร์ด เราอาจลองกำหนดคร่าว ๆ ว่า layout ควรหายใจประมาณไหน เช่น ระยะ 16, 24, 32, 40 หรือ 48px
ไม่ใช่เพื่อบอกว่าทุกหน้าต้องใช้ตามนี้เป๊ะ แต่เพื่อให้เห็นภาพรวมว่าโปรดักต์นี้ควร “แน่น” หรือ “โปร่ง” แค่ไหน
7. Overall Contrast
Contrast ไม่ได้หมายถึงสีเข้มอ่อนอย่างเดียว แต่รวมถึงน้ำหนักของทั้งบอร์ดด้วย
อะไรควรเด่น
อะไรควรเบา
อะไรควรเป็นพระเอก
อะไรควรเป็นแค่ตัวช่วย
ถ้าทุกอย่างเด่นเท่ากันหมด งานจะเหนื่อยมาก ผู้ใช้ไม่รู้จะมองอะไรก่อน ลูกค้าก็อาจรู้สึกว่างานยังไม่ค่อยมีจุดยืน
ตอนทำมู้ดบอร์ด ลองวางทุกองค์ประกอบแบบคร่าว ๆ ก่อน แล้วดูว่า mood โดยรวมออกมาเป็นแบบที่ตั้งใจไหม จากนั้นค่อยจัด layout ให้เรียบร้อยขึ้นอีกที
8. Add-ons
Add-ons คือองค์ประกอบเสริมที่ช่วยให้สไตล์ชัดขึ้น เช่น
- Button
- Text Field
- Card
- Tag
- Toggle
- Badge
- Empty State
- Small component state ต่าง ๆ
ไม่จำเป็นต้องใส่ทุกอย่างตั้งแต่แรก เลือกใส่เฉพาะสิ่งที่ช่วยให้เห็นภาพโปรดักต์ชัดขึ้นก็พอ
เช่น ถ้าโปรดักต์เป็นแอปที่มีการกรอกข้อมูลเยอะ การใส่ Text Field กับ Button ตัวอย่างจะช่วยให้ลูกค้าเห็นภาพมากขึ้นว่า UI จริงจะออกมาเป็นแบบไหน
มู้ดบอร์ดไม่ใช่คำตอบสุดท้าย
สิ่งสำคัญคือ มู้ดบอร์ดเป็น “ทิศทาง” ไม่ใช่ไฟนอลดีไซน์
ไม่ได้แปลว่าทุกสี ทุกภาพ ทุกฟอนต์ ทุก component ในบอร์ดจะต้องถูกยกไปใช้จริง 100%
เพราะตอนออกแบบจริง ยังมีเรื่องอื่นที่ต้องคิดต่อ เช่น usability, accessibility, content, responsive, design system, development constraint และ feedback จากผู้ใช้จริง
มู้ดบอร์ดจึงไม่ใช่แค่ทำให้งานสวย
แต่ช่วยให้ทุกคนเริ่มต้นจากความเข้าใจเดียวกัน
คำถามที่เจอบ่อย
ต้องทำกี่บอร์ดต่อหนึ่งงาน?
โดยทั่วไป 2–3 บอร์ดกำลังดี
แต่ละบอร์ดควรมีทิศทางที่ต่างกันชัดเจน ไม่ใช่เปลี่ยนแค่เฉดสีแล้วเรียกว่าอีกบอร์ด เพราะเป้าหมายคือช่วยให้ลูกค้าเลือก “ทาง” ของงาน ไม่ใช่เลือกสีชมพูเบอร์ 1 หรือสีชมพูเบอร์ 2
ใช้เวลานานไหม?
ช่วงแรกอาจใช้เวลานาน เพราะต้องค้น reference เยอะ ต้องลองจับองค์ประกอบหลายแบบ และยังต้องฝึกมองว่าสไตล์ไหนเหมาะกับโจทย์จริง
แต่พอทำบ่อยขึ้น จะเร็วขึ้นมาก
สิ่งที่ควรจำไว้คือ มู้ดบอร์ดเป็นจุดเริ่มต้น ไม่ใช่งานสมบูรณ์แบบ อย่าใช้เวลาขัดจนลืมว่าจุดประสงค์ของมันคือการช่วยคุย ช่วยเลือกทิศทาง และช่วยลดความคลุมเครือ
ถ้าคิดไม่ออกทำยังไง?
อย่าฝืนจ้องหน้าจอนานเกินไป
ลองออกไปค้น reference เพิ่ม ดูงานในอุตสาหกรรมใกล้เคียง ดูแบรนด์ที่มี mood คล้ายกัน หรือคุยกับทีมให้ช่วยกันดู
บางครั้งคำตอบไม่ได้อยู่ในหัวเราคนเดียว แต่อยู่ในบทสนทนาระหว่างดีไซน์เนอร์ ลูกค้า ทีม dev ทีม content และคนที่จะได้ใช้โปรดักต์จริง
ที่มาของวิธีนี้
กระบวนการ 8 องค์ประกอบนี้เป็นวิธีที่ต้านได้เรียนรู้และตกผลึกมาจากช่วงที่ทำงานกับทีมดีไซน์ 20Scoops CNX ผ่านการลองผิดลองถูกกับหลายโปรเจกต์ หลายลูกค้า และหลายสถานการณ์
มันไม่ใช่สูตรตายตัว
แต่เป็น framework ที่ช่วยให้เริ่มต้นงานออกแบบได้เป็นระบบมากขึ้น
ทุกวันนี้ก็ยังมีการปรับต่อเรื่อย ๆ ตามลักษณะงาน เครื่องมือใหม่ ๆ และวิธีทำงานของทีมที่เปลี่ยนไป
จากบทความวันนั้น สู่ Moodboard Studio วันนี้
บทความนี้เขียนครั้งแรกตั้งแต่ปี 2019
ตอนนั้นเป้าหมายคืออยากอธิบายให้คนเข้าใจว่า Moodboard ไม่ใช่แค่การเอารูปสวย ๆ มาแปะรวมกัน แต่มันคือเครื่องมือที่ช่วยให้ดีไซน์เนอร์ ลูกค้า และทีมทำงานเห็นภาพเดียวกันก่อนเริ่มออกแบบจริง
หลายปีผ่านไป เครื่องมือออกแบบเปลี่ยนไปเยอะมาก
เรามี Figma, AI, design system, template, plugin และสารพัดตัวช่วยที่ทำให้งานเร็วขึ้นกว่าเดิม
แต่สิ่งหนึ่งที่ยังเหมือนเดิมคือ
ก่อนจะออกแบบให้ดี เราต้องคุยกันให้เห็นภาพเดียวกันก่อน
และนั่นคือเหตุผลที่ Moodboard Studio บนเว็บนี้ถูกทำขึ้นมา
มันเป็น playground เล็ก ๆ สำหรับลองวาง mood ของงานให้เห็นเร็วขึ้น เลือกสไตล์ ปรับสี ฟอนต์ มุมโค้ง ดูตัวอย่างแบบสด ๆ แล้วส่งต่อให้ทีม หรือลูกค้าดูเป็นจุดเริ่มต้นของบทสนทนาได้ทันที
ไม่ต้องสมัคร
ไม่ต้องคิดเยอะ
เปิดมาแล้วลองเล่นได้เลย
อาจยังไม่ใช่เครื่องมือที่สมบูรณ์แบบที่สุด แต่หวังว่ามันจะช่วยให้ช่วงเริ่มต้นของงานออกแบบง่ายขึ้น สนุกขึ้น และคุยกันรู้เรื่องขึ้นอีกนิดค่ะ 💖
When a client picks you to design their website or app, before you start building the UI screen by screen, one of the first questions worth answering is
“Which direction should this work actually go?”
Because everyone's idea of “beautiful” is different.
So is “cute.”
Even “minimal” comes in about a hundred versions.
A client might say
“I want a sweet app, lots of pink.”
In the client's head, that might be a hazy, strawberry-milk pink full of flowers — soft and a little princess-y 🌸
In the designer's head it could be something else entirely:
pink as just the main colour, a white background, lots of whitespace, readable fonts, not a single flower.
Neither side is wrong.
The “pictures in their heads” just don't match yet.
And if we rush straight into 2–3 UI screens — pouring in time and effort — then hear “not quite,” the tiredness creeps in, the energy drains, and we slip into an endless loop of trading references.
Wouldn't it be nicer
to have a small space that gets everyone seeing the same picture first?
That space is the Moodboard.
What is a moodboard?
A Moodboard pulls a project's direction into a single image — conveying its mood, style and overall feel so everyone involved understands the same thing.
In general design, a moodboard might hold colours, photos, materials, fonts, textures or references.
A UI Moodboard focuses more on screen design, such as:
- the product's core colours
- fonts you'd like to use
- illustration or photography direction
- icon style
- buttons, input fields, or sample components
- a short sample screen
- spacing, airiness and density of the layout
Put simply, it's like a “taste sample” of the work before you cook the real dish.
It doesn't have to be pixel-perfect.
You don't have to lock every component.
But it should be enough for everyone to say
“Yes — this is the direction.”
How does a moodboard help?
For designers, it organises thoughts into a picture — not just saying “make it clean, modern, friendly” and leaving everyone to imagine their own version.
It makes it easier to explain the reasoning behind a style: why this colour, why this font fits, why icons should be rounded rather than sharp.
For clients, it shows from the start roughly how the product will look — what's right, what isn't — so things get adjusted before the work runs too far.
Because fixing the direction at the moodboard stage is far easier than reworking the whole system once the UI is already built.
A good moodboard is like a video call on strong Wi-Fi —
clear picture, clear sound, both sides actually understanding each other.
How to start a moodboard?
Start with what you already have, such as:
- what is this product?
- who are the users?
- how does the brand want people to feel?
- what does the client like or dislike?
- any constraints on colour, fonts, or existing guidelines?
- should it feel fun, trustworthy, luxurious, warm, or serious — and how much?
Then sum it up into a few short keywords to use as the board's compass, like:
Mood: Optimistic, Loving
Tone: Happy, Soft, Friendly
Style: Light, Clean, Playful
Take a sample brief:
Blossom Girl
an iOS app for girls aged 8–14 for simple drawing and colouring — pastel, soft, cute, easy to use, and easy on the eyes.
From this brief, the UI Moodboard's components become clearer.
The 8 parts of a UI Moodboard
1. Color Palette
Colour is one of the first things people feel instantly, even before reading anything.
In a moodboard, you don't need exact error / warning / success shades from the start, but you should have a core set that clearly signals the mood.
For Blossom Girl, we might start with pastel pink, light green, cream white, and a touch of orange-yellow for accents.
Then trim it down to a usable set — not too busy, and still easy to read.
2. Fonts
Fonts shape a work's personality more than you'd think.
Rounded fonts feel friendly.
Sharp fonts can feel serious, modern or more premium.
Handwritten fonts can feel cute, warm or casual.
Usually 1–3 fonts per board is enough, and you should try them on both headings and real body text to feel how they read.
For Blossom Girl, a readable sans-serif for body and a soft, slightly handwritten heading add cuteness without hurting readability.
3. Photography / Illustration
Photos and illustrations carry mood very fast.
Sometimes just swapping the illustration changes the whole personality —
from cute to serious,
from premium to approachable,
from fun to more formal.
If an image's subject is right but its tone doesn't fit the board, you can adjust colour, light, or pick a new set.
And very importantly: don't forget to check image licences, especially for work that ships to a client.
4. Iconography
Icons are tiny, but they matter a lot to the whole.
Pick 5–10 icons you'd likely actually use in the product, and see whether their style fits the work's mood. For example:
- Filled — clear, solid
- Outline — light, airy
- Rounded — friendly
- Sharp — serious or sleek
- Hand-drawn — fun and casual
For Blossom Girl, rounded or soft-outline icons feel cute and not too harsh for kids.
5. UI Preview / One Screen
This is where you assemble everything into one real screen.
It doesn't have to be a complete flow,
but it should clearly show the mood — like Home, Dashboard, Create, or a main screen users see often.
This answers a key question well: when colour, fonts, images, icons, buttons and spacing all come together, do they survive?
Sometimes each piece looks great alone, but together it's too dense, too sweet, too flat, or harder to read than expected.
6. Spatial Awareness
Simply put, it's about spacing, whitespace and rhythm.
Lots of whitespace feels airy, light, premium or calm.
Tighter layouts can feel active, content-heavy, or more hands-on.
In the board, you might rough out how much the layout should breathe — say 16, 24, 32, 40 or 48px.
Not to say every screen must follow exactly, but to show how “tight” or “airy” the product should be.
7. Overall Contrast
Contrast isn't only light vs. dark colour — it's the weight of the whole board.
What should stand out,
what should recede,
what's the hero,
what's just a helper.
If everything competes equally, the work gets exhausting — users don't know where to look first, and clients may feel it lacks a stance.
When making the board, rough everything in first, check that the overall mood matches your intent, then tidy the layout.
8. Add-ons
Add-ons are extras that sharpen the style, like:
- Button
- Text Field
- Card
- Tag
- Toggle
- Badge
- Empty State
- various small component states
You don't need them all from the start — just the ones that make the product clearer.
For example, if it's an input-heavy app, sample Text Fields and Buttons help the client picture how the real UI will look.
A moodboard isn't the final answer
The key point: a moodboard is a direction, not a final design.
It doesn't mean every colour, image, font and component in the board ships exactly 100%.
Because real design brings more to think about — usability, accessibility, content, responsive, design systems, development constraints, and feedback from real users.
So a moodboard isn't just about making things pretty —
it helps everyone start from the same understanding.
Common questions
How many boards per project?
Usually 2–3 is a good amount.
Each board should have a clearly different direction — not just a shade swap. The goal is to help the client pick the work's path, not pink #1 vs. pink #2.
How long does it take?
At first it can take a while — lots of references to dig through, many compositions to try, and you're still learning which styles suit the brief.
But with practice it gets much faster.
Remember: a moodboard is a starting point, not perfection. Don't polish it so long that you forget its purpose is to help the conversation, choose a direction, and reduce ambiguity.
What if you're stuck?
Don't force yourself to stare at the screen too long.
Go find more references, look at nearby industries, brands with a similar mood, or talk it through with your team.
Sometimes the answer isn't in one person's head — it's in the conversation between designers, clients, devs, content folks, and the people who'll actually use the product.
Where this came from
This 8-part process is something I learned and distilled while working with the design team at 20Scoops CNX — through trial and error across many projects, clients and situations.
It isn't a fixed formula,
but a framework that helps start design work more systematically.
And it's still being adjusted as work, tools and team ways-of-working keep changing.
From that article to Moodboard Studio today
This piece was first written back in 2019.
Back then, the goal was to explain that a Moodboard isn't just sticking pretty pictures together — it's a tool that helps designers, clients and teams see the same picture before real design begins.
Years on, design tools have changed a lot —
we have Figma, AI, design systems, templates, plugins and countless helpers that make work faster than before.
But one thing stays the same:
Before you can design well, you have to talk it through until everyone sees the same picture.
And that's why the Moodboard Studio on this site was made.
It's a little playground for laying out a project's mood quickly — pick a style, tweak colours, fonts and corner radius, preview live, then hand it to your team or client as the starting point of a conversation, right away.
No sign-up.
No overthinking.
Just open it and play.
It might not be the most perfect tool yet — but I hope it makes the start of design work a little easier, a little more fun, and a little easier to get on the same page. 💖
