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.
—
RE:Creation is a design 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.
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.
The requirements to participate in a RE:Creation are simple: first, basic knowledge of HTML & CSS and second, a computer with these software:
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.
The Stages of Frontend Design serves as an overview of the whole process.
Recently, the team is delving into gamification—ultimately, towards user engagement. Glad to have encountered the ARCS model of instructional design which is similar to the engagement loop.
ARCS stands for: Attention, Relevance, Confidence, Satisfaction—which could also be an engagement loop in learning.
I still could not wrap my head around the whole idea of frames. However, I did like the structure that was described in relation to linguistics.
We could notice the structure—from the detail towards the bigger picture. Patterns like these are also relevant to Information Architecture.
How about applying the DRY Principle in a user interface?
One method is by using a single element to have multiple functions. In the case of a <label> and a placeholder attribute in a <form>, we could simply use the <label> to be the only label of a particular field—as opposed to having two.
Besides, their main functions are to tell the user what field it is and what it expects as a user input—so why not optimize it?
Regarding its accessibility, please read an 2010 article from WebAIM and a recent one from Smashing Magazine.
Here’s a quick PoC. Try focusing on a field and see the label move.
<p class="codepen" data-height="300" data-theme-id="1820" data-slug-hash="YjowRP" data-default-tab="result" data-user="BrianSahagun" data-pen-title="Using
Ideally, it is 48 x 48 pixels. However, there are elements that needs to be smaller in relation to other elements with it—with this consideration, we could go down until 32 x 32 pixels.
In order to show cohesion and relation between two UI elements, we could use proximity—place the element near each other. However, when there are more important considerations like if space won’t permit one element to be there, we could use motion to cue that those two elements belong together.
The elements in relation to the user’s “now”.
Elements that are there only when you need it and also there when you thought you didn’t need it.
Numbers 3 and 4 fall under Relevance.
The outcome most teams are aiming for is a change in behaviour. The outcome you want will depend on your business or organisation: it might be selling more dog food, getting people to sign up to a monthly donation to your charity, or opting for mediation over court in their separation. Source
When deciding the number of characters an item could have, consider thinking about it being in other platforms.
There could be two approaches in defining elements in a User Interface (UI):
Say, for example, we have a blog post that has a date. In order to define what kind of date it is, we could either define it in a sentence:
or we could define it thru a label:
Please note that in order to create an effective description that communicates its purpose, we have to identify the context in which the element is in.
In finding the best term for separating a collection of items, which to use—list or group?
Brain dump:
List implies linearity, structure.
Group implies randomness.
—
In generalizing the semantics of all items in a collection—in an HTML document—go for group.
<ul class="list group">…</ul> <div class="group">…</div> <dl class="list group">…</dl>
—
It is important to note that the all HTML elements in the examples could express hierarchy by nesting other elements—but it is in the collection of items that list or group provides semantics.
To recap:
Use list for collection of items that implies order (yes, even for <ul>).
Use group for collection of items that does not imply order.
