5 - Section A: Translating Wireframes into Editable Artboards

You've not yet enrolled in this course. Please enroll for free to listen to audio lessons, classroom podcasts and take mock test.

Interactive Audio Lesson

Listen to a student-teacher conversation explaining the topic in a relatable way.

Importing and Organizing Source Files

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Today, we will start with the first step in translating wireframes into editable artboardsโ€”importing and organizing our source files. Why do you think organizing files is important?

Student 1
Student 1

I think it's important so that we can find everything easily later on.

Teacher
Teacher

Exactly! Organizing files makes our workflow much smoother. When you import images into Figma, what should you do to keep your wireframes aligned?

Student 2
Student 2

We should set the opacity low and then lock the layer.

Teacher
Teacher

Yes! Locking the layer helps prevent accidental changes. Can you remember the specific layer groups I suggested?

Student 3
Student 3

Uh, like 00_Wireframe, 01_Layout, and so on?

Teacher
Teacher

Correct! These groups help keep elements organized. Remember, efficient organization can save us time later. Great job! To sum up, always export wireframes as high-resolution images and use appropriate layer structuring.

Defining Canvas Size and Grids

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Now let's talk about defining canvas sizes and grids. Why is it essential to know the target resolution before starting a project?

Student 4
Student 4

So we can make sure our design looks good on different devices.

Teacher
Teacher

Exactly! For example, for mobile, we often use 375ร—812 pixels. What about for desktop?

Student 1
Student 1

It would be 1440ร—1024 pixels.

Teacher
Teacher

Great! And what kind of grid system can we utilize?

Student 2
Student 2

We could use a 12-column grid with 24 px gutters, right?

Teacher
Teacher

Right! This grid helps maintain balance and spacing in your layouts. Always remember, a solid grid system supports modular design!

Establishing Version Control

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Finally, let's dive into establishing version control. What are some good practices we should follow?

Student 3
Student 3

We should use naming conventions and add comments.

Teacher
Teacher

Exactly! Naming artboards clearly, like Home_v1.0, lets you track changes easily. And when it comes to comments, how can they help?

Student 4
Student 4

They allow team members to understand the reasons behind design decisions.

Teacher
Teacher

Correct! Clear documentation fosters collaboration. So remember to establish version control right from the startโ€”it can save a lot of headaches later!

Introduction & Overview

Read a summary of the section's main ideas. Choose from Basic, Medium, or Detailed.

Quick Overview

This section covers the process of converting wireframes into editable artboards, focusing on importing files, setting up grids, and establishing version control.

Standard

In this section, you'll learn how to effectively import and organize source files into design software, how to define canvas sizes and grids for accurate design work, and the importance of establishing version control to track design changes. These steps are crucial for creating polished digital prototypes from initial wireframes.

Detailed

Translating Wireframes into Editable Artboards

To create effective digital prototypes, designers must start with a solid foundation by translating wireframes into editable artboards. This section provides a step-by-step guide on how to do this effectively:

1. Importing and Organizing Source Files

Designers should export their wireframes as high-resolution images (PNG or PDF) and import them into their design software like Figma or Adobe Illustrator. Keeping source images at a low-opacity and locked helps maintain alignment and design consistency. Organizing layers into groupsโ€”such as wireframes, layout, assets, typography, and interactionsโ€”ensures structured workflows.

2. Defining Canvas Size and Grids

It's vital to establish the appropriate canvas size based on target resolutions for mobile or desktop (e.g., 375ร—812 px for mobile and 1440ร—1024 px for desktop). Utilizing grid systems (like a 12-column grid with 24 px gutters and an 8-point baseline grid) helps maintain visual order and enhances the designโ€™s modularity through Auto Layout in Figma.

3. Establishing Version Control

Designers must apply consistent naming conventions to their artboards (like Home_v1.0) while using comments within their chosen software to annotate design decisions. This facilitates smoother revisions and team collaboration, making it easier to track designs through different iterations.

Overall, this section emphasizes the importance of organization and structure in the design process, setting the stage for successful digital prototypes.

Audio Book

Dive deep into the subject with an immersive audiobook experience.

Importing and Organizing Source Files

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

5.1 Importing and Organizing Source Files

  • Scanning/Exporting: Export paper sketches as 300 dpi PNG/PDF.
  • Placement:
  • Figma: File โ†’ Place imageโ€ฆ; set opacity to 20% and lock layer.
  • Illustrator: File โ†’ Placeโ€ฆ; embed and reduce opacity to guide traces.
  • Layer Structuring:
  • Create layer groups: 00_Wireframe, 01_Layout, 02_Assets, 03_Typography, 04_Interactions.

Detailed Explanation

This chunk focuses on the first step involved in transforming wireframes into editable artboards. It outlines the process of first importing existing wireframes or sketches into design software (like Figma or Illustrator) and organizing them into structured layers.

  1. Export Sketches: Begin by scanning or exporting your sketches at a resolution of 300 DPI either as PNG or PDF to ensure quality.
  2. Placing Images: In Figma, use the option 'File โ†’ Place image...' to bring in your sketches, setting the opacity to 20% to serve as a guide. Lock this layer to prevent accidental alterations. In Illustrator, you follow a similar process and also reduce the opacity for easy tracing.
  3. Layer Structuring: Organizing your files is crucial. Create specific layer groups - starting with the wireframe and following with layout, assets, typography, and interactions to keep everything orderly and easily editable.

