Loading the lesson
Loading the lesson
Search AllRounder.ai
Search the courses, subjects, tracks, games and features, or jump straight to a page.
Search the courses, subjects, tracks, games and features, or jump straight to a page.
Learn it your way
A short class with Sarah and her students. The other ways are under More.
Sign up free to listen. Transcripts are free to read.
Today, we're going to discuss how to start bringing our physical sketches into the digital world. What do you think is the first step in this process?
I guess we need to scan them?
Exactly! We should scan or export our sketches at a resolution of 300 dpi. This ensures that our images are high quality when we import them into Figma or Adobe Illustrator.
So, does this high resolution affect how they look in the software?
Absolutely! Higher resolution gives us clearer images to work on, especially when tracing. Can anyone tell me how we can import these images once they are scanned?
In Figma, you go to File and choose Place image, right?
Correct! In Figma, we place an image and we should also set the opacity to around 20% to help us easily trace over it. Let’s remember this with the acronym 'TIP' - 'Trace, Import, and Protect' our sketches.
That will help me remember! So what about Illustrator?
In Illustrator, it's quite similar. You can use File → Place, embed the image, and then reduce its opacity. The goal is to have a clear guide for tracing. Now, can anyone tell me why it's essential to have these guides?
To keep our designs consistent, right?
Exactly! Consistency is key in design. Let's summarize: we scan at a high resolution, use low opacity for guidance, and always structure our layers clearly.
Now that we've imported our sketches, let’s talk about layer structuring. Why do you think it's important to organize layers properly?
Maybe to find things easier later on?
Correct! An organized layer structure makes it easier to manage your designs. Can anyone suggest what names we might use for organizing layers?
We could have names like Wireframe, Layout, and Typography.
Exactly! Use clear group names like 00_Wireframe, 01_Layout, 02_Assets, 03_Typography, and 04_Interactions. This not only helps you find elements quickly but also improves collaboration among team members.
How does this help during collaboration?
"Great question! An organized system allows everyone to understand the purpose of each layer and avoids confusion. Let’s commit this to memory with the acronym 'LIFT' - 'Layer It For Teamwork'.
Let’s discuss how our organizational structure influences our overall workflow. How does starting with a strong organization help us in the long run?
It makes everything smoother and saves time!
Absolutely! Time saved on finding layers means more time for creativity. Can anyone summarize how we structure our layers one more time?
We set layer groups for wireframes, layouts, assets, typography, and interactions.
Perfect! A structured approach leads to clear communication among team members and creates a smoother design process. Can we remember that with the phrase, 'Order Creates Clarity' in our design projects?
This is helpful! I’ll make sure to organize everything when I start designing.
Fantastic! Remember, your project’s success often hinges on planning and structure. Let’s keep practicing these concepts.
To keep designs neat, Layer groups can't be beat!
Once a designer, Alex, found lost sketches until they organized layers in groups. Now, all teammates easily find what they need!
Remember 'T.I.P.' for 'Trace, Import, Protect' when working with sketches.
LIFT: Layer It For Teamwork helps remember structured design.
Term
Resolution for Scanning Designs
Click to flip
Term
Layer Groups Importance
Click to flip
Term
Opacity Usage
Click to flip
The process of digitizing physical sketches by capturing them at a certain resolution, typically 300 dpi for high quality.
Organized collections of layers in design software to manage and navigate design elements efficiently.
The level of transparency of a layer or image, controlling how much of the underlying design is visible.
A system that manages changes to design files, enabling multiple iterations and updates while maintaining access to previous versions.
This section covers the techniques for importing and organizing source files for design projects, ensuring the efficient workflow from wireframes to digital prototypes.
In this section, you will learn how to import wireframe sketches into design software like Figma and Illustrator, set up a structured layer organization, and effectively manage your project files for optimal design efficiency. Key practices include exporting paper sketches, adjusting image opacities, and structuring layer groups.
In this section, we explore essential techniques for importing and organizing source files as part of the design workflow, primarily focusing on Figma and Adobe Illustrator. Proper organization ensures that designers can work efficiently and maintain clarity throughout the prototyping process. Key practices include:
When transitioning from physical sketches to digital prototypes, the initial step involves scanning or exporting your paper sketches at a high resolution (300 dpi). This ensures quality when placed into design software.
File → Place image…, set opacity to 20%, and lock the layer for subsequent tracing and editing.File → Place…, embed the image, adjust the opacity, and use it as a guiding trace for digital design.To keep projects organized, create structured layer groups in your design file. Suggested layer group names include:
00_Wireframe01_Layout02_Assets03_Typography04_InteractionsSuch structured naming conventions facilitate better collaboration among team members, ensuring that everyone understands the hierarchy and purpose of each layer. Overall, this section provides the fundamental practices needed to successfully import and organize your design assets, laying a strong foundation for the subsequent design processes.