Doing Studio User Guide - Visual Design Mastery

!Doing Studio Interface

Welcome to the complete Doing Studio User Guide! Learn how to create stunning, high-converting storefronts using our powerful visual design platform. No coding required - just drag, drop, and design your way to success.

Table of Contents

1. Getting Started

2. Interface Overview

3. Design Fundamentals

4. Working with Components

5. Layout & Responsive Design

6. Styling & Customization

7. E-commerce Integration

8. Publishing & Deployment

9. Advanced Techniques

10. Best Practices

Getting Started

Accessing Doing Studio

#### From DoingHub

1. Login to your DoingHub dashboard

2. Navigate to "Design" → "Doing Studio"

3. Choose existing project or create new one

4. Start designing!

#### Direct Access

1. Visit studio.doin9.com

2. Login with your doin9 credentials

3. Select your store project

4. Begin creating

Your First Project

#### Project Setup

```

New Project Wizard:

├── Project Name: "My Store Design"

├── Template: Choose starting template

├── Brand Colors: Set primary colors

├── Typography: Select font families

└── Layout: Choose basic structure

```

#### Template Selection

```

Available Templates:

├── Fashion Store: Modern, image-focused

├── Electronics: Clean, specification-heavy

├── Food & Beverage: Warm, appetite-appealing

├── Services: Professional, trust-building

├── Portfolio: Creative, showcase-focused

└── Blank Canvas: Start from scratch

```

Interface Overview

Main Interface Areas

#### 1. Canvas (Center)

The main design area where you build your pages:

#### 2. Component Library (Left)

```

Component Categories:

├── Layout

│ ├── Container

│ ├── Grid

│ ├── Flex

│ └── Section

├── Content

│ ├── Heading

│ ├── Text

│ ├── Image

│ └── Video

├── Interactive

│ ├── Button

│ ├── Form

│ ├── Link

│ └── Modal

└── E-commerce

├── Product Card

├── Shopping Cart

├── Product Gallery

└── Checkout Form

```

#### 3. Properties Panel (Right)

Configure selected elements:

#### 4. Layers Panel (Right)

Manage element hierarchy:

#### 5. Top Toolbar

Quick access to essential tools:

Design Fundamentals

Understanding the Canvas

#### Page Structure

```

Page Hierarchy:

├── Page (Root)

├── Sections (Full-width containers)

├── Containers (Content width)

├── Components (Individual elements)

└── Elements (Text, images, etc.)

```

#### Responsive Breakpoints

```css

/* Device breakpoints */

Mobile: 320px - 767px

Tablet: 768px - 1023px

Desktop: 1024px - 1439px

Large Desktop: 1440px+

```

Design Principles

#### Visual Hierarchy

1. Primary Elements: Main headlines, hero images, primary CTAs

2. Secondary Elements: Subheadings, secondary buttons, navigation

3. Supporting Elements: Body text, captions, footer content

#### Color Theory

```css

/* Brand color system */

:root {

--primary: #3b82f6; /* Main brand color */

--secondary: #10b981; /* Accent color */

--neutral-100: #f8fafc; /* Light backgrounds */

--neutral-900: #0f172a; /* Dark text */

--success: #22c55e; /* Success states */

--warning: #f59e0b; /* Warning states */

--error: #ef4444; /* Error states */

}

```

#### Typography Scale

```css

/* Responsive typography */

.text-xs: 12px / 16px

.text-sm: 14px / 20px

.text-base: 16px / 24px

.text-lg: 18px / 28px

.text-xl: 20px / 28px

.text-2xl: 24px / 32px

.text-3xl: 30px / 36px

.text-4xl: 36px / 40px

```

Working with Components

Adding Components

#### Drag & Drop Method

1. Select Component: Choose from library

2. Drag to Canvas: Position where desired

3. Drop: Release to place component

4. Configure: Adjust properties as needed

#### Click to Add Method

1. Click Component: Single click in library

2. Click Canvas: Click where you want it placed

3. Auto-Configure: Component appears with defaults

Basic Components

#### Text Components

