Wireframes – January SIG Meeting Wrap-Up

Happy New Year – Web Des’ers!

We missed out December gathering due to the inclement weather – a good decision on the part of our leadership, if you ask me.

wireframe example of a personal profile webpage

A wireframe document for a person profile view

This month’s meeting introduced the use of wireframing as a tool to help during the initial stages of designing a new website. This topic had been suggested by one of our attendees.

I went to my preferred source of a working definition for a new topic – wikipedia. It identifies wireframing as

. . . a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. […] The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.

Examples of available tools

* Balsamiq Mockups – https://balsamiq.com/
* Pencil – http://pencil.evolus.vn/
* Mock Plus – https://www.mockplus.com/
* Wireframe cc – https://wireframe.cc/
* Jumpchart – https://jumpchart.com/
* Mockflow – https://www.mockflow.com/

Cool Tool

This month’s cool tool, unrelated to web design, came to my attention during a webinar I attended this week on website troubleshooting.

Troubleshoot.press – a work-in-progress website that attempts to walk you through the process of troubleshooting a problem on your WordPress website. While focusing on WordPress, the concepts apply to any website.

Ideas for Upcoming Meetings?

Feel free to ask questions, offer feedback, or suggest topics for an upcoming meeting via the form below.

Use this form to offer feedback, suggest topics or ask questions.
  • This field is for validation purposes and should be left unchanged.

Leave a Reply

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