UI and UX

Day - 3
 UI and UX
Day - 3

Visual Design Standards – Visual Design Principle

– UI Elements – UI Components – Variants -
Design Patterns
What is Visual Design Standards
• Visual standard design refers to the guidelines and
principles used to create consistent, aesthetically
pleasing, and functional visual elements within a
product, especially in user interfaces (UI).

• It ensures that users have a seamless experience and are

able to easily navigate and interact with the interface.

• Visual standard design involves elements like color

schemes, typography, iconography, and layout, all
of which work together to create a unified and
professional appearance.
 Principles of visual standard
design
• Consistency: Maintain uniformity in design elements (buttons, icons, fonts) throughout the interface. Consistency
reduces cognitive load, making it easier for users to understand and navigate.

• Contrast: Use contrast to highlight important elements and ensure legibility. High contrast between text and
background helps with readability, while contrast in colors can emphasize call-to-action buttons.

• Alignment: Proper alignment of elements helps in organizing the layout in a structured way, ensuring the UI looks
neat and uncluttered.

• Hierarchy: Visual hierarchy ensures that important elements, such as headings or buttons, stand out, guiding the
user's attention in the correct order.

• Spacing: Adequate padding and margins are necessary to avoid visual clutter and make content easily digestible.
Well-spaced elements feel more comfortable to interact with.

• Color Theory: Use color schemes thoughtfully to evoke certain emotions or convey meaning (e.g., red for warnings,
blue for trust). Make sure there's enough contrast for accessibility.

• Typography: Choose legible fonts and use a limited set of typefaces. Consistency in font sizes, line heights, and styles
ensures readability.

• Responsiveness: Ensure that visual elements adapt well to different screen sizes and devices, maintaining the
integrity of the design across various contexts.
Reading Content

Starting
 Scale
• Scale in visual design involves using relative size
to communicate importance and rank within a
composition.

• Important elements are made larger than less

significant ones, making them more noticeable.

• A visually appealing design typically uses up to

three different sizes to create variety and establish
a visual hierarchy.

• By emphasizing essential elements through size,

users can easily understand and interact with the
design Medium for iPhone: Popular articles are visually larger than
other articles. The scale directs users to potentially more-
interesting article.
 Visual Hierarchy
• Visual hierarchy is about guiding the user's eye to
focus on important elements first.
• It's achieved by using various design cues like
size, color, spacing, and placement.
• A good layout with clear visual hierarchy makes it
easy for users to understand the content and its
importance.
• One can use different font sizes, bright colors for
important items, and muted colors for less
important ones to create a clear hierarchy.
• Including small, medium, and large elements in
the design helps establish a balanced scale and
reinforce the visual hierarchy..
Medium mobile app: There is a clear visual hierarchy of
title, subtitle, and body text. Each component of the article
is in a type size equal to its importance.
Visual Hierarchy

Uber mobile app: The visual hierarchy is clear in Uber’s

mobile app. The screen is split in half between the map
and input form (bottom half of screen), which enforces
the thought that these components are equally important
to the user. The eye is immediately drawn to the Where
to? field because of its gray background, then to the
recent locations below it, which are slightly smaller in
font size
 Balance
• Balance in visual design is like a seesaw, where you arrange
elements to create a pleasing proportion.

• It means having an equal distribution of visual elements on both

sides of an imaginary line running through the middle of the
screen. This line can be vertical or horizontal.

• To achieve balance, you need to consider the size and space

taken by elements, not just their number.

• If one side has a large element and the other side has a small
one, the design feels unbalanced.
 Types of Balance
• Symmetrical:
• Elements are evenly distributed on both sides of the central axis.
• Symmetry is calm and static

• Asymmetrical:
• Elements are unevenly distributed, creating a sense of movement and
energy.
• Asymmetry is dynamic and engaging

• Radial:
• Elements radiate out from a central point, guiding the eye to the center
of the composition.
• Radial balance always draws attention to the center.
Balance

The Hub Style Exploration: The

composition feels stable, which is
especially appropriate when you’re
looking for a job you love. The balance
here is symmetrical. If you were to draw
an imaginary vertical axis down the
center of the website, elements are
distributed equally on both sides of the
axis.
 Contrast
• Contrast is a powerful principle in design that highlights
differences between elements.

• It involves placing visually dissimilar things together to show that

