Developer Logo

Upduro

4. Design and Build

Transform your plans into a working website

Design System Setup

A design system ensures consistency across your website. Key elements include:

  • Typography scale
  • Color palette
  • Spacing units
  • Component library

Example with Tailwind CSS:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
        // ... other colors
      }
    }
  }
}
Component Development

Break down your design into reusable components. Common components include:

  • Navigation bars
  • Cards and content containers
  • Forms and input fields
  • Buttons and interactive elements

Example Component:

// ServiceCard.tsx
interface ServiceCardProps {
  title: string
  description: string
  price: string
  imageUrl: string
}

export function ServiceCard({
  title,
  description,
  price,
  imageUrl
}: ServiceCardProps) {
  return (
    <div className="rounded-lg border p-4 space-y-4">
      <img
        src={imageUrl}
        alt={title}
        className="w-full h-48 object-cover rounded"
      />
      <h3 className="text-xl font-bold">{title}</h3>
      <p className="text-gray-600">{description}</p>
      <p className="text-lg font-bold">{price}</p>
      <button className="w-full bg-primary-500 text-white py-2 rounded">
        Book Now
      </button>
    </div>
  )
}
Responsive Design

Ensure your website works well on all devices using:

  • Flexible grids
  • Media queries
  • Fluid typography
  • Mobile-first approach

Example Grid Layout:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {services.map(service => (
    <ServiceCard key={service.id} {...service} />
  ))}
</div>
Test Your Knowledge
Complete the quiz to track your progress

What is the main benefit of using a design system?