Brand Identity Blueprint Worksheet Brand Identity Blueprint
Digital Literacy: Web Design and Publishing
Name: ________________________________
Date: _________________________________
1. THE CORE MISSION
What is the primary goal of your portfolio? Are you seeking a specific college major, a freelance gig, or a full-time job in a particular industry?
2. ARTIFACT CURATION
Select 3-5 "hero" projects that showcase your best skills. Quality beats quantity.
1
Project Name
Key Skill Shown
2
Project Name
Key Skill Shown
3
Project Name
Key Skill Shown
3. BRAND ATTRIBUTES
Circle 3 words that describe the "vibe" you want your site to project:
Professional
Minimalist
Playful
Bold
Tech-Focused
Classic
Energetic
Sophisticated
Bio Draft (The "Elevator Pitch")
Mood Board Sketch
Sketch color palette ideas, font styles, or simple UI elements here
4. THE ESSENTIALS CHECKLIST
Professional Photo / Avatar
Updated Resume (PDF)
Contact Information / Socials
Clear Navigation Labels
Portfolio Strategy Slides Portfolio Pro
Branding & Strategy
Module 01: Defining Your Digital Identity
The 5-Second Rule
Who would you hire? First impressions are made in under 5 seconds.
Candidate A
Default fonts, generic layout, blurry profile picture, 15 different projects with no descriptions.
Candidate B
Clean typography, 3 curated "hero" projects, clear mission statement, easy navigation.
Candidate C
Neon colors, auto-playing music, broken links, but incredible technical skills hidden in a zip file.
How does a curated digital presence influence professional opportunities?
"Your portfolio is the story of your potential, told through your work."
Curation vs. Collection
A Collection is...
Everything you've ever made. The junk, the drafts, the masterpieces. It's overwhelming.
A Curation is...
Specific choices. The 3-5 projects that prove you can do the job you want.
<strategy>
"It is better to have three perfect projects than ten mediocre ones."
</strategy>
Personal Branding
Voice
How do you write? Academic? Casual? Technical? Experimental?
Visuals
What colors and fonts communicate "You"? Green/Sans-serif (Tech)? Cream/Serif (Art)?
Value
What is the "one thing" people should remember about you?
Today's Blueprint
1 Define your Target Audience
2 Curation: Pick your Top 3 Artifacts
3 Establish your Brand Mood
4 Draft your Elevator Pitch
Portfolio Architecture Slides Portfolio Pro
Blueprint & Architecture
Module 02: Designing the User Experience
Sprint: Speed Sketching
5 Sketches. 5 Minutes.
Don't think. Just draw layouts. Where does the menu go? Where's the big picture? How do we find your work?
Clock starts on next click...
Layout 1
Layout 2
Layout 3
Layout 4
Choose Your Path
Single Page
Smooth scrolling narrative
Great for small portfolios
Mobile-first friendly
Example: Personal resume / Bio sites
Multi Page
Detailed case studies
Better for SEO / Google
Professional organization
Example: Agency / Large product sites
Navigation Hierarchy
Sitemap.xml
HOME
Work / Portfolio
About Me
Contact
"Don't make your users hunt for your best work."
Phase 2: High-Fi Mockup
Transition from rough ideas to a structured blueprint. Every pixel matters now.
Define exact header height
Place every 'hero' project image
Determine font pairings (Headings vs Body)
Time to use the
Layout Blueprint Worksheet
Layout Blueprint Worksheet Layout Blueprint
UX Architecture & Information Design
SITEMAP_REV_02
NAME: ________________________________
1. SITE ARCHITECTURE
Map out your site's structure. Will it be a single scrolling page with anchors, or multiple linked pages?
HOME / INDEX
PORTFOLIO
Project 1
Project 2
ABOUT
CONTACT
2. SECTION INVENTORY
Primary Navigation Items
Home Page Hero Text
(Draft your main heading and sub-heading here)
3. LANDING PAGE WIREFRAME
Sketch the desktop layout. Indicate where images, text, and navigation will live. Use boxes for elements.
Primary Font
Secondary Font
Accent Color (Hex) Core Code Construction Slides Portfolio Pro
Core Code Construction
Module 03: Building with Semantic HTML & CSS
<main>
.container { ... }
Sprint: The Navigation Hub
The Navigation Challenge
By the end of this sprint, you must have a functioning, responsive navigation bar and a standard footer. No styles yet—just pure structure.
"If your users can't find the exit, they won't stay for the show."
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Think Semantically
Stop using div for everything. Use tags that tell a story.
<header>
Your identity and navigation.
<section>
A major block of content (e.g., "About Me").
<article>
A self-contained project or blog post.
Why does it matter?
Screen readers for accessibility
SEO (Google loves clean code)
Professional maintenance
Clean Style Sheets
Variables
:root { --brand: #3b82f6; }
Define your colors and fonts once. Change them everywhere in one click.
The Grid
display: grid;
Use modern layout tools. Avoid old hacks like floats or absolute positioning for main content.
Reset
* { margin: 0; box-sizing: border-box; }
Kill the default browser margins to gain total control over your layout.
Preparing Your Assets
Optimized Images
No 10MB JPGs! Resize your project screenshots to their display size before uploading.
Folder Hierarchy
Keep it clean: /css, /img, /js.
The Final Push
Use the Code Construction Checklist to verify your work before we move to polishing.
Code Sprint Checklist Code Sprint Checklist
Front-End Development & Code Organization
Phase 03: Construction
Student: _______________________
1. SEMANTIC HTML STRUCTURE
Header Section
Includes <nav>, logo/name, and primary links.
<header>
Hero/Intro Area
Includes main <h1> and your elevator pitch.
<section>
Project Gallery
Each project is wrapped in its own container tag.
<article>
Footer Section
Includes contact links, socials, and copyright notice.
<footer>
2. CSS FOUNDATION
CSS Reset (Margin/Padding to 0)
Variable colors defined in :root
Flexbox or Grid used for main layout
Typography (Font-family, Line-height)
3. ASSET INTEGRATION LOG
Asset Description File Format (WebP/SVG/PNG) Alt Text Written? YES / NO YES / NO YES / NO
4. BUG TRACKER
Record layout issues or broken code to fix in the "Premium Polish" phase.
Premium Polish Slides Portfolio Pro
Premium Polish
Module 04: Elevating with Micro-Interactions
The 1% Difference
What makes a site feel "expensive"? It's rarely the big graphics. It's the micro-interactions .
Analysis Task:
Visit an award-winning site. Watch a button. How does it react when you hover? Is it instant, or does it transition ?
Hover States
Smooth Scrolling
Subtle Shadows
The Power of "Transition"
TRANSITION_PROPERTIES
.button {
background: #1e293b;
transition: all 0.3s ease;
}
.button:hover {
background: #ec4899;
transform: translateY(-5px);
}
1. The Property
What are we changing? (color, background, opacity)
2. The Duration
How long does it take? (0.2s - 0.5s is the "sweet spot")
3. The Timing Function
How does it move? (ease-in, ease-out, cubic-bezier)
Depth & Elevation
No Shadow
Flat
Functional but basic.
box-shadow
Elevated
Draws the user's focus.
Layered
Premium
Soft, colored shadows.
The Polish Pitfalls
Too Much Motion
If everything is moving, nothing is important. Avoid spinning, bouncing, or flashing elements.
Too Slow
Transitions over 0.6s feel "laggy." Keep them snappy and responsive to the user's action.
"Interaction should enhance, not distract."
Your Turn: The Polish Lab
Today, we aren't building structure. We are tuning the experience.
Apply 3 hover states
Add smooth-scroll behavior
Implement custom button shadows
Time to Polish
"Good design is obvious. Great design is transparent."
Critique Launch Slides Portfolio Pro
Critique & Launch
Module 05: Quality Assurance & Final Deployment
The Usability Lab
The Rule of Silence:
Watch a peer try to find your resume on your site. You cannot speak. You cannot help them. Note every time they hesitate or look confused.
"If you have to explain it, it's not well-designed."
Giving Better Feedback
Unhelpful Feedback
"I like the colors."
"It looks cool."
"I don't know, it's fine."
"The fonts are weird."
Actionable Feedback
"The contrast on the sub-header makes it hard to read."
"I clicked twice before I realized that was a button."
"The images took 3 seconds to load on my screen."
The QA (Quality Assurance) Sprint
Dead Links
Click every button. Check every social link. Do they all go exactly where they should?
Mobile View
Resize your browser. Does the layout break? Is the menu still reachable?
Copy Check
Typos kill professional credibility. Read every word out loud to catch errors.
Final Launch Standard
Branding
Cohesive color palette
Consistent font pairings
Professional bio copy
Functionality
Valid Semantic HTML
Optimized image assets
Working nav & contact links
Mission Complete
Today is the Final Refinement.
Once you implement the feedback from your usability test, you are ready for the global launch of your digital identity.
Ready for Usability Lab Session 01
Usability Feedback Form Usability Lab Form
UX Research & Peer Critique
TEST_SESSION: ________
DESIGNER: _________________
TESTER: ___________________
1. TASK PERFORMANCE
Designer: Do not speak. Tester: Attempt the following tasks and rate the difficulty.
Task A: Find and open the Resume PDF
EASY
NEUTRAL
DIFFICULT
Task B: Locate "Project #1" and view details
EASY
NEUTRAL
DIFFICULT
Task C: Find a way to "Contact" the designer
EASY
NEUTRAL
DIFFICULT
2. BRAND CONSISTENCY
Aesthetic Rating (1-5)
1
2
3
4
5
Keywords for this brand:
3. OBSERVER NOTES & SUGGESTIONS
Technical Issues (Bugs, broken links, image lag)
Interaction Feedback (How it feels to navigate)
The "One Big Thing" to fix before launch
4. REFINEMENT ROADMAP Portfolio Launch Rubric Launch Rubric
Final Assessment Standards
/100
I. Brand Identity & Strategy (25 pts)
UNSATISFACTORY (0-15)
Weak or inconsistent personal brand. Missing bio, resume, or hero artifacts. Tone is unprofessional.
PROFICIENT (16-20)
Clear brand identity. Cohesive colors and fonts. Core content present (bio, 3+ artifacts).
EXEMPLARY (21-25)
Sophisticated personal brand. Exceptional curation of work. Bio is compelling and targeted.
II. UX Architecture & Navigation (25 pts)
UNSATISFACTORY (0-15)
Navigation is confusing or broken. Layout feels cluttered. Poor hierarchy of information.
PROFICIENT (16-20)
Intuitive navigation. Clear visual hierarchy. Effective use of white space and grouping.
EXEMPLARY (21-25)
Masterful UX flow. Navigation feels effortless. Layout adapts beautifully to content needs.
III. Technical Code Quality (25 pts)
UNSATISFACTORY (0-15)
Non-semantic HTML. Messy CSS. Non-responsive layout. Many broken links or errors.
PROFICIENT (16-20)
Valid Semantic HTML. Modular CSS. Responsive behavior. 100% working internal/external links.
EXEMPLARY (21-25)
Advanced semantic structure. Use of CSS variables. Optimized assets. Perfect code organization.
IV. Premium Polish (25 pts)
UNSATISFACTORY (0-15)
No transitions or hover states. Assets are unoptimized/blurry. No evidence of refinement.
PROFICIENT (16-20)
Appropriate use of transitions and hover states. Fast load times. Clean typography.
EXEMPLARY (21-25)
Exceptional micro-interactions. High-fidelity visual finish. Site feels truly "premium."
Instructor Feedback & Launch Approval
DATE: ______________ SIGNATURE: ________________________________