they belong in different categories or serve distinct purposes.

• For example, using bright colors like red to signify deletion in a UI

design makes the element stand out from the rest, emphasizing
its unique function.

• Contrast helps users quickly identify and understand important

information, making the design more effective and user friendly
 Contrast
Often, in UX the word “contrast”
brings to mind the contrast between
text and its background.

Sometimes designers deliberately

decrease the text contrast in order to
deemphasize less important text.

But this approach is dangerous —

reducing text contrast also reduces
legibility and may make your content
inaccessible.
Greenhouse Juice Co: The legibility of the
Reminders app on iOS: The color red, which
has high contrast to its surrounding context,
Use a color-contrast checker to text on the bottle relies on the color of juice.
Although the contrast works beautifully for
is reserved for deleting. ensure that your content can still be some juices, labels for bottles with light
colored juices are nearly impossible to read.
read by all your target users.
 Gestalt Principles
• Gestalt principles are a set of ideas from psychology that explain how humans make
sense of complex images.

• Instead of seeing individual parts, our minds automatically organize them into a
whole.

• This means we tend to perceive the complete picture rather than separate elements.

• These principles include similarity, continuation, closure, proximity, common region,

figure/ground, and symmetry and order.

• One important principle for UX is proximity, which means that items visually close
together are seen as belonging to the same group.

• These principles help designers create visuals that are easy for users to understand
and navigate.
Gestalt Principles

We also often see applications of the Gestalt theory

in logos. In the NBC logo, there is no peacock in the
white space, but our brain understands there to be
one.
 UX Design Principle:
• The seven principles of universal design are:
• Equitable use

• Flexibility in use

• Simple and intuitive use

• Perceptible information

• Tolerance for error

• Low physical effort

• Size and space for approach and use.

 Equitable use
• The design should be usable by all individuals,
regardless of their age, abilities, or background.
• It ensures that everyone can access and interact with
the product or environment in a fair and inclusive
manner.
Flexibility in Use
• The design should accommodate a wide range of individual
preferences and abilities.
• It offers multiple ways to interact with the product or
environment, allowing users to choose the approach that
suits them best.
 Simple and intuitive use
• The design should be easy to understand and use,
requiring minimal effort to figure out its operation.
• Clear instructions and logical layouts make it intuitive
for users to navigate and perform tasks.

Perceptible Information:
• The design should present information effectively to all users,
regardless of their sensory abilities.
• It ensures that important information is available through multiple
senses (e.g., visual, auditory, tactile) so that users can perceive
and comprehend it easily.
 Tolerance for Error:
• The design should minimize the risk of errors and
provide ways to recover from mistakes.
• It avoids critical consequences for unintended actions
and offers clear feedback to guide users in correcting
errors.
Low Physical Effort:
• The design should require minimal physical effort to use.
• It considers the needs of users with varying physical
abilities, making interactions comfortable and not overly
demanding on strength or dexterity.
 Size and Space for Approach
and Use:
• The design should provide adequate space and reach
ranges to accommodate users of different sizes and
mobility.
• It ensures that individuals using mobility aids or who
have limited reach can comfortably access and use the
design.
Reading Content

Ending
 UI Elements
• UI elements are the building blocks of a user interface, the individual parts
that users see and interact with on websites, apps, and other digital product
• Buttons
• Text Fields
• Checkboxes
• Radio Buttons
• Icons
• Dropdown Menus
• Sliders
• Tabs
• Tooltips
• Cards
 UI Elements
• Buttons: • Dropdown Menus:
• Buttons are like interactive squares or circles that you can click or tap • Dropdown menus are like hidden lists that appear when you click on a
on. They perform actions like "Submit," "Next," or "Cancel." button or a label. They show you more options to choose from.

• Text Fields: • Sliders:

• Text fields are areas where you can type in text, like when you search • Sliders are like bars or scales that you can slide left or right to adjust
for something or enter your name. settings or choose a value.

• Checkboxes: • Tabs:
• Checkboxes are like little boxes that you can tick or un-tick tomake a • Tabs are like labeled sections that you can click on to switch between
choice from a list of options. different parts of a website or app.

• Radio Buttons: • Tooltips:

• Radio buttons are like small circles or dots that you can select, but you • Tooltips are like small pop-up boxes that show extra information when you
can only choose one option from a group of choices. hover your mouse over something.

