สร้างเว็บไซต์ Landing Page ระดับ Production สำหรับบริษัทชื่อ Northstar Studio บริษัทรับออกแบบและพัฒนา Digital Product สำหรับ Startup และองค์กรในยุค AI
ออกแบบ Landing Page ที่ดูมีรสนิยม มีความเป็นมนุษย์ และมี Art Direction ชัดเจน
เว็บไซต์ต้องดูเหมือนผลงานจาก Digital Agency ระดับมืออาชีพ ไม่ใช่ Template สำเร็จรูป และต้องหลีกเลี่ยงงานออกแบบลักษณะ “AI Slop”
กลุ่มเป้าหมายคือ Founder, Startup และบริษัทที่ต้องการสร้าง SaaS, Web Application หรือ AI Product
ใช้เทคโนโลยีต่อไปนี้:
- Next.js App Router
- TypeScript
- Tailwind CSS
- Lucide Icons
- Framer Motion สำหรับ Animation เฉพาะจุดที่จำเป็น
- ใช้ Semantic HTML
- รองรับ Responsive Design ตั้งแต่ Mobile ถึง Desktop
สร้างเป็น Front-end เท่านั้น ไม่ต้องมีฐานข้อมูลและไม่ต้องมีระบบ Authentication
เว็บไซต์ต้องสามารถรันได้ด้วยคำสั่ง:
npm install
npm run dev
ออกแบบในแนว Editorial Minimalism ผสมกับ Modern Swiss Design
บุคลิกของเว็บไซต์:
- มั่นใจ
- เรียบง่าย
- ฉลาด
- ทันสมัย
- ไม่ดูพยายามมากเกินไป
- มีรายละเอียดเล็ก ๆ ที่ทำให้งานดู Premium
ใช้ Layout ที่มีจังหวะและลำดับสายตาชัดเจน ไม่จำเป็นต้องจัดทุกอย่างให้อยู่ตรงกลาง
ใช้ Grid, Negative Space, Typography และ Alignment เป็นองค์ประกอบหลักของงานออกแบบ
เลือกใช้สีพื้นหลังโทน Off-white, Warm Gray หรือ Charcoal พร้อม Accent Color เพียงหนึ่งสี
Typography ต้องมี Contrast ระหว่าง Heading, Body, Label และ Metadata อย่างชัดเจน
สามารถใช้ตัวอักษรขนาดใหญ่ได้ แต่ต้องมีเหตุผลทาง Visual Hierarchy ไม่ใช่แค่ทำให้ Hero ดูใหญ่
ห้ามใช้รูปแบบงานออกแบบที่พบได้บ่อยในเว็บไซต์ซึ่งสร้างด้วย AI เช่น:
- Gradient สีม่วง น้ำเงิน หรือชมพูเต็มหน้าจอ
- Glassmorphism จำนวนมาก
- กล่อง Card ที่มีขอบมนเหมือนกันทุก Section
- Floating Orb หรือ Blob ตกแต่งพื้นหลัง
- Glow Effect รอบทุกองค์ประกอบ
- Hero Section ที่มีเพียง Heading อยู่ตรงกลางและปุ่มสองปุ่ม
- Grid การ์ด 3 ใบที่หน้าตาเหมือนกัน
- Dashboard Mockup แบบ Generic
- ข้อความประเภท “Revolutionize your workflow”
- ข้อความ Marketing ที่กว้างและไม่มีความหมาย
- Icon อยู่ในกล่องสี่เหลี่ยมสี Gradient
- Animation ที่เกิดขึ้นกับทุกองค์ประกอบ
- Border Radius ขนาดใหญ่เกินความจำเป็น
- ใช้เงาหนักหรือสี Accent มากเกินไป
- ใส่องค์ประกอบเพื่อเติมพื้นที่โดยไม่มีจุดประสงค์
อย่าออกแบบให้ทุก Section มีโครงสร้างเหมือนกัน
อย่าใช้ Lorem Ipsum และอย่าใช้ข้อความ Placeholder
เว็บไซต์ควรมี Section ต่อไปนี้ แต่สามารถตีความ Layout ได้อย่างอิสระ
Navigation แบบเรียบง่าย ประกอบด้วย:
- Logo แบบ Typography
- Work
- Services
- Process
- About
- ปุ่ม “Start a project”
Navigation ต้องดูเข้ากับ Visual Language ของเว็บไซต์ และรองรับ Mobile Menu
สร้าง Hero ที่มี Composition น่าสนใจและไม่ Generic
เนื้อหาหลัก:
We design digital products people actually want to use.
คำอธิบาย:
Northstar partners with ambitious teams to turn complex ideas into focused, usable and scalable digital products.
Call to Action:
- View selected work
- Start a project
เพิ่ม Visual Element ที่สื่อถึงกระบวนการคิด การออกแบบระบบ หรือการสร้าง Product แต่ห้ามใช้ภาพ Stock และห้ามใช้ Dashboard Mockup แบบ Generic
สามารถสร้าง Visual ด้วย CSS, Typography, Grid, Lines, Labels, Shapes หรือ UI Fragment ที่มีความหมาย
แสดง Case Study จำนวน 3 โปรเจกต์
แต่ละโปรเจกต์ต้องมีชื่อ คำอธิบาย ประเภทงาน ปี และผลลัพธ์ทางธุรกิจ
ตัวอย่างโปรเจกต์:
- Aster — AI Workspace for Research Teams
- Forma — Financial Planning Platform
- Common Ground — Community Management System
อย่าวางเป็น Card Grid แบบธรรมดา ให้ใช้ Editorial Layout หรือ Project Index ที่มีจังหวะในการจัดวาง
บริการหลัก:
- Product Strategy
- UX and UI Design
- Web Development
- AI Product Integration
อธิบายแต่ละบริการแบบสั้น กระชับ และมีความหมาย
Section นี้ควรให้ความรู้สึกเหมือน Service Index หรือ Capability List มากกว่ากล่อง Card
อธิบายกระบวนการทำงาน 4 ขั้นตอน:
- Discover
- Define
- Design
- Deliver
ทำให้ผู้ชมเข้าใจว่าบริษัทไม่ได้เพียงสร้างหน้าตาที่สวย แต่ช่วยคิดตั้งแต่ Business Problem จนถึงการส่งมอบ Product
สร้าง Section ที่มีข้อความเด่น:
Good products are not created by adding more. They are created by deciding what matters.
ใช้ Section นี้เป็นจุดพักสายตา และแสดงแนวคิดของบริษัทผ่าน Typography และ Composition
ใส่ Testimonial จาก Founder ของบริษัทสมมติหนึ่งราย
ข้อความต้องมีความเป็นธรรมชาติ ไม่ดูเหมือนข้อความโฆษณาที่ AI สร้างขึ้น
ปิดท้ายด้วยข้อความ:
Have something worth building?
พร้อมคำอธิบายสั้นและปุ่ม “Tell us about your project”
ประกอบด้วย:
- Company Name
- Location
- Social Links
- Current Year
- ข้อความสั้นที่สะท้อนตัวตนของ Studio
เพิ่ม Micro-interaction อย่างระมัดระวัง เช่น:
- Navigation Transition
- Hover State ของ Project
- Text Reveal บางส่วน
- Subtle Image หรือ Layout Movement
- Smooth Mobile Menu
Animation ต้องช่วยเพิ่มความเข้าใจหรือความรู้สึกของเว็บไซต์ ไม่ใช่ทำเพื่อโชว์เทคนิค
รองรับ prefers-reduced-motion
-
Responsive ทุกขนาดหน้าจอ
-
Mobile Layout ต้องถูกออกแบบจริง ไม่ใช่เพียงย่อ Desktop
-
Navigation ใช้งานได้
-
ปุ่มและลิงก์มี Hover และ Focus State
-
Contrast อ่านง่าย
-
รองรับ Keyboard Navigation
-
ใช้ Heading Structure ถูกต้อง
-
ไม่มี Horizontal Overflow
-
ไม่มีข้อความล้น Container
-
ไม่มี Element ซ้อนกันเมื่อหน้าจอเล็ก
-
ใช้ภาพหรือ Visual ที่โหลดเร็ว
-
ให้ความสำคัญกับ Performance และ Accessibility
-
แยก Component อย่างเหมาะสม
-
ตั้งชื่อ Component และ Variable ให้สื่อความหมาย
-
หลีกเลี่ยง Component ที่ใหญ่เกินไป
-
ลดการเขียนข้อมูลซ้ำ
-
ใช้ Array และ Mapping สำหรับข้อมูลที่มีโครงสร้างซ้ำ
-
ห้ามใช้
any -
ห้ามเขียน Inline Style โดยไม่มีเหตุผล
-
ไม่ต้องสร้าง Design System ที่ซับซ้อนเกินความจำเป็น
-
Code ต้องอ่านง่ายและพร้อมนำไปพัฒนาต่อ
ก่อนจบงาน ให้ตรวจสอบเว็บไซต์ด้วยตัวเองในขนาดหน้าจอต่อไปนี้:
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px
ตรวจสอบและแก้ไข:
- Responsive Layout
- Spacing
- Typography
- Contrast
- Overflow
- Broken Interaction
- Accessibility
- Visual Consistency
- Console Errors
อย่าเพียงอธิบายแนวคิดหรือส่ง Mockup
ให้สร้างเว็บไซต์ที่ใช้งานได้จริง พร้อมไฟล์ทั้งหมดที่จำเป็น และสรุปท้ายงานสั้น ๆ ว่า:
- Art Direction ที่เลือกคืออะไร
- มี Design Decision สำคัญอะไรบ้าง
- หลีกเลี่ยงรูปแบบ AI Slop อย่างไร
- มีข้อจำกัดหรือสิ่งใดที่ควรพัฒนาต่อ