```jsx

// Heading component

level="1" // H1, H2, H3, H4, H5, H6

color="primary" // Color from design system

align="center" // left, center, right

weight="bold" // normal, medium, semibold, bold

>

Welcome to Our Store

// Text component

size="large" // xs, sm, base, lg, xl, 2xl, etc.

color="neutral-700" // Any color from system

lineHeight="relaxed" // tight, normal, relaxed, loose

>

Discover amazing products at great prices.

```

#### Image Components

```jsx

// Image component

src="/hero-image.jpg"

alt="Hero Image"

width="100%"

height="400px"

objectFit="cover" // cover, contain, fill

lazy={true} // Lazy loading

responsive={true} // Responsive sizing

/>

```

#### Button Components

```jsx

// Button component

variant="primary" // primary, secondary, outline, ghost

size="large" // sm, base, lg, xl

fullWidth={false} // Full width button

disabled={false} // Disabled state

onClick="addToCart" // Action handler

>

Add to Cart - $29.99

```

Layout Components

#### Container Component

```jsx

// Responsive container

maxWidth="1200px" // Maximum width

padding="20px" // Internal spacing

margin="0 auto" // Center alignment

responsive={true} // Responsive behavior

>

{/* Content goes here */}

```

#### Grid Component

```jsx

// CSS Grid layout

columns="3" // Number of columns

gap="20px" // Space between items

responsive={{ // Responsive columns

mobile: 1,

tablet: 2,

desktop: 3

}}

>

Product 1

Product 2

Product 3

```

#### Flex Component

```jsx

// Flexbox layout

direction="row" // row, column

justify="center" // start, center, end, between, around

align="center" // start, center, end, stretch

wrap={true} // Allow wrapping

gap="16px" // Space between items

>

Item 1

Item 2

```

Layout & Responsive Design

Creating Responsive Layouts

#### Mobile-First Approach

1. Start with Mobile: Design for smallest screen first

2. Add Tablet Styles: Enhance for medium screens

3. Enhance for Desktop: Add desktop-specific features

4. Test Thoroughly: Check all breakpoints

#### Responsive Grid Example

```css

/* Mobile: 1 column */

.product-grid {

display: grid;

grid-template-columns: 1fr;

gap: 16px;

}

/* Tablet: 2 columns */

@media (min-width: 768px) {

.product-grid {

grid-template-columns: repeat(2, 1fr);

gap: 20px;

}

}

/* Desktop: 3 columns */

@media (min-width: 1024px) {

.product-grid {

grid-template-columns: repeat(3, 1fr);

gap: 24px;

}

}

```

Device-Specific Design

#### Mobile Optimization

#### Tablet Considerations

#### Desktop Features

Styling & Customization

Design System

#### Color Management

```css

/* Custom color palette */

:root {

/* Brand colors */

--brand-primary: #6366f1;

--brand-secondary: #8b5cf6;

--brand-accent: #06b6d4;

/* Neutral colors */

--neutral-50: #f8fafc;

--neutral-100: #f1f5f9;

--neutral-200: #e2e8f0;

--neutral-300: #cbd5e1;

--neutral-400: #94a3b8;

--neutral-500: #64748b;

--neutral-600: #475569;

--neutral-700: #334155;

--neutral-800: #1e293b;

--neutral-900: #0f172a;

/* Semantic colors */

--success: #10b981;

--warning: #f59e0b;

--error: #ef4444;

--info: #3b82f6;

}

```

#### Typography System

```css

/* Font families */

:root {

--font-heading: 'Inter', sans-serif;

--font-body: 'Inter', sans-serif;

--font-mono: 'JetBrains Mono', monospace;

}

/* Font weights */

.font-light { font-weight: 300; }

.font-normal { font-weight: 400; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-bold { font-weight: 700; }

```

#### Spacing System

```css

/* Consistent spacing scale */

:root {

--space-1: 0.25rem; /* 4px */

--space-2: 0.5rem; /* 8px */

--space-3: 0.75rem; /* 12px */

--space-4: 1rem; /* 16px */

--space-5: 1.25rem; /* 20px */

--space-6: 1.5rem; /* 24px */

--space-8: 2rem; /* 32px */

--space-10: 2.5rem; /* 40px */

--space-12: 3rem; /* 48px */

--space-16: 4rem; /* 64px */

--space-20: 5rem; /* 80px */

}

```

