week 6 | online | 2.23–3.1

📌 Weekly Structure (applies every week)

Week 6 Links & Notes

Live Sessions This Week:

👉 Join Live: Mon 2.23 @ 4PM (week 6 review)→ 🎥 [Join Here]
Will be recorded for those unable to attend live.

Please note that this week’s live session has been moved to 4PM on Monday.

🎥 Watch: Mon 2.23 Weekly Review Recording → [Watch Here] 

Looking Ahead (Week 7)
Next live (recorded) session: Mon Mar 2nd @ noon 

This week’s deadlines:
Monday, Mar 2nd @ noon

  • Blog 2: Selecting and Analyzing Your Website’s Content – post to D2L “Blog 2” Discussion Board. If you post to Medium, please upload link to D2L.
  • P1 Process Work Due:
    – Persona: Submit 1 user persona to your Project 1 Medium Story.
    –2 Style Tiles: Submit 2 style tiles to your Project 1 Medium Story. Each should be different in type, color, image, keywords.
    – Storyboard + Prototype in Adobe XD (post prototype to D2L) – Prepare a Storyboard (discord prompt) (6 sections) and use it to guide your prototype. Download Adobe XD and build your prototype. Choose either Desktop or Mobile format for your design. Desktop is recommended.
  • Share your prototype to D2L > P1 Prototypes – User Testing
    To share an Adobe XD prototype link, switch to Share mode, select User Testing or Design Review in the right-hand panel, set permissions (e.g.”Anyone with the link”), and click Create Link. 
  • Discord Prompt #3 – note changes to Teams are listed below

Last week, we began on P1 ideation
Next week, we begin our Project 1 mockup design. 

Weekly Content

Week 6 (All items need to be complete by end of week):

SECTION I – Prototyping + Float/Position/Layout

  1. Download Adobe XD
  2. Watch AdobeXD Storyboarding to Prototyping Videos (31m4s)
  3. Review Prototyping Resources
  4. Lecture: Float and Position (videos – 42m27s)
  5. Review Float and Position Resources
  6. Lecture: Layout (videos – 10m22s)
  7. Review Layout Resources
  8. Read Chapter 15 in Duckett’s HTML & CSS. (Be sure you are caught up on Ch 1, 2, 3, 4, 5, 10, 11, 12, 13, 18, pp.183–188 + pp. 407–416 + pp.431–440)

    SECTION II –  Project 1 

  9.  Continue Project 1: Typographic Storytelling
  10. Due Mon. Project 1 Process: 1 persona to Medium
  11. Due Mon. Project 1 Process: lo-fi prototype for user testing: Set up links and prepare questions to ask users that test out your design. Homepage with 6 sections (header + 4 section minimum + footer). 
  12. Due Mon. Project 1 Process: 2 style tiles to Medium (should include typographic plan)
  13. Due Mon.: Discord Prompt 4: storyboard 
  14. Due next Wed. 3.4: User Testing on D2L for all members of group by next Wed@noon—details next week


    SECTION III – Software

  15. Intro to Webflow – Part 1 (videos – 34m22s ) – accept Webflow invitation in your email inbox. 
  16. Float Demo (2m video below)

SECTION I – Web Concepts

2. Storyboarding → Prototyping

This week we move through one continuous process: Storyboards/Wireframes → Prototypes. Think of your storyboard and early wireframe as the structural planning phase… where you organize content, establish hierarchy, and shape the reader’s journey for a one-page scrolling experience. You will first map this out visually (Illustrator is fine for layout thinking), then bring that structure into Adobe XD to build your working prototype. These are not separate exercises… they are connected steps in designing a clear, intentional user experience. Strong structure now will make your final site significantly more effective.

Storyboard/Wireframe focus (Illustrator): content flow, hierarchy, pacing (share in Discord)
Prototype focus (Adobe XD): interaction, transitions, user testing

3. Prototyping Resources:

13. Discord Prompt #3: Storyboards

2pt (reminder: these are not accepted late) 

Note on teams: Due to participation, I am moving team 3 members to other teams. Please note the changes to your team below. 

#team1: Savannah Almeida, Ashlyn Lucas, Callie Johnson, Jenna Schneider, Aniya Mike
#team2: Brock Anderson, Matt McDonnell, Audric Pastor, Nia Blanco, Noah Halsted
#team3: moved to other teams (we will no longer use this team)
#team4: Nyx Bernoskim, Kayleigh Harper, Anna Raffaele, Emily Gasher, Andy Montejano

Before moving into Adobe XD, share your storyboard with your peers for feedback. This will help you refine your content structure, layout, and user flow before prototyping. This is your chance to get fresh eyes on your work! Thoughtful feedback now will make your prototyping phase much smoother.

Prompt: (1pts):

1️⃣ Post a screenshot or export jpg/png of your storyboard (from Illustrator, paper sketch, or any digital tool you used). No linking, just a text-based image.

