As I continue my journey through Codecademy’s iOS Developer career path, I’ve reached an essential stage: iOS App Wireframing. Wireframing is a critical step in app development, providing a blueprint for the app’s design and functionality.
What is Wireframing?
Wireframing is the process of creating a visual guide that represents the skeletal framework of an app. It helps to plan the layout and functionality of the app before diving into the actual coding.
What are Screens / Rooms?
Screens or rooms are individual views or pages of the app. Each screen represents a specific function or part of the app, such as the home screen, settings, or a specific game level.
Drawing a Wireframe by Hand
To start wireframing, draw it by hand, choose the screen size (e.g., iPhone, iPad, Mac) and sketch the layout. Here’s a simple process to follow:
- Choose your device’s screen size.
- Sketch the basic layout of your app’s screen.
- Focus on the main elements like buttons, text fields, and images.
What is UI Design?
UI Design, or User Interface Design, focuses on the look and feel of the app. It involves designing the visual elements and ensuring the app is easy to use and visually appealing.
My Wireframing Exercise
For my Codecademy project, I had to wireframe an app/game about the history of coding. I drew my wireframe on my 2017 iPad Pro (still a great piece of hardware today) using an Apple Pencil and the FreeForm app. Here are some photos of my exercise:
I’ve always struggled with drawing, so this exercise felt challenging. I’m uncomfortable with hand-drawing wireframes, which led me to explore software that could help.
Exploring Wireframing Tools
I already use Canva a lot for my work (and for these posts featured images), but it might not be sufficient for wireframing. After watching some YouTube videos, I discovered two promising tools: Adobe XD (which seems to be in “Maintenance Mode” right now – don’t know exactly what it means) and Figma. I’ve already signed up for an educator account on Figma and can’t wait for it to be activated.
Summary Table
| Concept | Description | Example |
|---|---|---|
| Wireframing | Creating a visual guide representing the skeletal framework of an app | Sketching app layout |
| Screens / Rooms | Individual views or pages of the app | Home screen, settings page |
| Hand-drawn Wireframe | Drawing the wireframe by hand using device-specific templates | Sketching on iPad with Apple Pencil |
| UI Design | Designing the visual elements of the app | Ensuring easy use and visual appeal |
| Wireframing Tools | Software that aids in creating wireframes | Adobe XD, Figma |
Conclusion
Even with the chaos of year-end work tasks and the joyful demands of new parenthood, I’m committed to making progress every day toward becoming a software engineer. Wireframing has been a new and exciting challenge, and while hand drawing isn’t my strong suit, discovering tools like Figma has made the process much more enjoyable.
By focusing on iOS App Wireframing and using these steps and tools, I hope to lay a solid foundation for my app development skills. Next up, I’m diving into more advanced topics in my Codecademy course. Stay tuned!