I am currently in module 2 at the Flatiron School and for the first 2 weeks of this module, the curriculum focuses on Rails, and by the third week, we have to build our own rails application with a partner. One of the guidelines for starting the project required that we obtain approval from our coaches before starting. In order to achieve this, the coaches said that we need to think about our user stories for our application. These user stories describe how a potential user would be using our application. One of our coaches said that the best way to do this is through a wireframe.
Up until this point, I had no idea what a wireframe was. In fact, I had never heard of it. From what I was able to gather after our coach told us this information was that a wireframe was akin to an outline you would use to write a paper. So my partner and I started writing out what we wanted to include in our project and what view pages we wanted our users to see. It was not until our coach saw how we were logging this information that she stopped us and said that for a wireframe, we need to actually draw out each view and the flow. That we should think of it as a movie storyboard rather than an outline used for a paper. The reasoning she gave was that writing out only sentences of what you plan to do can be interpreted differently by each person reading it, but drawings are much more universal. This instantly grabbed my attention and is what led to writing this post.
What is Wireframing?
Wireframing is a way to add structure when designing and prototyping your website or application. It is a sketch or digital representation of what each page view in your app will contain. The main purpose is to help developers and designers decide what user interface elements they need to add to their application. A wireframe can range from a quick five-minute sketch on a piece of paper, to a robust, digital prototype of what your final UI will actually look. This is usually done through software such as photoshop or sketch.
Advantages of Wireframing:
When it comes to the development of your application, wireframing is completely optional. However, I recommend that you try making a low-fidelity wireframe when starting your next project. A low-fidelity wireframe is just a simple, basic sketch of what each view should look like. While it may add more time to the project during the initial stages of development, it can help in saving you time later down the line as it helps organize the steps in which you should be creating each view. This includes what paths and routes you will need to be redirecting or linking to.
It can also be useful for pair programming or when you are a part of a larger team. It not only allows everyone to visually see what each view page will look like but can help in alleviating any misunderstandings of what a view page should have.
During the project pitch with one of our coaches, my partner and I each interpreted one of our page views differently when we wrote it down on paper using only sentences. I thought we were going to have a homepage with a navigation bar at the top and other content filling the rest of the page such as news or a trending user table. My partner thought the navigation bar items were going to fill the whole page as a single menu page. It was not until we drew the design that we realized we understood our view page differently and from there we were able to decide what we actually wanted to do. Yay!!!!
How to Wireframe:
The key to making a good initial wireframe is to keep it simple. You can always add more to your views as you decide what functionality you think is necessary, but before then, KEEP IT SIMPLE! Do not start by adding photos and other media. Instead, add placeholders that mark where you intend to put these things on the view, but your main priority should be to start with the functionality first. Which page view should your form that sends a message to a user be on and what fields will that form need? What happens after the form is submitted? Should the next view be a confirmation page or should it go to a profile page of a user or a list of products? Ask yourself, what are my user stories?!
After your mockup is complete, the next step is to create what is called a high-fidelity wireframe. A high fidelity wireframe is supposed to be a very close representation of what your project’s UI should be. This is where you can start adding in your logos, static photos, color scheme choices, and other design elements that were not needed to get the design moving. This should communicate what the final result will be. The high-fidelity wireframe should occur after the skeleton of your project has already been created.
Resources For Wireframing:
There are some really great choices of software when it comes to creating your wireframe. I know that as a student, we are always on a tight budget and while many of the industry-standard software used for wireframing is expensive, there are some that are free or have freemium features. There are also some that are not that expensive, especially when considering you may be using the software often for your own projects in the future. Here is a list of some of my favorites:
FREE OR FREEMIUM: (In order from favorite to least favorite)
InVisionapp — ios/web app built for quick, low fidelity sketching. However, the application is quite scalable and you can turn your initial low fidelity, free-hand sketch into a high fidelity one through their inVision studio app. The inVision studio app is also free and can turn your design into a finished, clickable prototype. Or if Photoshop or Sketch is your choice of software, inVision integrates nicely with those and you can still use inVision to customize your prototypes made in Photoshop or Sketch. InVision also includes a mood board feature.
Wirify — this is a web application that you can turn any current site on the internet into a wireframe for inspiration in making your own site.
Mockflow — I really liked mockflow and could see myself using it more, but the freemium version only allows for one project and then you must purchase a subscription. However, they have a free trial period.
Framebook — This is probably the most basic application on the list for the purpose that it is up to you on how you create your wireframe.
iPhone mockup — It is exactly as the name implies. It is a giant iPhone screen and you can play around with how you envision your app to look on iOS. However, the site can be a bit buggy at times, so be wary of that.
PAID:(In order from favorite to least favorite)
- Balsamiq — This is one of the more popular wireframing sites and it is really user-friendly. They have a lot of pre-made options such as ‘call to action buttons’ when designing your wireframe. It also can turn your wireframe into a clickable prototype as well.
2. Mockingbird — Similar to Balsamiq, but they have their own pre-made options that you can choose from.
The next two that I will mention are not as user-friendly as the ones mentioned above, but if you have experience with graphic design, these are probably already being used in your everyday workflow.
3. Photoshop — Adobe’s Photoshop is one of the more universal pieces of software on the list as you can use it for just about anything, not just wireframes.
4. Sketch — I have never personally used sketch, but I liked the features that were mentioned on the site and it is commonly used for wireframing.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