2️⃣ Briefly explain your approach – answer one:

      • How did you break up your content across sections?
      • Did you experiment with different typographic variations for meaning?
      • How do you imagine the user moving through the story?

3️⃣ What’s one area you’re unsure about? (E.g., “Does my intro feel engaging?” or “Should I structure my text differently in Section 3?”)

Participation (1pt): Look at your peer’s storyboard and give feedback!

  • Does their layout structure make sense?
  • Are there sections that could flow better?
  • Do any typography choices help or confuse the meaning?
  • Suggest one thing they might refine before moving into XD.

4. Float and Position

As we transition into Webflow this week, you’ll notice that many modern layouts rely on tools like Quick Stack, Flexbox, and Grid. However, before we move fully into those systems, it’s important that you are introduced to 2 foundational CSS concepts: floats and positioning.

These techniques are part of the historical backbone of web layout. While we will not rely on them as our primary layout method this semester, understanding what they do… and where they still appear… will make you a more capable designer. You will encounter floats and positioning in scenarios such as wrapping text around images or placing elements precisely within a container. We will use floats/positions in smaller moments, rather than for layout systems.

This video series is meant to build awareness, not mastery. Focus on understanding what each method does, when it is typically used, and how it differs from modern layout systems we will use more heavily in Webflow.

 

5. Float & Positioning Resources:
Review resources to deepen understanding.

6. Layouts

Class12_LayoutTypes

7. Layout Resources:

  • Liquid, aka Fluid, Layouts: Fills the browser window. Note how content reflows when the browser window and columns resize.
  • Fixed-Width Layouts: Remains at the pixel width specified by the designer.
  • Responsive Website Examples:
      • Starbucks clear mobile vs desktop shifts, nav collapses visibly, product grid reflows
      • CSS Zen Garden see the same HTML applied differently, many responsive themes
      • Be Dance School clear mobile vs desktop shifts, nav collapses visibly, product grid reflows
      • Forefathers Group what elements change or disappear in smaller viewports?

SECTION II – assignments

9. Project 1: Typographic Storytelling 

Continued this week.

10.  P1 Process – Personas:

For persona, include the information below (including name and photo) and post to Medium. In UX design, a persona is a representation of a hypothetical user who is likely to use the product or service. Personas are created based on research and data about the target audience and are used to guide the design process by creating a shared understanding of the users and their needs. This persona will serve as a foundational tool to guide your UX design process.

Your persona will serve as a foundational tool in your UX design process. Include the following elements:

Basic Information

✔ Name: Give your persona a realistic name to humanize the profile.
✔ Photo: Include a representative photo or an avatar that reflects their demographic.

Demographic Information

✔ Age: Specify the age range.
✔ Gender: Identify the gender, if relevant.
✔ Location: Mention their geographic location (urban vs. rural, regional context).
✔ Education: Describe their level of education.
✔ Occupation: State their field of work and position.

Personal Characteristics

✔ Personality: Outline key traits (introverted, adventurous, analytical, etc.).
✔ Values: What matters most to them? (e.g., sustainability, convenience, affordability).
✔ Attitudes: Describe their general outlook (e.g., comfort with technology, openness to new ideas).
✔ Behavior Patterns: Any regular behaviors or habits that influence how they use your website?

Goals & Motivations

✔ Objectives: What is the user trying to achieve?
✔ Motivations: Why are these goals important to them?
✔ Drivers: What drives their behavior toward these goals?

Needs & Pain Points

✔ Unmet Needs: What gaps exist that your website could fulfill?
✔ Frustrations: What are their frustrations with current solutions?
✔ Challenges: List obstacles they face in achieving their goals.

User Scenarios / Stories

Choose one of the following approaches:
✅ Write 1-2 short scenarios describing how the persona interacts with your website.
✅ OR, write 1-3 user stories in this format:

As a [type of user], I want [some goal] so that [some reason].

Quotes & Testimonials

✅ Include 1-2 fabricated quotes that capture their thoughts and feelings about your website.

Paige Crawley Persona

Persona Resources:

11. Prototypes

Create your prototype in Adobe XD (minimum 6 sections) with interactive hotspots linking to different parts of the page.

Once your prototype is complete:
✅ Click Share in the top-right corner of Adobe XD.
✅ Select Publish Prototype and set it to Anyone with the link can view.
✅ Copy the public share link.
✅ Paste the link into your Medium post (one p1 story for all p1 process work) and D2L “P1: Prototyping” Discussion Board for User Testing next Monday–Wednesday in WEEK 7.

12. Style Tiles

Style Tiles are a design tool for compiling fonts, colors, image style, brand keywords, and UI elements. Both should be entirely different. Should include typographic plan. Post to your “P1” Medium Story.

SECTION III – technical

15. Intro to Webflow

Download to this handout to take notes or refer to while using. We will do an introductory demo together in class. As needed, I would also like for you to watch additional Webflow Training here training videos Getting Started, Web Structure, and Element Basics. 

16. Float Demo

This short 2m video connects directly with the float demos above, but demos how floats work in Webflow. Watch: