Website wireframes

After we presented our logo ideas, color schemes, etc. for our digital hub project 2.0 we were told to have the wireframe for our website finished by the next class. Russ and Ike suggested we use https://balsamiq.com/ as a template. Wireframes are visual guides that represent the framework of a website; it’s like a screen blueprint.

The importance of a wireframe

Wireframes create a more tangible grasp of the site’s functionality and shows navigation paths between pages. The ultimate use of a wireframe is to help the site designer identify call-to-action, construct the layout and placement of content, determine features, etc.

Since they are static they do not effectively show the interactive details like hovering over the navigation menu, but other than that wireframes are very helpful and smart to use. It’ll be very difficult to develop a website without wireframes because you’ll be simultaneously figuring out the flow of the site and the visual layout of it all while starting from scratch.

The importance of wireframes

User flow chart – image via giftrocket

Types of wireframe

Low-fidelity and high-fidelity are the two types used to recognize the level of production or functionality. Low fidelity is quick to develop since they’re more abstract. Simple images are often used to block off space and apply mock content/text as fillers. The most detailed wireframe is High-fidelity. It includes information about everything on the page, including dimensions and any other interactive elements.

Things to consider when developing your wireframe

Always remember to depict the most important content and its behavior, not the visual design of the site. Avoid using colors and images, instead use different shades of the color gray and rectangular boxes with an “x” through it to keep it simple. Making the design responsive is very important since most sites are looked at from different devices like computers, phones and tablets. Lastly do not worry about the typography, that will come during the visual design stage.

The importance of wireframes

Responsive design wireframe – image via baynesmedia

To help you get started with your wireframe here are some standard elements all sites should have.

Questions:

1. Have you created a website without using a wireframe?

– If so what are some things that you could’ve avoided with a wireframe?

2. How detailed do you think you are going to be when developing your wireframe for the digital hub project 2.0?

3. Do you feel that wireframes are a necessity when creating a website?

