DEV Community

Cover image for Wireframing - Web Design 101

Posted on

Wireframing - Web Design 101

I am taking Dr. Angela Yu's The Complete 2020 Web Development Bootcamp on Udemy and it is awesome. I started not to long after finishing Colt Steele's Bootcamp course. I just want to solidify, as best as possible, the basics and then from there start doing some work.

Right now, I am on Web design 101 - Wireframing. Dr. Yu says "it's easy", "shouldn't take you long" but in reality it is far from "easy". Now, don't get me wrong, sketching what a site and/or app should or will look like is "easy", as I can draw stick figures just fine, but the process that goes into it isn't "123, testing, testing, test, test".

She did mention about the process for developers is to look at what others have done and draw inspiration from those and then do wireframing, mock and probably prototype but even before looking at someone else's stuff, what is it that I actually want to convey? Or what would my client want to convey and how can I capture that? Questions like those come to mind even before I look for "inspiration". Now, are those questions relevant? Don't know. I just know that I can "oooh", "aaah" someone's website all I want but not having an idea of what I want and/or looking to convey does not help me in drawing inspiration.

It might just be me. But that is what I was thinking. By the way, if anyone is just starting in Dev and want to go to a Dev bootcamp, both Dr. Angela Yu and Colt Steele classes on Udemy are awesome. They may have some outdated examples but the info still stands. Also, is an invaluable resource as well. I have not yet done there course, but I have used their articles for help understanding something in JavaScript, NodeJS, etc. Medium is another resource I use a lot as well. Ooooh! Let's not forget and Wikipedia. I love YouTube, but YouTube is not the only place for great info, continued learning and knowledge expansion.

Anyways, I was speaking on "wireframing", before I went on a little tangent. Well, if you read, or will be reading, what I write, you will see that often! 🤣😎 So, wireframing, itself is "easy". It's just drawing a diagram of where you want what on a browser for a particular site I am designing. However, coming to that is where, I think, is the issue and not as easy. Right now, I don't know what I want or what I want to convey and therefore "stuck"!!! So for now, I'll just look at the "inspirations" and wireframe something similar to what "speaks" to me and continue with the lesson.

Yeah! I know. I do believe in "recreating the wheel" as long as it propels me forward. Who knows, I may add something new or come up with a different perspective during the process! 😁

Top comments (1)

alinadunec profile image
Alina Dunec

Hello! Good article! Creating warframe is relevant in the development process. Doing it allows you to show the customer how close to his idea you are and whether it is worth making changes.
When you create Wireframe, you first have to make a sketch that shows the approximate location of the blocks on the page.
Then Wireframe will describe them more precisely - this is where you indicate which elements and where they will be located.
The final version of how the page will look on the application tab is a mockup.
And when you want to show how the user will see the application interface, a prototype is used.
But you could say that a wireframe is an essential part of creating an app.

You can read more about wireframe, its functions and features in this article.