5 - Section A: Translating Wireframes into Editable Artboards
Enroll to start learning
Youβve not yet enrolled in this course. Please enroll for free to listen to audio lessons, classroom podcasts and take practice 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
Sign up and enroll to listen to this audio lesson
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?
I think it's important so that we can find everything easily later on.
Exactly! Organizing files makes our workflow much smoother. When you import images into Figma, what should you do to keep your wireframes aligned?
We should set the opacity low and then lock the layer.
Yes! Locking the layer helps prevent accidental changes. Can you remember the specific layer groups I suggested?
Uh, like 00_Wireframe, 01_Layout, and so on?
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
Sign up and enroll to listen to this audio lesson
Now let's talk about defining canvas sizes and grids. Why is it essential to know the target resolution before starting a project?
So we can make sure our design looks good on different devices.
Exactly! For example, for mobile, we often use 375Γ812 pixels. What about for desktop?
It would be 1440Γ1024 pixels.
Great! And what kind of grid system can we utilize?
We could use a 12-column grid with 24 px gutters, right?
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
Sign up and enroll to listen to this audio lesson
Finally, let's dive into establishing version control. What are some good practices we should follow?
We should use naming conventions and add comments.
Exactly! Naming artboards clearly, like Home_v1.0, lets you track changes easily. And when it comes to comments, how can they help?
They allow team members to understand the reasons behind design decisions.
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 summaries of the section's main ideas at different levels of detail.
Quick Overview
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
Chapter 1 of 3
π Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
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.
- Export Sketches: Begin by scanning or exporting your sketches at a resolution of 300 DPI either as PNG or PDF to ensure quality.
- 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.
- 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
Chapter 2 of 3
π Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
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.
- 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.
- 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.
- 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
Chapter 3 of 3
π Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
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.
- 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.
- 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.
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 & Applications
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
Interactive tools to help you remember key concepts
Rhymes
When you import, make it right, lock it down and set the sight.
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.
Memory Tools
IOLG: Import, Organize, Layer, Grid - use this to remember the key steps in preparing your design.
Acronyms
ISOLATE
Import
Structure
Organize
Layer
Arrange
Test
Export.
Flash Cards
Glossary
- Wireframe
A low-detail layout representing the placement and basic functionality of elements.
- Artboard
The workspace in design software where designs are created and edited.
- Opacity
The degree to which something blocks light, affecting its visibility on the canvas.
- Grid System
A framework that helps organize layout components within a design for consistent spacing.
- Version Control
A system for managing changes to documents and designs, tracking revisions and contributions.
Reference links
Supplementary resources to enhance your learning experience.