
đź‘‹ Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
Wireflows. First time today that I’ve read about this fairly novel artifact. What I’ve been using (and sharing with my team) is called an Interaction Diagram—which, basically, is a Task Flow Diagram plus Wireframes.
Reading that article from Nielsen Norman Group, I’ve found out that there could be a high–fidelity wireflow—which in the example given, it showed a high–fidelity mockup.
As I understand it, there’s a distinction between a wireframe and a mockup. So, how would one call a “wireflow” that instead of wireframes, uses mockups as its visuals? Mockflow?
I’m taking a refresher on Information Architecture by reading Information Architecture: For the Web and Beyond by Louis Rosenfeld, Peter Morville, and Jorge Arango.
Information Architecture is as important as planning and strategizing in general—it’s one of the first steps when designing for many kinds of information systems and digital products.
Yesterday, our team attended a lecture in Agile and Scrum. I realized that some of its principles are familiar based on our practices as designers.
We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value:
That is, while there is value in the items on the right, we value the items on the left more.
—
The first step of re-creation is to convert content into plain text. The structure isn’t important at this round. However, as a suggestion, we could start from left to right, top to bottom. For example, the first content could be seen at the top–right:
Gmail Images Menu Icon Sign In Button
Interacting with the elements is not yet required (e.g., clicking the menu icon). Convert only those that we could see visually. Later in the next round, we’ll convert the content that would be revealed while interacting with the elements.
This activity of gathering available content of a web page is part of the process called Content Inventory.
See the Pen RE:Creation No. 1: Google | Plain Text (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.