15 thoughts on “Website wireframes and it’s importance

  • March 14, 2016 at 1:13 am
    Permalink

    I have created web pages before without web pages. I honestly wished when I was learning how to make web pages that wire frame was available. When I was learning back then some of the teachers that was teaching how to build a webpage kind of had a blueprint or an example of what an web page should look like.
    But those class back then granted it was elementary and middle school classes that was teaching students about web pages. I felt that when making those web pages back then felt like there was no true direction it was more make whatever you want just long as it seems appropriate. I also had to teach myself a lot about web page designs and a little bit of coding because I would go over and beyond on my webpage.
    I believe that I am going to be very detailed now that I have the wire frame because I want the web page for that so digital to be perfect or at least 98.9% near perfect and is eye catching as well very organized.
    The wireframes are a necessity to make a web page. The reason the wire frame is necessary for web pages is because it is a great way to get ideas out.
    As stated earlier it is the best way to organize the webpage on how you want it. While following the wire frame it is so much easier to build the web page . I like this blog post and I am loving the wire frame wish someone showed me this tool before.

    Reply
    • March 16, 2016 at 2:37 pm
      Permalink

      It’s a good idea to make your wireframe detailed enough where all your ideas are implemented especially if you want your website to be 98.9% perfect. I agree that a wireframe is a necessity for site building but mainly for designers with little experience I just feel like it’s a good rough draft where you can easily fix things and see the entire visual aspect of things.

      Reply
  • March 14, 2016 at 2:17 pm
    Permalink

    Very informative blog post about website wireframes, Brooke! I do not have any experience creating wireframes for websites. The only site that I have designed is my personal Tumblr blog that I created specifically for the Digital Hub project in the first social media class. I used a simple template, so there was not a great deal of design involved other than choosing colors, fonts, and images. Creating a wireframe would have been beneficial in designing my Tumblr blog because it could have provided more vision.

    I am going to try to be as detailed as I can with the Balsamiq wireframe for class. I look at it as if the wireframe is a research paper outline that is necessary to guide the writing process. I think if I spend most of my time cross-referencing our WordPress theme with the wireframe then the process will be more seamless during the actual site design. Ultimately, I think wireframes are necessary in web layout and design, especially for web designers with little or no experience. I look forward to making our site look fantastic using the wireframe!

    Reply
    • March 16, 2016 at 1:51 pm
      Permalink

      Treating your wireframe as a research paper outline is a great idea because that is basically what it is! I believe everything should have a plan especially if you want your vision to be expressed in it, so I agree with you when you expressed that creating a wireframe for your Tumblr blog would’ve been beneficial.

      Reply
  • March 14, 2016 at 9:39 pm
    Permalink

    This was an extremely helpful blog post. I really didn’t know too much on website wireframes before this class began. I created a website last semester in one of my classes and didn’t use a wireframe for it. I believe if I would have my website would’ve looked more professional and just all around more organized. I used a generic template provided and kind of just winged it as I went along. I really do think that wireframes provide more direction in the actual creation of the website. I like how Eli thinks of it as an outline for a research paper. It can set you up for a very easy transition when actually implementing the information onto your website. Wireframes are a definitive necessity in creating an appealing and organized webpage for your users.

    Reply
    • March 16, 2016 at 1:56 pm
      Permalink

      I agree, wireframes help make the website look more professional and organized! I didn’t know anything about wireframes before this class either and I’m glad I got to do further research on it because I now have a clear understanding!

      Reply
  • March 15, 2016 at 2:13 am
    Permalink

    Great post! Very useful content. I have once before created a website using a template on GoDaddy’s website builder, so not really much experience but some basic knowledge. By using a wireframe, it gives you an idea for content placement and helps you fill in the white space as you go, especially when it comes to building a website from scratch. I think we are going to be as detailed as possible, just like with every group, while maintaining a pleasing and non-confusing looking website. Looking at other websites may also be helpful when stuck. I think wire frames are necessary when creating a website up until the point where you become a master at the art of creating exciting webpages from scratch. I don’t think any of us are at that point haha, so for us I would say its absolutely necessary on this project.

    Reply
    • March 16, 2016 at 2:19 pm
      Permalink

      Very true Alex! When you become a master at designing websites creating wireframes will become pointless. Also you being detailed as possible for the digital hub project is smart because transferring your ideas to the website will be a piece of cake. With your basic knowledge of wireframes and experience creating a website, I’m sure your group will be in good hands!

      Reply
  • March 15, 2016 at 9:26 am
    Permalink

    Great blog post Brooke!
    I have not build a website with or without a wireframe. The concept of using a wireframe seems great so far it is allowing us to layout what we want and see it visually before we implement our ideas.
    So far I am still in the early stages of the wireframe, but plan on it looking as a replica of our intended entire site. I feel a detailed wireframe will give me a better understanding of how we want the site to look, so when I collaborate with Blake he can make the ideas a reality.
    I don’t feel that wireframes are necessary for building a website just as don’t feel instructions are necessary to build something. I do however feel that it does make it easier and more practical to accomplish the task at hand in an efficient manner.

    Reply
  • March 16, 2016 at 2:35 pm
    Permalink

    Great post, it really helped to break down exactly what the need for a wireframe is.

    I’ve built a few websites using WordPress, but never with a wireframe. Now that I see their purpose and how to use them, I think I would have been a lot better off using them before. There have been countless times when I’ve spent time trying to make a website look just right, only to finally get it done and not like the outcome. Had I been using a wireframe, I could have saved myself a lot of time by mocking it up first before actually building it. It’s a lot easier to redo something on a wireframe than it is to redo it on the actual website. I probably could have saved myself a lot of headaches had I used them earlier.

    I agree with Jesse, I don’t think that they’re a necessity in building a website, but I know from experience that they can certainly be beneficial.

    Reply
  • March 16, 2016 at 4:03 pm
    Permalink

    I have designed a website before without a wireframe but it was for my Neopets when I was little (that is where I learned mot of my HTML coding, which is still considerable). A wireframe is definitely beneficial as it allows you to make adjustments before even starting to code. Once you start coding the site, the amount of text can get confusing so having everything planned out is a plus.
    We have one person working on the wireframe, but we all discussed and decided on a general idea before giving him the task of creating it. I hope we are fairly detailed with it because, like I said above, the more detail in the beginning, the better.
    I don’t think they are necessary but they are necessary if you want the process to go more smoothly.

    Reply
  • March 16, 2016 at 9:58 pm
    Permalink

    Nice post, Brooke! I created a Wix site last semester for Health Com without a wireframe (since I had no knowledge that they existed) but i found figuring our the layout of my site was fairly simple. Then again, I was able to choose a template and build it out from there. I think that if I knew how to use wireframing I would have been able to better plan how my site could flow and appear to the viewer in the most effective way, which I think is the one reason for wireframing our sites for this project.

    Although I am not in charge of wireframing for our group project, I think Eli will do a phenomenal job setting us up for success and creating an effective layout for the information we need to display. And if for some reason the wireframe doesn’t quite fit or work with our site template, I’m sure we can tweak it to fit our needs.

    I don’t think that wireframes are a necessity to create a website, but they can be helpful to visualize the format and look of your site before you get into messing around with text boxes and the like. I think that as long as you have a basic format/template to go off of, you should be fine for the most part.

    Reply
  • March 16, 2016 at 10:30 pm
    Permalink

    Great blog post Brooke! This one is tough for me because I have never used a wire frame up until this point in my life, so it’s all brand new to me. I think our wireframe is going to be pretty detailed though because we want to make sure we have everything we need and we want it to look organized. When it comes to whether or not wireframes will be beneficial for our websites… I’m not sure! It’ll be a test and learn as I go kind of thing as we dig more into wireframes.

    Reply
  • March 16, 2016 at 10:42 pm
    Permalink

    Great post! I found wireframes very confusing at first so this helped me a lot! This was very informative on what a wireframe should include.

    Reply
  • March 16, 2016 at 11:13 pm
    Permalink

    Interesting post!

    Personally, I’ve never really dabbled much in the actual creation of a website. Any of the other past blogs or forums that I started in my youth I’ve always used just whatever free template the site offered. I Knew about wire framing itself but I never knew what exactly it was called. Detailing can get so specific now, so i feel that wire framing is a necessity; as without it, you could be a severe disadvantage.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>