Advanced Styling

#### Custom CSS

```css

/* Custom component styles */

.custom-product-card {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

border-radius: 12px;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.custom-product-card:hover {

transform: translateY(-5px);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}

```

#### Animation & Transitions

```css

/* Smooth animations */

.fade-in {

animation: fadeIn 0.6s ease-out;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.slide-in-left {

animation: slideInLeft 0.8s ease-out;

}

@keyframes slideInLeft {

from { opacity: 0; transform: translateX(-50px); }

to { opacity: 1; transform: translateX(0); }

}

```

E-commerce Integration

Product Display Components

#### Product Card

```jsx

// Enhanced product card

product={product}

showQuickView={true}

showWishlist={true}

showCompare={true}

imageHover="zoom" // zoom, overlay, none

priceDisplay="both" // regular, sale, both

badgePosition="top-left"

onAddToCart={handleAddToCart}

onQuickView={handleQuickView}

/>

```

#### Product Gallery

```jsx

// Product image gallery

images={product.images}

thumbnails={true}

zoom={true}

fullscreen={true}

autoplay={false}

dots={true}

arrows={true}

responsive={{

mobile: { thumbnails: false },

desktop: { thumbnails: true }

}}

/>

```

#### Product Information

```jsx

// Product details section

product={product}

showRating={true}

showReviews={true}

showSKU={true}

showAvailability={true}

variantSelector="dropdown" // dropdown, buttons, swatches

quantitySelector={true}

addToCartButton={{

text: "Add to Cart",

variant: "primary",

size: "large"

}}

/>

```

Shopping Cart Integration

#### Cart Drawer

```jsx

// Slide-out cart

position="right" // left, right

showOnAdd={true} // Auto-open on add to cart

showShipping={true} // Show shipping calculator

showCoupons={true} // Show coupon field

showRecommendations={true} // Related products

checkoutButton={{

text: "Checkout",

variant: "primary"

}}

/>

```

#### Mini Cart

```jsx

// Header cart icon

icon="shopping-bag" // shopping-bag, cart, basket

showCount={true} // Show item count

showTotal={true} // Show cart total

dropdownPreview={true} // Hover preview

position="top-right" // Dropdown position

/>

```

Checkout Process

#### Checkout Form

```jsx

// Multi-step checkout

steps={["shipping", "payment", "review"]}

guestCheckout={true}

expressCheckout={["paypal", "apple_pay", "google_pay"]}

addressAutocomplete={true}

realTimeValidation={true}

progressIndicator={true}

mobileOptimized={true}

/>

```

Publishing & Deployment

Preview & Testing

#### Preview Modes

1. Desktop Preview: Full desktop experience

2. Tablet Preview: iPad and tablet simulation

3. Mobile Preview: iPhone and mobile simulation

4. Live Preview: Real-time updates as you design

#### Testing Checklist

```

Pre-Launch Testing:

├── Visual Design

│ ├── All breakpoints look correct

│ ├── Images load properly

│ ├── Typography is readable

│ └── Colors match brand guidelines

├── Functionality

│ ├── All links work correctly

│ ├── Forms submit properly

│ ├── Cart functions work

│ └── Checkout process completes

├── Performance

│ ├── Page load speed < 3 seconds

│ ├── Images are optimized

│ ├── No console errors

│ └── Mobile performance is good

└── Accessibility

├── Alt text on images

├── Proper heading hierarchy

├── Keyboard navigation works

└── Color contrast is sufficient

```

Publishing Process

#### Deployment Steps

1. Final Review: Check all pages and functionality

2. Performance Audit: Run speed and accessibility tests

3. Backup Current: Save current live version

4. Deploy Changes: Push new design live

5. Monitor: Watch for any issues post-launch

#### Rollback Plan

```javascript

// Emergency rollback procedure

const rollbackPlan = {

detection: "Monitor for 30 minutes post-deploy",

triggers: [

"Page load errors",

"Broken functionality",

"Performance degradation",

"User complaints"

],

action: "Revert to previous version within 5 minutes",

communication: "Notify team and investigate issues"

};

```

Advanced Techniques

Custom Components

#### Creating Reusable Components

1. Design Component: Create your custom element

2. Define Properties: Set configurable options

