Author: Brian Dys

  • Hot Spotting

    Admittedly in the design industry, there are lots of terms being used to call design artifacts (not to mention their combos)—flowcharts, wireframes, wireflows, comps, FAs, and prototypes.

    A prototype is not an artifact per se but what we make of an artifact. It cuts across disciplines and stages in the design process because of its purpose—to foster innovation, collaboration, and creativity by presenting and testing it to a relevant audience.

    A set of wireframes designed to communicate a specific functionality is a prototype. Even a flowchart that communicates the flow of tasks is a prototype.

    Recently, I’ve come across the term “Click–Through Prototypes” which also is “Interactive Prototypes”—the ones wherein the test participant could click on specific elements and be taken to the next interaction point.

    I knew it from decades ago as “image–mapping” or putting “hot spots” in elements we want to be clickable.

  • Innovation Is not a Skill

    Innovation is not a skill. It is a culture, it is a mind set, a destination rarely reached, and the bountiful return on an investment made in the education of people unafraid.

    Aaron Madolora, Chief Innovation Officer, Voyager Innovations
  • Wireframes Plus Flowcharts Equals

    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?

  • Reading The Polar Bear Book

    Information Architecture: For the Web and Beyond – Book Cover
    The book cover of Information Architecture: For the Web and Beyond.

    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.

  • RE:Creation No. 1: Google | Plain Text (Round 2)

    Summary

    • Interact to reveal more content and convert into plain text
    • Structure content by grouping and labeling them based on function

    (more…)

  • The Agile Manifesto and Principles

    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.

    Agile Manifesto

    We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value:

    • Individuals and interactions over processes and tools
    • Working software over comprehensive documentation
    • Customer collaboration over contract negotiation
    • Responding to change over following a plan

    That is, while there is value in the items on the right, we value the items on the left more.

    Agile Principles

    1. Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.
    2. Welcome changing requirements, even late in development. Agile processes harness change for the customer’s competitive advantage.
    3. Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.
    4. Business people and developers must work together daily throughout the project.
    5. Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.
    6. The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.
    7. Working software is the primary measure of progress.
    8. Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.
    9. Continuous attention to technical excellence and good design enhances agility.
    10. Simplicity–the art of maximizing the amount of work not done–is essential.
    11. The best architectures, requirements, and designs emerge from self-organizing teams.
    12. At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.

    Sources

  • RE:Creation No. 1: Google | Plain Text (Round 1)

    Google Homepage
    A screenshot of Google’s homepage. 7 September 2018

    Convert Content into Plain Text

    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.

    Demo

    See the Pen RE:Creation No. 1: Google | Plain Text (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.

    Next Round

  • RE:Creation No. 1: Google

    Google Homepage
    A screenshot of Google’s homepage. 7 September 2018

    For the first episode of RE:Creation, we’ll be re-creating the most visited website in the world—Google. It looks like a fairly simple web page—both in content and functionality, so it’s a perfect choice.

    Let’s begin!

  • Introduction to RE:Creation

    What is RE:Creation?

    RE:Creation is a design and coding activity in which we reverse engineer and recreate the HTML & CSS components of a chosen web page.

    RE:Creation is short for Reverse Engineering Creation. It involves both discovery (theoretical) and delivery (technical) processes.

    Objective

    RE:Creation’s objective is to promote the fundamentals in designing digital products such as websites and web apps.

    These fundamentals revolve around design disciplines such as Information Architecture, Interaction Design, User Interface Design, Visual Design & Accessibility, and Frontend Design.

    Requirements

    The requirements to participate in a RE:Creation are simple: first, basic knowledge of HTML & CSS and second, a computer with these software:

    • Text Editor (TextEdit, Notepad)
    • Web Browser (Chrome, Firefox)

    Using these software for RE:Creation does not require internet connection.

    Alternatively, a web app called CodePen could be used online. It functions both as Text Editor and Web Browser for editing and displaying web documents, respectively.

    Dive right in!

    References