• Icons: • Cards:
• Icons are small pictures or symbols that represent actions or ideas, like • Cards are like little containers that hold information, like a picture, a title,
a magnifying glass for search or a home symbol for the homepage. and a short description, neatly displayed together.
UI Components
• A component is a reusable design element that can be
used multiple times across a project. When you create a
component, you define a "master" version of an
element. Any instance of that component inherits
properties from the master.
Button

Login Button Sign Up Button ………….. N Button

UI Components
• Master and Instances:
• The master component acts as the source, and changes
made to it reflect in all its instances.
• Instances are copies of the master that can be customized
while still maintaining a link to the original.
• Instances can be overridden with changes like text,
colors, and images without breaking their connection to
the master
Example of UI Component
Click Buttons – Start Query , Return
Trip , Reset , Search , Door – to – Door
TimeTable , Ticket Shop, Info on the offers
, Dialogue , Travelling in Europe, Guests
from abroad, Shopping Cart , Options,
Radio Buttons – Today , Tomorrow ,
Departure , Arrival , Normal , light

Text Field – Departure , Destination ,

Via , Travel Date , Time , Search

labels– Departure , Destination , Via ,

Travel Date , Time , Search, Swiss Federal
Railway , SBB Travel Online,
Variants
• Variant refers to an alternative version or style of a UI
component that maintains the core functionality and
structure of the original component while adapting its
appearance or behavior for specific contexts or use
cases.
Extra Contents For Your
Reference

STARTING
 UI Components
Layout Components
These are components that help structure the page and organize content.

Typography Components
These components help organize text elements on the UI.

Interactive Components
These components allow the user to interact with the interface.

Navigation Components
Help users move around and find content or features within a product.

Media and Content Components

Components that display and handle different media types like images, videos, and audio.

Feedback Components
Provide feedback to users on their actions or system status.

Forms and Input Components

Allow users to input or edit information.

Data Visualization Components

Components that display complex data in an easy-to-understand visual format.

Social and Interactive Components

Enable social interaction and user engagement.

Utility Components
Provide small but essential functions to enhance the user experience

Accessibility and Responsive Components

Ensure the interface is usable by everyone, including people with disabilities, and is responsive to various screen sizes.
Layout Components:-
• Frames: The primary building block for creating
layouts, used as containers or canvases.
• Grids: Grid systems for aligning and organizing
content.
• Auto Layout: Flexible layouts that adapt dynamically
to content changes.
• Constraints: For responsive design, ensuring elements
resize correctly.
Typography Components
• Text Blocks: Customizable text elements for headings,
paragraphs, or labels.
• Text Styles: Reusable styles for fonts, sizes, colors, and
line heights.
• Dynamic Text Fields: Input fields for prototyping user
input.
Interactive Components
• Buttons: Primary, secondary, and tertiary buttons with hover,
active, and disabled states
• Checkboxes and Radio Buttons: For binary or single-choice
options.
• Toggles and Switches: For on/off states.
• Dropdown Menus: Collapsible lists for multiple choices.
• Text Inputs: For forms, with placeholder text, error states, and
validations.
• Sliders: For selecting a value from a range.
• Search Bars: Interactive components with icons and input
fields.
Navigation Components
• Top Navigation Bars: Fixed headers with links, menus,
or search options.
• Sidebars: Expandable or collapsible menus for
navigation.
• Breadcrumbs: For hierarchical navigation.
• Tabs: Organized content into categories.
• Pagination Controls: For navigating through data or
pages.
Media and Content Components
• Cards: Modular containers for displaying text, images,
or actions.
• Image Placeholders: Frames for inserting images or
media.
• Video Thumbnails: Represent video content with
overlays (e.g., play buttons)
• Carousels: Sliding panels for showcasing multiple
items.
• Avatars: User profile images, often circular.
Feedback Components
• Tooltips: Small pop-ups providing additional context or
information.
• Modals and Dialogs: Overlays for actions,
notifications, or inputs.
• Toast Notifications: Brief, non-intrusive alerts.
• Progress Indicators: Spinners, bars, or loaders
showing task completion.
• Alerts: Messages indicating success, error, or warning
states
Forms and Input Components
• Form Fields: Input boxes, dropdowns, and text areas.
• Validation Messages: Inline hints, errors, or success
indicators.
• Date Pickers: Visual calendars for selecting dates.
• File Uploads: Drag-and-drop or click-to-upload fields.
Utility Components
• Icons: Custom or library-based icons (e.g., Material
Icons, Font Awesome)
• Spacers: Invisible elements for creating padding or
margins
• Status Indicators: Visual markers for states like
online, offline, busy, etc.
• Badges: Small labels or numbers for notifications or
categories
Accessibility and Responsive
Components
• Keyboard Shortcuts: For prototyping user inputs via
keyboard.
• ARIA-Labelled Components: Accessible designs for
screen readers.
• Responsive Frames: Components that adapt to
different screen sizes.
Social and Interactive
Components
• Like Buttons: Heart or thumbs-up icons.
• Comment Sections: Placeholder for user comments.
• Share Buttons: Icons for sharing content to social
media.
• Activity Feeds: List-style components showing
updates or logs.
 Variants
