Forem: Gymnasium

Publishing Your First GitHub Pages Website

Mike Bifulco — Wed, 19 Feb 2020 16:17:12 +0000

We recently published this tutorial as part of Gymnasium's weekly Take 5 tutorial series. We're nearing 30 different Take 5s, which you can check out for free (always free, no strings attached!) on our site. You should also check out our full-length courses and hour long Gym Shorts courses.

Enjoy!

Note: This is the first video tutorial I've done - so I'm keen to hear your feedback on my presentation style! I'll be doing more Take 5s in the future, and I'm always looking to improve. Thanks in advance!

From Filler to Matter: Wireframes and Prototypes in UX Design

Mike Bifulco — Tue, 25 Jun 2019 14:56:17 +0000

The language of design can be puzzling for rookies and pros alike. Wireframing and prototyping are two terms in particular that are commonly confused, though the two have distinctly different roles in the production process. Missing these key steps can result in an unfinished product with a less cohesive user experience. Therefore, it’s crucial to understand the distinction between wireframing and prototyping and ensure that each has a place in your project.

Start out with a Wireframe

Although wireframes span a range of fidelity, they tend to be on the lower end. This means they’re rough drafts that typically leave out details and finishing touches like copy and clickable content. In other words, they’re not meant to be works of art. The key to a successful wireframe is simplicity, since it serves as the static skeleton of the finished product. Broad horizontal lines and Lorem Ipsum can serve as placeholders for text; blank boxes can substitute for images and videos; and arrows can illustrate movement and flow. Over the course of the project, these proxies will become the completed core elements of your user experience.

Whether designed through a digital sketching tool or brainstormed on a whiteboard, wireframes bring shape to your concept by defining the outline of its structure, layout, and information hierarchy. Like a building’s blueprint, wireframes map out the bigger picture and help you lay out the steps needed to make it a reality. They’re also an invaluable resource for acquiring constructive criticism on the first iteration of your idea, which can address potential problems and save time down the line for both designers and developers.

While wireframes play a critical part in the beginning stages of design and development, their most important function may arguably be to serve as a base for the production of a prototype.

Plan with a Prototype

A prototype builds muscle — function and form — on top of the skeletal wireframe and brings it to life. This gives you a realistic look at your design and its level of usability and interactivity. In contrast to low-fidelity wireframes, prototypes are higher-fidelity models that provide a tangible test drive of the end product.

Whether your goal is to facilitate user testing or present the concept to clients, prototypes are typically created through the use of software like Sketch and Axure. Through these tools, you can simulate realistic interactions with the prototype by adding features such as clickability and dynamic content. This interactivity is what turns a wireframe into a prototype. It also helps streamline the development process and makes it easier to transition from concept to execution.

However, as you’ll learn in Gymnasium’s new course, prototypes are more than just high-fidelity mockups — they’re a means for communication. As a proof of concept, prototypes can bridge the gap between designers and developers by giving both a clear picture of the final product and its functionality. This common ground fosters collaboration and gives teams the opportunity to identify and address errors before they have real-life consequences. Taking the time to do so can make your end result more polished and purposeful, according to a recent Gymnasium webinar.

According to one study, the usage of prototypes can reduce reports of post-release bugs by up to 25 percent. As designer John Maeda once said, “If a picture is worth a thousand words, a prototype is worth a thousand meetings.” Between their level of detail and ability to help clarify goals, prototypes are an indispensable asset for project management, risk reduction, and the creation of a refined product.

So, Should I Wireframe, Prototype, or Both?

Your particular process will depend on your budget and timeline. However, taking the time to use both wireframes and prototypes is one way to ensure that your user experience is optimized to be as seamless as possible. The two assets work in tandem to bring your ideas from inception to implementation and allows for feedback and fine-tuning along the way. Tempting as it is to skip the practice rounds and dive straight into the details, refining your vision and allowing it to evolve will result in a better experience — for both its users and the team behind it.

Note: this article was written by the fantastic Milo Goodman, and was originally posted to Gymnasium's Medium account. If you're a Medium-fiend, you may want to subscribe to us there, too!

Livestreaming now - rebuilding thegymnasium.com with gatsby!

Mike Bifulco — Tue, 11 Jun 2019 17:31:27 +0000

Hey y'all! I'm about to start my weekly livestream, where I work on features, issues, and updates for thegymnasium.com. You can catch me right on our homepage, or if you're a twitch user, hop on over to @irreverentmike on twitch.

Looking forward to having you there!

Update: All done - thanks for tuning in!

Webinar- Prototyping as Process

Mike Bifulco — Sat, 11 May 2019 01:16:09 +0000

Over the years, prototyping has become an integral part of digital product development. Learn what that looks like from three industry leaders.

Design aficionado Jeremy Osborn will be joined by industry experts, Dave Rupert and James Young, to discuss the ins and outs of:

Modern design documentation
The new tools that aim to improve it
Effective team communication

See you there!

Live streaming right now on Twitch! (update: All done!)

Mike Bifulco — Tue, 30 Apr 2019 17:44:01 +0000

Hey there!

I'm Mike Bifulco, Technical Director for thegymnasium.com. Once a week I jump on Twitch to livestream some of the projects I'm working on.

Coming at you live!

This week I'm working on a complete overhaul of our marketing pages using Gatsby and Storybook. It's a lot of node, and a lot of react - and I'm learning as I go. None of this scripted.

Catch the stream on our homepage, or on Twitch @irreverentmike. See you there!

Livestreaming now - building a Storybook and Gatsby front end for thegymnasium.com

Mike Bifulco — Tue, 26 Mar 2019 17:32:46 +0000

Hey there! I livestream my work on Gymnasium once a week from about 1:30-3pm EST on twitch (and on the homepage for Gymnasium).

This week I'm continuing work on new marketing pages for Gymnasium using Gatsby and Storybook. Say hi in chat if you came from Dev.to!

See you there!🎉