Examples & Analogies

Imagine you are baking a cake. You start by preparing your ingredients and laying out your tools โ€” that's like importing and organizing your source files. The 300 dpi export is like ensuring your ingredients are fresh and ready; the opacity adjustment is like greasing your baking pan โ€” it helps your work go smoothly without sticking. Layer structuring is akin to separating your batter into different bowls for icing, decoration, and the cake base โ€” each serving a unique purpose but contributing to one delicious cake.

Defining Canvas Size and Grids

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

5.2 Defining Canvas Size and Grids

  • Target Resolution:
  • Mobile: 375ร—812 px (iPhone X)
  • Desktop: 1440ร—1024 px
  • Grid Systems:
  • 12-column grid, 24 px gutters.
  • 8-point baseline grid for vertical rhythm.
  • Auto Layout Frames (Figma):
  • Wrap groups in Auto Layout; set padding and spacing.

Detailed Explanation

In this chunk, the focus is on defining the canvas size and the grid systems essential for an effective design layout.

  1. Target Resolution: Itโ€™s important to specify the resolution based on the target device. For mobile designs, the standard is 375ร—812 pixels (the size of an iPhone X) and for desktop designs, it could be 1440ร—1024 pixels which represent an average large screen resolution.
  2. Grid Systems: Grid systems help in aligning elements efficiently. Use a 12-column grid with 24 pixels as gutters, which allows for organized and balanced layouts. An 8-point baseline grid maintains consistent vertical spacing, ensuring your text is visually appealing and readable.
  3. Auto Layout Frames: In Figma, wrap your groups in Auto Layout. This feature allows for dynamic adjustments of items based on the defined pad and spacing, facilitating responsive designs.

Examples & Analogies

Think of the canvas size and grid system like the layout of a city. Just as a city planner would determine the sizes of blocks and lanes to create an effective traffic flow, defining your canvas size and grids helps ensure that your design is structured and navigable. If a block (or design element) is too big or not aligned, it can cause chaos on the road (or screen). The target resolution is like choosing the right area of the city to build your park, making sure it fits the environment and the visitors.

Establishing Version Control

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

5.3 Establishing Version Control

  • Naming Convention:
  • Artboards: Home_v1.0, Home_v1.1, etc.
  • Comments & Notes:
  • Use Figma comments to annotate design decisions and questions for reviewers.

Detailed Explanation

This chunk discusses the importance of establishing version control, which helps in tracking changes and collaborating more effectively within design teams.

  1. Naming Convention: To maintain clarity and avoid confusion, it's vital to use a systematic naming convention for your artboards. For example, labeling them as Home_v1.0 and Home_v1.1 helps identify versions incrementally as the design evolves.
  2. Comments & Notes: Utilizing comments in Figma allows designers to annotate specific sections or decisions made during the design process. This makes it easier for reviewers or collaborators to understand intentions and provide feedback directly within the interface.

Examples & Analogies

Establishing version control is like keeping a travel journal. Each entry (or version) documents your journey (or design process) โ€” where you started, what changes you made along the way, and reflections on why certain paths were chosen. Just as you might annotate important experiences in your journal for clarity, making comments on your design helps others see the 'why' behind your decisions, making group discussions more insightful and focused.

Definitions & Key Concepts

Learn essential terms and foundational ideas that form the basis of the topic.

Key Concepts

  • Wireframe: A low-detail layout representing element placement and basic functionality.

  • Artboard: The workspace where designs are created and edited.

  • Opacity: Affects how visible elements are on the canvas.

  • Grid System: Framework for organizing components in a layout.

  • Version Control: System for tracking changes to designs among team members.

Examples & Real-Life Applications

See how the concepts apply in real-world scenarios to understand their practical implications.

Examples

  • A wireframe imported into Figma, locked with reduced opacity to guide the design process.

  • Using an 8-point grid system to create modular layouts, ensuring consistent spacing and alignment.

Memory Aids

Use mnemonics, acronyms, or visual cues to help remember key information more easily.

๐ŸŽต Rhymes Time

  • When you import, make it right, lock it down and set the sight.

๐Ÿ“– Fascinating Stories

  • Imagine a designer who imports sketches and locks the layers to prevent mistakes while they create. Every grid they use reminds them of the streets of a city, where every building is perfectly aligned.

๐Ÿง  Other Memory Gems

  • IOLG: Import, Organize, Layer, Grid - use this to remember the key steps in preparing your design.

๐ŸŽฏ Super Acronyms

ISOLATE

  • Import
  • Structure
  • Organize
  • Layer
  • Arrange
  • Test
  • Export.

Flash Cards

Review key concepts with flashcards.

Glossary of Terms

Review the Definitions for terms.

  • Term: Wireframe

    Definition:

    A low-detail layout representing the placement and basic functionality of elements.

  • Term: Artboard

    Definition:

    The workspace in design software where designs are created and edited.

  • Term: Opacity

    Definition:

    The degree to which something blocks light, affecting its visibility on the canvas.

  • Term: Grid System

    Definition:

    A framework that helps organize layout components within a design for consistent spacing.

  • Term: Version Control

    Definition:

    A system for managing changes to documents and designs, tracking revisions and contributions.