• A variant allows you to group similar components into a single parent
component, making it easier to manage related design options, such as
different states or styles.
• Variants organize multiple components (e.g., a button in default, hover,
and active states) under a single component with different properties
• Variants have properties (e.g., State: Default, Type: Primary)
• Instead of managing multiple separate components, you manage them
in a single place.
• For a button, you can create variants for its states:
• Default
• Hover
• Pressed
• Disabled
 Variant Types
• State-Based Variants:
• Variants can represent different states of an element.
• For eg : Button State
•State: Default
•State: Hover
•State: Pressed
•State: Disabled

• Type-Based Variants:
• Variants can differentiate between types of the same
component.
• For eg: Button Types
•Type: Primary
•Type: Secondary
•Type: Tertiary
 Variant Types
• Size Variants
• Variants can represent the same component in different sizes.
• Example: Button Sizes:
• Size: Small
• Size: Medium
• Size: Large

• Color Variants
• Variants can represent different color schemes for a component.
• Example : Theme Variants
• Color: Light
• Color: Dark
• Color: Accent
 Variant Types
• Interaction Variants:
• Variants can showcase interactions like toggles or switches.
• Example: Toggle States
•Toggle: On
•Toggle: Off

•Device or Platform Variants:

•Variants can adapt a component to different device types or
platforms.
•Example: Device Adaptations
•Device: Desktop
•Device: Tablet
•Device: Mobile
 Variant Types
• Shape Variants:
• Variants can represent the same component in different shapes or
styles.
• Example: Button Shapes
• Shape: Rounded
• Shape: Square

• Content Variants:
• Variants can manage components with varying content lengths or types.
• Example: Content Variants
• Content: Icon Only
• Content: Text Only
• Content: Icon + Text
 Variant Types
• Alignment Variants:
• Variants can reflect alignment or positioning differences.
• Example: Alignment Variants
• Alignment: Left
• Alignment: Center
• Alignment: Right

• Custom Variants:
• Example: Custom Property
• Property: Role
• Role: Admin
• Role: User
Extra Contents For Your
Reference

ENDING
 UI Design Patterns
• User interface (UI) design patterns are
reusable/recurring components which designers use to
solve common problems in user interface design.

• These patterns provide standardized ways to address

recurring design challenges, ensuring that interfaces are
both functional and user-friendly

• Designers can apply them to a broad range of cases,

but must adapt each to the specific context of use.
 Common UI Design Patterns
• Navigation Menus: Structures like top navigation bars or side menus that
help users move through different sections of an application or website.

• Breadcrumbs: A trail that shows users their current location within a site's
hierarchy, aiding in navigation and understanding of the site's structure.

• Modals/Pop-ups: Overlays that capture user attention for tasks like

confirmations or alerts without navigating away from the current page.

• Infinite Scrolling: Automatically loads more content as the user scrolls down,
commonly used in social media feeds.

• Form Validation Indicators: Real-time feedback mechanisms that inform

users about errors or successful inputs in forms.
Bread Crumbs
Navigation Pane
Navigation

Use linked labels to provide

secondary navigation that
shows the path from the front
to the current site page in the
hierarchy.
Modals/Pop-ups:
Modals/Pop-ups:
 Infinite Scrolling
• Infinite Scroll · Full page demo

Example of Infinite Scrolling

