Wireframes and Prototyping
When beginning to create a website, it is important to think through what the website will need and how it will look eventually. It can be difficult to see the end of a site when it is just beginning to be built. That’s why it is so important to actually think about the site and plan it out first.
Start With Sketching!
When beginning to build a website or web application, it is important to have a bunch of ideas. The best way to get these ideas out, in my experience, is to first sketch it out. When sketching out a website, it isn’t as important to be perfect. Because of this, tons of different ideas can be put to paper without worrying about whether it is the best idea or not. In this stage of building a website, it is definitely okay to make mistakes because it is not the end of the world!
As can be seen in the example, a sketch does not need to be perfect, or even very good. This is only slightly what the end result actually looked like. The sketch is just getting your ideas out on paper and trying to determine if what you think the site should look like, will actually look good. This can be done as many times as you want or until you have a decent looking sketch. Then, once you have a sketch that you like, you can move on to the next phase which would be making wireframes.
Wireframes
Wireframes are something kind of unique. A wireframe is a design of the website or application that has no color, pictures or even content if you don’t want to add it. A wireframe is there just to give yourself a better idea of what the project will look like and help you to decide where things should go. Just like with the sketches, a wireframe doesn’t need to be perfect. It should just be something that can be referenced when moving on the the prototypes and final design.
There are many tools that can be used in order to make a wireframe. One that I like to use is Adobe Illustrator. It has all of the things a designer needs in order to make a great wireframe and final design. There are also tools like Sketch and Adobe XD which make the wireframing process quick and easy. I have less experience with these but I am excited to use them in future projects.
This wireframe is just an example of what kinds of things the wireframe can actually include. For my wireframes, I like to use various shades of gray and lots of different shapes as placeholders for the elements that are going to be included. The wireframes don’t need to be that specific. Just as can be seen in the example, the placeholders are pretty generic and so is the wording. In my wireframes, I like to use Lorem Ipsum. Most of the time I just use the regular Lorem Ipsum generators but I also like to use the bacon ipsum generator if I want to spice up my wireframes a bit. It is not really necessary to use Lorem Ipsum but it is nice to have as a placeholder for text that you may include in the final design. Once you have placed all of the parts and pieces where you want them and have a pretty good wireframe, this is where you can move on to the final design and then prototyping.
The final design, or surface comp, can be pretty much exactly what your wireframe looks like but with all of the color and content that you want to be included. This means putting actual content in the boxes and areas where text will be so that you can see what it will actually look like. This is getting to the point where you should have a pretty good idea of how things will look when you move on to coding the final website. That being said, it can still be imperfect. There is still room to make changes and tweaks here and there so that the final design looks great. But these changes should be pretty minor.
The Fun Part: Prototyping
When you are finally done with the design portion and you like what the designs look like, the prototyping can begin. Prototyping means making the design that you have created somewhat functional. A prototype allows the designer to create a semi-functioning website with clickable buttons, links and animations, just like the final coded site will have. One of the best tools for making prototypes is called InVision. InVision lets the designer import in their designs and add functionality to them. This lets the client or user see what the website will look like and how it could act. The interaction is limited though, so it will only give them a glimpse of what the final website or application will be.
The process of building a great design can be a long one but it is worth it to do it right. Luckily, there are plenty of tools for web designers and developers to use to get their ideas from just being ideas to being awesome designs. From sketching to prototyping, a good idea can take shape into a beautiful website or web application.
Jordan Ashment is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. This article relates to various projects in the Interaction Design Course and is representative of the skills learned.