3. Save to Library: Add to component library

4. Document Usage: Add usage instructions

5. Share with Team: Make available to others

#### Component Example

```jsx

// Custom testimonial component

quote="This product changed my life!"

author="Sarah Johnson"

role="Happy Customer"

avatar="/avatars/sarah.jpg"

rating={5}

layout="horizontal" // horizontal, vertical

theme="light" // light, dark

/>

```

Dynamic Content

#### DoingHub Data Integration

```jsx

// Dynamic product listing

{products.map(product => (

key={product.id}

product={product}

showQuickView={true}

onAddToCart={(product) => addToCart(product)}

/>

))}

```

#### Real-time Updates

```javascript

// Live inventory updates

const ProductCard = ({ product }) => {

const [inventory, setInventory] = useState(product.inventory);

useEffect(() => {

// Subscribe to inventory updates

const unsubscribe = subscribeToInventory(product.id, setInventory);

return unsubscribe;

}, [product.id]);

return (

);

};

```

Performance Optimization

#### Image Optimization

```jsx

// Optimized image component

src="/products/shirt.jpg"

alt="Premium Cotton Shirt"

width={400}

height={400}

formats={["webp", "jpg"]} // Multiple formats

sizes="(max-width: 768px) 100vw, 400px"

lazy={true}

placeholder="blur" // blur, color, none

/>

```

#### Code Splitting

```javascript

// Lazy load components

const ProductGallery = lazy(() => import('./ProductGallery'));

const ReviewsSection = lazy(() => import('./ReviewsSection'));

// Use with Suspense

}>

```

Best Practices

Design Guidelines

#### Visual Hierarchy

1. Primary CTA: Most prominent element on page

2. Secondary Actions: Supporting but less prominent

3. Navigation: Consistent and accessible

4. Content Flow: Logical reading pattern

5. White Space: Adequate breathing room

#### Color Usage

#### Typography

User Experience

#### Navigation Design

```

Navigation Best Practices:

├── Clear Labels: Use descriptive menu items

├── Logical Grouping: Group related items

├── Search Prominence: Make search easy to find

├── Breadcrumbs: Show user location

├── Mobile Menu: Hamburger or bottom nav

└── Consistent Placement: Keep navigation predictable

```

#### Form Design

#### Loading States

```jsx

// Loading state examples

{isSubmitting ? 'Processing...' : 'Add to Cart'}

{loading ? (

) : (

products.map(product => )

)}

```

Performance Guidelines

#### Core Web Vitals

```

Target Metrics:

├── LCP (Largest Contentful Paint): < 2.5s

├── FID (First Input Delay): < 100ms

├── CLS (Cumulative Layout Shift): < 0.1

├── TTFB (Time to First Byte): < 600ms

└── Speed Index: < 3.0s

```

#### Optimization Techniques

Accessibility

#### WCAG Guidelines

```

Accessibility Checklist:

├── Semantic HTML: Use proper HTML elements

├── Alt Text: Descriptive image alternatives

├── Keyboard Navigation: Full keyboard support

├── Color Contrast: Sufficient contrast ratios

├── Focus Indicators: Visible focus states

├── Screen Readers: Compatible with assistive tech

└── Error Messages: Clear, helpful error text

```

#### Implementation Examples

```jsx

// Accessible button

aria-label="Add Premium Cotton Shirt to cart"

aria-describedby="price-info"

disabled={outOfStock}

aria-disabled={outOfStock}

>

Add to Cart

// Accessible form

```

Troubleshooting

Common Issues

#### Design Problems

#### Functionality Issues

#### Performance Problems

Getting Help

#### Support Resources

#### Learning Resources

---

*Congratulations! You now have the skills to create beautiful, high-converting storefronts with Doing Studio. Remember, great design is an iterative process - start with the basics, test with real users, and continuously improve based on feedback and performance data.*

Your Design Journey:

1. Start Simple: Begin with a template and customize gradually

2. Focus on Users: Design for your customers' needs and behaviors

3. Test Everything: Preview on all devices and test functionality

4. Measure Performance: Monitor speed, conversions, and user feedback

5. Iterate & Improve: Continuously refine based on data and insights

*Happy designing! 🎨*