Question : 1
For creating website like Instagram what are
the empathy techniques should be followed?
User Interviews
Conduct one-on-one interviews with
potential users (content creators,
casual users, influencers,
businesses).

Ask about their social media habits,

frustrations, and expectations (e.g.,
what they like/dislike about
Instagram).

Example questions:
1. What motivates you to post on
Instagram?

2. What frustrates you the most when

using social media?

3. How do you engage with others

(likes, comments, DMs, stories,
Empathy Mapping
Create an Empathy Map to visualize
what users think, feel, say, and do
while using a social media app.

•Example:

1. Think: “Will my post get enough

engagement?”

2. Feel: Excited to share content but worried

about validation.

3. Say: “I love posting stories but hate the

algorithm changes.”

4. Do: Scroll endlessly, engage with content,

post stories.
User Personas
Define different user types based on
behavior and motivations.
Example :

Casual User: Uses the app to stay

connected with friends and family.

Influencer: Focuses on
engagement, brand collaborations, and
monetization.

Business Owner: Uses the

platform for marketing and customer
engagement.
 User Journey Mapping
How they find your platform.
Discovery

Signing up, setting up a profile.

Onboarding Map the end-to-
end experience
Content Uploading photos, videos, stories. of a user on your
Creation platform.
Likes, comments, messages,
Engagemen
shares.
t

Retention

What keeps them coming back?

 Contextual Inquiry

• Observe how users engage with Instagram and

other social media in real life.

• Analyze their scrolling habits, interaction patterns,

and feature preferences.
Testing & Feedback
• Test different UI/UX elements (e.g., feed layout, post
formats, interaction buttons).
• Get feedback on what users find intuitive or
confusing
 Competitive Analysis
• Study Instagram, TikTok, Snapchat, and other
platforms.

• Identify gaps or pain points that your platform

can solve.
Question 2
Design a game storming and
brainstorming session for a fitness app
creation ?
Brainstorming
• 📜 Brainstorming Session Plan for a Fitness App
• 📅 Duration: 90 Minutes
• 👥 Participants: UX Designers, Developers, Fitness
Experts, End-Users
• 🛠 Tools: Miro, FigJam, Figma, Whiteboard, Sticky
Note
🕒 Session Breakdown : 90 Minutes
1. Introduction & Goal Setting (10 min) ⏳
2. Understanding Users & Pain Points (15 min) 🔍
3. Idea Generation (30 min) 💡
4. Idea Prioritization (20 min) 🌟
5. Wireframing & User Flows (10 min) 📲
6. Wrap-up & Next Steps (5 min) ✅
1. Introduction & Goal Setting
(10 min) ⏳
📌 Objective: Define the purpose of the session.

Explain the session's goal:

"We are here to brainstorm ideas for a fitness app that keeps
users motivated and engaged.“

Set rules: No idea is bad, encourage quantity over

quality, and build on each other’s ideas.
2. Understanding Users & Pain
Points (15 min) 🔍
📌 Objective: Identify target users and their challenges.
Who are the users? (Beginners, athletes, busy
professionals)
What are their pain points?
• Lack of motivation
• Difficulty in tracking progress
• No personalized workout plans
Use Empathy Mapping: Identify what users Think,
Feel, Say, and Do
3. Idea Generation (30 min) 💡
📌 Objective: Generate a variety of innovative ideas.

💭 Techniques Used:

✅ Mind Mapping (10 min) – Expand ideas from “Fitness App” (Workouts, Social Features,
AI, Gamification).

✅ Crazy 8’s (10 min) – Each participant sketches 8 UI ideas in 8 minutes.

✅ SCAMPER (10 min) – Modify existing fitness apps:

• Substitute: Replace traditional workout plans with AI-driven suggestions.

• Combine: Merge workouts with AR-based gamification.

• Adapt: Introduce social challenges (e.g., step challenges with friends).

4. Idea Prioritization (20 min) 🌟
📌 Objective: Identify the best and most feasible ideas.

✅ Dot Voting (10 min) – Participants vote for their top 3 ideas.

✅ MoSCoW Prioritization (10 min) – Categorize ideas into:

• Must-have: Core features (e.g., workout tracker, AI coach).

• Should-have: Recommended features (e.g., sleep tracking, meal planner).

• Could-have: Optional (e.g., AR-based challenges).

• Won’t-have (for now): Ideas for future phases.

5. Wireframing & User Flows (10
min) 📲
📌 Objective: Visualize key user interactions.

• Sketch rough wireframes of essential screens (e.g., home

screen, workout selection).

• Map the user journey (Onboarding → Selecting a workout →

Tracking progress).
6. Wrap-up & Next Steps (5 min)
✅
📌 Objective: Summarize key takeaways and define
action items.

• Recap the best ideas and decisions made.

• Assign next steps (e.g., refining wireframes, gathering

user feedback).

• Thank participants for their input! 🎉

🎯 Outcomes of the Brainstorming
Session
✅ User Persona with identified pain points

✅ A pool of creative and innovative ideas

✅ Prioritized feature list (Must-have, Should-have,

Could-have)

✅ Basic wireframes & user flow diagrams

✅ Defined next steps for prototype development

GameStorming
• 🎮 Gamestorming Session for Building a Fitness
App

• 🕒 Duration: 90 minutes
•
👥 Participants: 4-10 people
•
🎯 Goal: Use fun, game-based techniques to ideate and
develop a unique fitness app concept.
🔥 Session Flow (90 min)
1️⃣Warm-Up (10 min) – The Fitness Persona Challenge

2️⃣Main Ideation (40 min) – Game-Based Brainstorming

3️⃣Prototype & Wrap-Up (40 min) – Visualizing the App

1️⃣Warm-Up (10 min) – The Fitness
Persona Challenge
🎯 Goal: Identify different types of fitness app users.
How to Play:
• Each participant picks a random persona card (e.g., "Gym Rat," "Busy
Professional," "Lazy Couch Potato," "Elderly User").

• They describe a day in their persona's life and their fitness

struggles.

Discuss:
What would help them stay active?
🎮 Why It Works:
✅ Builds empathy for users
✅ Helps target the right audience
2️⃣Main Ideation (40 min) – Game-
Based Brainstorming
🎲 Game 1: Feature Battle Royale (20 min)
• 🎯 Goal: Generate & compete with the best app features.
• 🔹 How to Play:
1.Each player writes 3 unique features for the fitness app (e.g., AI coach, VR
workouts, fitness duels).
2.Shuffle and reveal features randomly.
3.Tournament-style battle: Players debate and vote on which features win each
round based on:
1. 🎉 Fun factor
2. 🛠 Feasibility
3. 📈 User engagement
4. The final feature(s) become core ideas for the app.
• 🎮 Why It Works:
✅ Encourages fast idea generation
✅ Competitive + fun decision-making
2️⃣Main Ideation (40 min) – Game-
Based Brainstorming
🎲 Game 2: The Wheel of Chaos (20 min)
• 🎯 Goal: Add creative twists to app ideas.
• 🔹 How to Play:
1.Spin a digital/physical wheel with surprise constraints like:
1. “No Screen” Mode – Design a voice-based fitness app.
2. “Zombie Mode” – Users must exercise to survive a zombie invasion.
3. “Multiplayer Mode” – Workouts become live competitions.
2.Teams must modify their fitness app based on the spin.
3.Share ideas and vote on the best twist.
• 🎮 Why It Works:
✅ Pushes teams to think outside the box
✅ Gamifies fitness challenges
3️⃣Prototype & Wrap-Up (40 min) –
Visualizing the App
🎨 Game 3: Fitness App Storyboarding (20 min)

• 🎯 Goal: Sketch the user journey for the fitness app.

• 🔹 How to Play:
1.Draw 4-6 key screens of the app (e.g., Sign-up, Workout, Progress Tracker).
2.Use stick figures, icons, or wireframes—no artistic skills needed!
3.Explain the flow: How does a user complete a workout?

• 🎮 Why It Works:
✅ Translates abstract ideas into tangible concepts
✅ Helps visualize the final product
3️⃣Prototype & Wrap-Up (40 min) –
Visualizing the App
🎤 Game 4: The Pitch Challenge (20 min)
• 🎯 Goal: Sell the fitness app in a fun way.

• 🔹 How to Play:
1.Each team gets 3 minutes to pitch their app like a game trailer.
2.Use dramatic storytelling, sound effects, or role-playing.
3.The audience votes on the most exciting idea.

• 🎮 Why It Works:
✅ Makes ideation feel like a game show
✅ Encourages creative thinking & storytelling