Compare commits
2 commits
d302937c84
...
e1df4753ad
| Author | SHA1 | Date | |
|---|---|---|---|
| e1df4753ad | |||
| 8cf645c601 |
25 changed files with 572 additions and 201 deletions
|
|
@ -1 +1 @@
|
|||
./weblog/styles.css.md
|
||||
./weblog/B0. Template/styles.css.md
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
Type: Template
|
||||
Title: Page Template
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{weblog-title}{separator}{post-title}</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{feeds}
|
||||
<style>
|
||||
@import url('https://static.omg.lol/type/font-honey.css');
|
||||
@import url('https://static.omg.lol/type/font-lato-regular.css');
|
||||
@import url('https://static.omg.lol/type/font-lato-bold.css');
|
||||
@import url('https://static.omg.lol/type/font-lato-italic.css');
|
||||
@import url('https://static.omg.lol/type/font-md-io.css');
|
||||
@import url('https://static.omg.lol/type/fontawesome-free/css/all.css');
|
||||
|
||||
:root {
|
||||
--foreground: #212529;
|
||||
--background: #f8f9fa;
|
||||
--link: #0b7285;
|
||||
--accent: #868e96;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground: #eee;
|
||||
--background: #222;
|
||||
--link: #99e9f2;
|
||||
--accent: #ced4da;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 120%;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'VC Honey Deck', serif;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
p, li {
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
max-width: 60em;
|
||||
margin: 2em auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-top: 5em;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link { color: var(--link); }
|
||||
a:visited { color: var(--link); }
|
||||
a:hover { color: var(--link); }
|
||||
a:active { color: var(--link); }
|
||||
|
||||
.post-info, .post-tags {
|
||||
font-size: 85%;
|
||||
color: var(--accent);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.post-info i:nth-child(2) {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--accent);
|
||||
color: var(--background) !important;
|
||||
padding: .3em .4em;
|
||||
margin: .8em 0 0 .4em;
|
||||
border-radius: .5em;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #333;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .2em .3em;
|
||||
border: 1px solid var(--accent);
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'MD IO 0.4';
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: #000;
|
||||
color: #eee;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: .75em;
|
||||
text-align: left;
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.weblog-title a {
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1 class="weblog-title"><a href="{base-path}">{weblog-title}</a></h1>
|
||||
{navigation}
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
{body}
|
||||
|
||||
<hr>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Made with <a href="https://weblog.lol">weblog.lol</a>.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
Date: 2024-05-06 02:24
|
||||
---
|
||||
|
||||
# Your new post
|
||||
|
||||
This is a new blog post. You can author it in _Markdown_, which is **awesome**.
|
||||
33
weblog/B0. Template/template-page.html.md
Normal file
33
weblog/B0. Template/template-page.html.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
Type: Template
|
||||
Title: Page Template
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{weblog-title}{separator}{post-title}</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/styles.css?v0.0.3">
|
||||
{feeds}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1 class="weblog-title"><a href="{base-path}">{weblog-title}</a></h1>
|
||||
{navigation}
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
{body}
|
||||
|
||||
<hr>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Made with <a href="https://weblog.lol">weblog.lol</a>.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.11 Pokémon War – A Pokémon RTS
|
||||
date: 2011-03-24
|
||||
location: /B1.11
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, pokemon, idea, games
|
||||
---
|
||||
|
||||
# Pokémon War – A Pokémon RTS
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.12 Story idea involving futuristic mechs
|
||||
date: 2011-04-01
|
||||
location: /B1.12
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, story
|
||||
---
|
||||
|
||||
# Story idea involving futuristic mechs
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.13 BIT.TRIP Arcade Style
|
||||
date: 2011-04-05
|
||||
location: /B1.13
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, games, controllers
|
||||
---
|
||||
|
||||
# BIT.TRIP Arcade Style
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.14 Armchair App
|
||||
date: 2011-04-06
|
||||
location: /B1.14
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, apps, RSS
|
||||
---
|
||||
|
||||
# Armchair App
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: B1.15 JamLegend shutting down
|
|||
date: 2011-04-20
|
||||
image: https://i0.wp.com/browser-game.it/wp-content/uploads/2010/07/jamlegend.jpg
|
||||
location: /B1.15
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, games, music
|
||||
---
|
||||
|
||||
# JamLegend shutting down
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.16 Inception app – moar plz?
|
||||
date: 2011-04-20
|
||||
location: /B1.16
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, apps, music, inception
|
||||
---
|
||||
|
||||
# Inception app – moar plz?
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.17 Wikinauts — Multiplatform Scribblenauts
|
||||
date: 2011-04-27
|
||||
location: /B1.17
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, games, scribblenauts
|
||||
---
|
||||
|
||||
# Wikinauts — Multiplatform Scribblenauts
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: B1.18 Narbacular Science – A Portal Map Pack Idea
|
||||
date: 2011-05-13
|
||||
location: /B1.18
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, games, portal
|
||||
---
|
||||
|
||||
# Narbacular Science – A Portal Map Pack Idea
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: B1.19 iOS IM With Quick Reply
|
|||
date: 2011-06-14
|
||||
image: https://deathau.files.wordpress.com/2011/06/20110614-070000.jpg
|
||||
location: /B1.19
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, apps, iOS
|
||||
---
|
||||
|
||||
# iOS IM With Quick Reply
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: B1.20 Martyrdom sucks: why it's so wonderful
|
|||
date: 2011-06-23
|
||||
type: draft
|
||||
location: /B1.20
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, unfinished, games
|
||||
---
|
||||
|
||||
# Martyrdom sucks: why it's so wonderful
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: B1.21 The FoFiX Days
|
|||
date: 2011-06-24
|
||||
image: https://deathau.files.wordpress.com/2011/06/20110624-065632.jpg
|
||||
location: /B1.21
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, games, music, self-reflection
|
||||
---
|
||||
|
||||
# The FoFiX Days
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: B1.22 Game Idea — The Humble Indie Rumble
|
|||
date: 2012-06-09
|
||||
# type: draft
|
||||
location: /B1.22
|
||||
tags: Pro Tanto
|
||||
tags: Pro Tanto, idea, games, unfinished
|
||||
---
|
||||
|
||||
# Game Idea — The Humble Indie Rumble
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: B2.11 Just Give Us the Throttles We Can Use
|
||||
date: 2019-08-13
|
||||
summary: Modern touchscreen applications leave old mechanical controls behind. And it's not always for the better. In this case, lives were lost...
|
||||
image: https://media.licdn.com/dms/image/C5612AQEfzYWmIoNkfA/article-cover_image-shrink_720_1280/0/1565676542618?e=1715212800&v=beta&t=F-2BeTD68RJC4mWfshV_nODxEIAt8vQXDT4aqhpQbTg
|
||||
location: /B2.11
|
||||
tags: Aerion, LinkedIn, UI, UX
|
||||
---
|
||||
|
||||
# Just Give Us the Throttles We Can Use
|
||||
*Modern touchscreen applications leave old mechanical controls behind. And it's not always for the better. In this case, lives were lost...*
|
||||
|
||||
|
||||
In the early morning on August 21, 2017, the US Navy destroyer _John S McCain_ was in the Singapore Strait – one of the busiest waterways in the world – inbound for a port call in Singapore. Through a lot of confusion about the ship's controls, the ship started veering port. Within about three minutes, another ship had struck the starboard side of the _John S McCain_. The impact breached the hull in a berthing compartment, and 10 sailors were killed.
|
||||
|
||||
Recently, the National Transportation Safety Board released an [accident report](https://www.ntsb.gov/investigations/AccidentReports/Reports/MAR1901.pdf) for the incident. There were many factors that led to this unfortunate circumstance, from fatigue to a lack of training, but one thing that stood out was the touch-screen controls for thrust and steering.
|
||||
|
||||
The NTSB report suggests that had mechanical throttles been present, the helmsmen would have likely been able to feel the problems in steering and correct for them much more quickly. They note that mechanical throttles are preferred because “they provide both immediate and tactile feedback to the operator.”
|
||||
|
||||
During a keynote speech at the American Society of Naval Engineers’ annual Fleet Maintenance and Modernization Symposium, Program Executive Officer for Ships Rear Adm. Bill Galinis said as a result of innovation and a desire to incorporate new technology, “we got away from the physical throttles, and that was probably the number-one feedback from the fleet – they said, just give us the throttles that we can use.”
|
||||
|
||||
“When we started getting the feedback from the fleet from the Comprehensive Review effort – it was SEA 21 (NAVSEA’s surface ship lifecycle management organization) that kind of took the lead on doing some fleet surveys and whatnot – it was really eye-opening. And it goes into the, in my mind, ‘just because you can doesn’t mean you should’ category."
|
||||
|
||||
In our modern world, there's a constant push towards new technology and innovations. This is often a good thing, but there are also times when new technology is deployed because that's what everyone else is doing, and not enough thought is put into the 'why'. Just because you can, doesn't mean you should.
|
||||
|
||||
Take the time to better understand what the underlying issues are. Work out the weaknesses of the current systems and find ways to modernise and improve them. But also pay attention to the stuff that works well in the current system and try to factor that into the new design. Just give us the throttles that we can use.
|
||||
|
||||
**References:**
|
||||
|
||||
[Marine Accident Report NTSB/MAR-19/01](https://www.ntsb.gov/investigations/AccidentReports/Reports/MAR1901.pdf)
|
||||
|
||||
[USNI News](https://news.usni.org/2019/08/09/navy-reverting-ddgs-back-to-physical-throttles-after-fleet-rejects-touchscreen-controls), via [The Verge](https://www.theverge.com/2019/8/11/20800111/us-navy-uss-john-s-mccain-crash-ntsb-report-touchscreen-mechanical-controls)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
title: B2.12 How Slack Can Help Drive Customer Engagement
|
||||
date: 2019-11-14
|
||||
image: https://media.licdn.com/dms/image/C5112AQEC0UbqUVmsQQ/article-cover_image-shrink_720_1280/0/1573684609894?e=1715212800&v=beta&t=NiPtUzSLT5S0jo1Gvyn5iAc4gMb5NETezENp88JVKGA
|
||||
summary: You may already know Slack as the team communication platform it was designed to be. But did you know you can also use it as a customer engagement tool?
|
||||
location: /B2.12
|
||||
tags: Aerion, LinkedIn, Slack
|
||||
---
|
||||
|
||||
# How Slack Can Help Drive Customer Engagement
|
||||
*You may already know Slack as the team communication platform it was designed to be. But did you know you can also use it as a customer engagement tool?*
|
||||
|
||||
|
||||
|
||||
You may already know Slack as the team communication platform it was designed to be. Conceived as a way to facilitate team communication and increase workplace productivity, Slack allows teams to collaborate and be more productive through the use of bots. But did you know you can also use it as a customer engagement tool?
|
||||
|
||||
### Integrate with your existing tools
|
||||
|
||||
|
||||
|
||||
You may be using an existing CRM, help desk or other tools to drive your customer engagement currently. If so, you can probably find an integration in the Slack app directory to connect to your existing tools. In this way, you can interact with the tool, and perhaps your customers and leads directly from within Slack.
|
||||
|
||||
For example, you may have something like Intercom set up on your website and you can use the integration to communicate directly with customers and leads through the same tool you use to communicate with your colleagues. Or you could get notifications from helpdesk systems like Freshdesk or Zendesk directly in Slack.
|
||||
|
||||
### Use Slack-based tools
|
||||
|
||||
|
||||
|
||||
The Slack apps directory also includes many customer engagement tools you can use from directly within Slack. For example, tools like Slaask or Chatlio let you embed a chat window on your website which will create channels in Slack for you to talk directly to your customers and leads. Talkus allows you to receive customer emails in Slack and even track support tickets.
|
||||
|
||||
### Get your users in on Slack
|
||||
|
||||
|
||||
|
||||
Slack itself can be used as a community for your customers, like your own private social network. You can create some open channels, then share a join link with those you want to join your community, or publish it publicly for anyone to join. Private channels can be created for your team, or community members you choose. You can also use the power of Slack's apps and bots to engage directly with the members of your community.
|
||||
|
||||
### Share and collaborate with others on Slack
|
||||
|
||||
|
||||
|
||||
If you're a business that serves other businesses on ongoing projects, then oftentimes they will also use Slack. But rather than have individuals join your slack channels (or you join theirs) and have to juggle multiple workspaces, Slack has a new feature in beta called Shared Channels, where one channel can exist across multiple workspaces and have members from both. This allows for better communication and collaboration. And if they don't use Slack, there are other options to help connect other chat programs with Slack, such as the Sameroom bot, or integrations with other tools such as the Field Trip app for integration with Basecamp.
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
---
|
||||
title: B2.13
|
||||
date: 2019-12-10
|
||||
summary: "So, what even is wireframing and how do you do it? What tools do you use? How does it tie in with the eventual \"complete\" design? Why is it even necessary?
|
||||
Wireframes are a crucial tool in the early stages of any project – the clarity they provide to your conceptualisation, refinement and features is unparalleled. They can come in all shapes and sizes (depending on your type of app) as well as a varying level of detail included in them."
|
||||
image: https://media.licdn.com/dms/image/C4E12AQFWHAirZmaIfw/article-cover_image-shrink_720_1280/0/1575930360239?e=1715212800&v=beta&t=h9E5RMkgLTujzVAuJh7WH8VfaIg1G1p8trRYMMu9cCE
|
||||
location: /B2.13
|
||||
tags: Aerion, LinkedIn, Wireframes
|
||||
---
|
||||
|
||||
# 5 Types of Wireframes & Prototypes
|
||||
*So, what even is wireframing and how do you do it? What tools do you use? How does it tie in with the eventual \"complete\" design? Why is it even necessary?*
|
||||
|
||||
|
||||
|
||||
Wireframes are a crucial tool in the early stages of any project – the clarity they provide to your conceptualisation, refinement and features is unparalleled. They can come in all shapes and sizes (depending on your type of app) as well as a varying level of detail included in them.
|
||||
|
||||
One of the main benefits of wireframing is that they allow for clarification of terms that are thrown around in the early stage. When someone says "Google Map" or "pop-up", etc you can actually visualise how that feature should be developed and used – it's no longer left to be ambiguous.
|
||||
|
||||
As a visual tool, they approach the design of your app from a graphic and user-centred approach rather than a technical perspective that developers may focus on. The user experience should be first and foremost when designing wireframes – after all, who wants to continue using a difficult and clumsy app?
|
||||
|
||||
They are a useful tool in the design process as they allow decisions to be quickly evaluated for the usability and flow of processes as well as for the look and feel prior to development. They are also a quick way to iterate through features and thought processes.
|
||||
|
||||
|
||||
|
||||
Wireframes can be thought of as providing the "blueprint" for software developers on what the app should do and helps them identify what needs to be prototyped and what to experiment with at the early stages to help reduce risk and unknowns when moving into development.
|
||||
|
||||
There are many ways your designers can create wireframes. Each level requires more effort but also provides more detail and clarity to the design. Some things that go hand-in-hand with the extra detail at each level are the decisions and items that clients will fixate on. Its best to move through each level sequentially otherwise they may be focusing on the font-type or colours rather than the structure or elements at the early stages.
|
||||
|
||||
The wireframing process should follow a bottom-up approach and start with the least amount of detail to allow structural elements to be decided and then provide more detail as decisions are made and the direction of the app becomes more clear.
|
||||
|
||||
The 5 different wireframe approaches that we follow are:
|
||||
|
||||
- Hand-Drawn
|
||||
- Lo-Fi
|
||||
- Hi-Fi
|
||||
- Clickable Prototypes
|
||||
- Interactive Prototypes & Simulations
|
||||
|
||||
## Hand-Drawn
|
||||
|
||||
|
||||
|
||||
This is the simplest method of creating wireframes and getting your idea down. All you need is some paper and a Pen or Pencil and start sketching out your ideas for screens. It's rough, it's crude, but it puts your ideas down on paper and starts to solidify your ideas and concepts. Just through this simple process you might even revise and refine certain aspects as once you can actually see it you might start getting new ideas or figure out how to improve it.
|
||||
|
||||
An easy way to step up the quality from a rough sketch on pen and paper is download and print out some phone or screen templates and use those with a ruler to draw your designs in a frame that looks like where it will end up.
|
||||
|
||||
### Tools
|
||||
|
||||
Obviously, hand-drawing a wireframe requires only a pencil and paper (or whiteboard and markers) and your imagination, however, there are some tools that can help frame your wireframes better
|
||||
|
||||
For example, here are some printable templates that you can download for free:
|
||||
|
||||
- [https://sketchize.com/](https://sketchize.com/)
|
||||
- [https://sneakpeekit.com/](https://sneakpeekit.com/)
|
||||
- [https://sketchsheets.com](https://sketchsheets.com/)
|
||||
- [http://www.raincreativelab.com/paperbrowser/](http://www.raincreativelab.com/paperbrowser/)
|
||||
|
||||
There are also products specifically designed for helping you with hand-drawn wireframes that you can purchase online. For example, the website [UI Stencils](https://www.uistencils.com/) provides a range of stencils with common UI elements from iOS, Android and Web applications. They also provide a range of sketch pads and sticky notes with phone and web browser borders to get you in the right frame of mind for sketching UIs.
|
||||
|
||||
There are also tools like [Marvel's POP app](https://marvelapp.com/pop) which help you bridge the gap between paper prototypes and further stages of wireframing by digitizing your paper sketches and allowing you to string them together in the form of a clickable prototype, as talked about later in this article.
|
||||
|
||||
## Lo-Fi
|
||||
|
||||
|
||||
|
||||
Lo-Fi wireframes are a large step up from hand-drawn, even though you can use a visual style that looks like it's sketched. This is where you begin using a software tool to start visualising your designs. Moving to this process allows for editing and grouping and be able to arrange your screens. Some platforms provide component packs that allow you to easily add a button or a popup to a screen to get your point across easier. There's no point in creating everything yourself when you can leverage the components available.
|
||||
|
||||
These are a great starting point for developers – who aren't designers – to get a point and idea across and provide a general feel and direction for the application's functionality.
|
||||
|
||||
### Tools
|
||||
|
||||
There are many tools for creating lo-fi wireframes, ranging all the way from drawing something from scratch in Microsoft Paint, all the way through to tools designed to create clickable wireframes with large libraries of (lo-fi) pre-made UI components.
|
||||
|
||||
One great tool we've used is [Draw.io](https://www.draw.io/). It can easily integrate into Google Drive or Microsoft OneDrive, and is great for making flowcharts, process diagrams and a whole bunch more. It also has a library of components and shapes to quickly and easily get started making lo-fi wireframes for iOS & Android, or mockup components for any kind of wireframe you want to create.
|
||||
|
||||
We've also used some other great wireframing-specific tools like [Proto.io](https://proto.io/) and [Balsamiq](https://balsamiq.com/) that make wireframing easy and can easily progress from lo-fi wireframing onto more well-defined hi-fi wireframes through to clickable prototypes.
|
||||
|
||||
## Hi-Fi
|
||||
|
||||
|
||||
|
||||
Hi-Fi wireframes are a term we use to describe UI wireframes that are completely designed, include your branding, and are pretty close to the final versions of your screens. They are handed over to the developer prior to implementation and are the plan for how the UI should look and feel.
|
||||
|
||||
This is the point where the customers start to feel like they own the designs. Once their branding and logo are used, it begins to feel like their app. It can take quite a while to get to this point as a lot more things have to be considered to add enough detail e.g.
|
||||
|
||||
- transitions
|
||||
- animations
|
||||
- hover colours
|
||||
- hover interactions
|
||||
- font-sizes
|
||||
- font-types etc.
|
||||
|
||||
### Tools
|
||||
|
||||
Sometimes when you get to the hi-fi wireframing stage, you will have engaged a graphic design agency, and they may provide wireframes and designs in whichever tool they use for designing. These tools are usually used for their flexibility and power when it comes to graphical design.
|
||||
|
||||
Adobe's ubiquitous [Photoshop](https://photoshop.com/) is a common tool for making high-quality designs and often used to make hi-fi wireframes. It's complex to try and make storyboards, and exact positioning can be tricky, but it's a tool a lot of designers know and love. Photoshop is a powerful tool for any high fidelity design work.
|
||||
|
||||
A great tool for hi-fi wireframing is [Sketch](https://www.sketch.com/) which allows the creation of reusable components and allows you to divide up your wireframes into pages and artboards. It also has the ability to make clickable prototypes (see below) and has advanced options for layouts, effects, vector editing and more. It's a preferred tool for many designers. Also, take a look at Figma for a web-based tool that provides similar functionality
|
||||
|
||||
## Clickable Prototypes
|
||||
|
||||
|
||||
|
||||
The next step from Hi-Fi wireframes would be to produce clickable prototypes. This can be done for Lo-Fi as well but it seems to have more impact when you begin clicking through wireframes that look like the final polished app. The clickable prototypes allow users, designers and developers to understand how the app will flow between screens, which buttons do what, etc. It's a great way to get further insights and opinions from users as they can step-through the app without you having to invest a large amount of time and resources in creating a functioning prototype to do the same thing.
|
||||
|
||||
### Tools
|
||||
|
||||
[Adobe XD](https://www.adobe.com/au/products/xd.html) is a powerful, collaborative platform for creating designs and clickable prototypes. It's designed to help create everything from basic wireframes up to beautiful designs including re-usable components and design systems. Beyond simple clicking, XD also supports triggers such as time-based events and keyboard input, through to voice commands and game controllers. Designs and prototypes can be shared online for review and collaboration, as well as Design Specs for developers to work from.
|
||||
|
||||
We're also big fans of [Figma](https://www.figma.com/), which has a lot of the same features as XD, with a greater emphasis on collaboration. It works online through a website or desktop app and allows real-time collaboration - showing the cursors of other users as they work. It's quick and easy to create clickable prototypes to link together different screens, dynamic overlays and more. Previews you share for review update in real-time as you make edits, so everything's always up-to-date (and you can utilize versioning so as not to lose previous work).
|
||||
|
||||
## Interactive Prototypes & Simulations
|
||||
|
||||
|
||||
|
||||
The last possible step prior to the development of your complete app would be to develop a prototype app. This means you can follow the same process for your clickable prototype but extend it into an actual application that is the basis for your app.
|
||||
|
||||
This involves the development of all your UI's as an actual mobile app, website or front-end. This is actual development and the process shifts from designer to the developer. However, everything that is made at this stage can be used moving forward. Anything that is developed for the prototype can and should be leveraged when you proceed with final development.
|
||||
|
||||
Some developers might do a "quick and nasty" build to get this step done but they should really proceed as if they were starting the proper development so that the time and effort is not wasted and needed to be done again.
|
||||
|
||||
As these prototypes are coded into actual apps, you also have the ability to extend the prototype into a simulation – based on data – which can show users how things will look over time.
|
||||
|
||||
As an example, imagine you have a real-time dashboard in your app. The basic prototype will show static data on that page. A simulation will load in a data set and feed it into the dashboard to show the dashboard changing over time, based on the data it is provided with. When following this method you also have the option of changing the speed of the data retrieval and, for example, showing a whole day's worth of data in one minute.
|
||||
|
||||
## There's No One-Size-Fits-All solution
|
||||
|
||||
|
||||
|
||||
We've presented a rough guide on the different wireframing and prototyping approaches we use, but this doesn't mean you have to follow the process through all of these stages for every project you develop. Sometimes if you're building a small feature onto an existing system with a polished design, Lo-Fi wireframes are all you need to get to development. Other times, you may end up building an interactive prototype or simulation before the graphic design is finalized to prove that the concept will work before pouring resources into the design.
|
||||
|
||||
Nor is this an exhaustive guide to every approach to visually designing an application or system. Flow charts, process diagrams and site maps can also be useful. In their _Shape Up_ book, Basecamp presents the idea of "[breadboarding](https://basecamp.com/shapeup/1.3-chapter-04#breadboarding)" - an approach for defining the elements required for a process or a feature to work, without getting into design decisions like layout that factor even into basic hand-drawn wireframes. This can also be a useful tool to provide clarity to a project that could be expanded into Lo-Fi or Hi-Fi wireframes when the time comes.
|
||||
|
||||
The key here is to introduce clarity about what it is you are trying to develop. It pays to start with rough sketches and concepts in order to clarify the needs and functionality of the idea. From here you can progress into clarifying UX decisions – about _how_ the end-users will be using this functionality. Finer details about font size and colours also need to be clarified, but these can be established much later in the process.
|
||||
|
||||
The clearer you are at each step of the process, the fewer decisions need to be made as you get into development – and the better the result becomes.
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
title: B3.11 An outlet for my writing
|
||||
date: 2020-01-06
|
||||
summary: It's the first issue. Do you really expect a witty subtitle?
|
||||
image: https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Ffa133251-895f-4bb5-bdcc-7fcf412bcd52_1600x1200.png
|
||||
location: /B3.11
|
||||
tags: Newsletter, self-reflection, Ted Nelson, Thad Starner, wearables, Zettelkasten, Niklas Luhmann, Roam, PKM
|
||||
---
|
||||
|
||||
# An outlet for my writing
|
||||
*It's the first issue. Do you really expect a witty subtitle?*
|
||||
|
||||
|
||||
|
||||
# What is this?
|
||||
|
||||
I've been thinking for a long time how I want to write more. I've made many attempts to start journals and blogs, and have just never quite stuck to any of them. There are probably many reasons behind this, but a major one is that I'm a procrastinator. I just sit on things and never finish them.
|
||||
|
||||
A little while ago, I read an article by Khe Hy of RadReads ([go subscribe to his newsletter](https://radreads.co/))) about [how starting an email newsletter will change your life](https://radreads.co/start-email-newsletter/) and it started my gears turning. I came to the conclusion that if I do start an email newsletter, that gives me a regular interval to stick to, instead of trying to write stuff every day or sporadically when I remember an old blog exists.
|
||||
|
||||
This comes at the same time I have discovered [Roam Research](https://roamresearch.com/) which is a great note-taking tool which excels at linking ideas (something I've really struggled with in other platforms). So this year, I've resolved to take more notes on the things I read, and having an outlet for those ideas in the form of a recurring newsletter seems like great motivation to stick to that.
|
||||
|
||||
The best way I've found in my own experience to reinforce my knowledge on any topic is to share it with others. Writing it down is all well and good, but I rarely go back and look at old notes (I'm hoping Roam will help with that). Sharing the knowledge with someone else and then having them provide feedback or ask questions makes me think about the topic in a new way and helps embed the knowledge permanently into my brain.
|
||||
|
||||
I haven't yet fully committed to a schedule or format for this newsletter yet (I've already procrastinated past the initial deadline I set for myself), but hopefully you can still learn something. Go read some RadReads articles, play around with Roam, or have a look at some of this other stuff I'm linking off to:
|
||||
|
||||
# Stuff I've found interesting recently:
|
||||
|
||||
## [Ted Nelson - Xanadu Basics](https://youtu.be/hMKy52Intac)
|
||||
|
||||
I recently discovered a [video series](https://youtu.be/hMKy52Intac) by Ted Nelson explaining the concepts behind his Xanadu system, which seems to be a kind of alternative to HTML and the Internet before it became a big thing. Kinda like a VHS vs Betamax thing, except I'd never heard of Xanadu before.
|
||||
|
||||
Its big differentiator with HTML is the way things are linked. Where HTML uses one-way "jump links", Xanadu links are two-way and sources for the links are loaded in advance and visible in the periphery.
|
||||
|
||||
This means quotes are always linked to their original, in-context source, marginalia and footnotes hover around their original context, and it's simple to branch off topics and tangents without breaking the flow of the text.
|
||||
|
||||
I sort of wish I lived in the alternate universe where Xanadu beat out HTML and became the way the Internet works. It works a lot more like my brain works. It's just unfortunate that there's no widespread software utilising its principals fully.
|
||||
|
||||
Go watch the [video series](https://youtu.be/hMKy52Intac). Ted has a bit of a "grumpy old man" vibe about him, but he has good reason - his ideas are solid and worth pursuing.
|
||||
|
||||
## [Huffington Post - Meet Thad Starner](https://www.huffpost.com/entry/the-art-of-finding_b_3982289)
|
||||
|
||||
[This is an old article](https://www.huffpost.com/entry/the-art-of-finding_b_3982289) (from 2013) about a man named Thad Starner who ended up as one of the main designers behind Google Glass because of his experience in living with a computer strapped to his face since 1993.
|
||||
|
||||
I first head of him in an episode of the [Wireframe podcast](https://xd.adobe.com/ideas/perspectives/wireframe-podcast/good-design-is-why-not-wearing-ar-glasses-episode-5/) by Adobe and I remember thinking at the time that his setup sounded awesome, but there was no way I'd be able to concentrate on having a conversation as well as taking notes and retrieving notes from previous conversations. It sounded like a lot of work.
|
||||
|
||||
But now that I've started using Roam and discovered the power of bi-directional linking, I've realised how possible a system like this really is. It's just a pity Google Glass never went mainstream...
|
||||
|
||||
## [Phil Houtz - Zettelkasten](https://writingcooperative.com/zettelkasten-its-like-gtd-for-writing-and-here-s-why-you-should-consider-it-7dddf02be394)
|
||||
|
||||
In looking into Roam, I've head about this thing called Zettelkasten, which is supposed to be a framework for taking and linking notes.
|
||||
|
||||
I found [this article](https://writingcooperative.com/zettelkasten-its-like-gtd-for-writing-and-here-s-why-you-should-consider-it-7dddf02be394) by Phil Houtz explaining the concept. Each note consists of a single thought consisting of a single paragraph or a couple of sentences. Each note has its own home in a filing system so it can be found again, along with a unique identifier for linking related thoughts and ideas.
|
||||
|
||||
It seems like a lot of work to manage a system like this using physical cards as Zettelkasten's inventor, Niklas Luhmann, did but in this age of digital tools, variations on this practice make perfect sense.
|
||||
|
||||
The aim is to build a system of knowledge that can be queried and communicated with. Like having your own personal external intelligence. The idea is intriguing, and I really hope I can build something like that for myself with Roam
|
||||
|
||||
# DevReady writing
|
||||
|
||||
I work for a software development company called [Aerion Technologies](https://aerion.com.au/), and we've built ourselves a process for designing and managing software development we call [DevReady](https://devready.design/). We're now aiming to educate people on not just this process, but how to actually go about turning an idea into software.
|
||||
|
||||
There's a lot that goes into the process of building software. A lot of people start off by documenting their idea, handing it over to developers and expecting their dreams to come true in 6-12 months. In reality, there's a lot of work that goes into the idea before it's dev ready (get it?) and that's what we aim to educate people about. Everything from refining the idea, to defining an MVP, to finding a team and the nitty-gritty of managing that team to deliver on your outcomes.
|
||||
|
||||
Over the coming months we plan to write a lot more, and I want to use this newsletter as an opportunity to share some of the writing I am doing on these topics. I haven't written a lot myself yet, but I plan to change that soon and hopefully this newsletter can help motivate me to continue writing more articles
|
||||
|
||||
## [Just Give Us the Throttles We Can Use](https://aerion.com.au/2019/08/13/just-give-us-the-throttles-we-can-use/)
|
||||
[
|
||||
](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fe8c8fddb-7e7e-4133-866b-0fa86fb335b5_768x560.jpeg)
|
||||
|
||||
Modern touchscreen applications leave old mechanical controls behind. And it's not always for the better. In this case, lives were lost...
|
||||
|
||||
## [5 Types Of Wireframes & Prototypes](https://aerion.com.au/2019/12/10/5-types-of-wireframes-prototypes/)
|
||||
|
||||
[
|
||||
|
||||
](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F767225dc-9083-4f7f-affb-814e0e248349_768x512.jpeg)
|
||||
|
||||
So, what even is wireframing and how do you do it? What tools do you use? How does it tie in with the eventual "complete" design? Why is it even necessary?
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: B3.12 Sculpting myself
|
||||
date: 2020-01-20
|
||||
summary: Oh, that's right, I never introduced myself...
|
||||
image: https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fa43d371f-d1ee-4795-b797-6641d22dc93e_1920x1080.jpeg
|
||||
location: /B3.12
|
||||
tags: Newsletter, self-reflection, animorphs, Duncan Sabian, podcast, jobs-to-be-done
|
||||
---
|
||||
|
||||
# Sculpting myself
|
||||
*Oh, that's right, I never introduced myself...*
|
||||
|
||||
|
||||
|
||||
# Who Am I?
|
||||
|
||||
My first issue established my purpose for starting up this newsletter, but I never actually introduced who I was.
|
||||
|
||||
So who am I?
|
||||
|
||||
Turns out, I'm not sure.
|
||||
|
||||
My name is Gordon Pedersen, and I'm a software developer and designer for [Aerion Technologies](https://aerion.com.au/). I have various interests in software development, consumer tech, gaming and productivity/PKM (Personal Knowledge Management).
|
||||
|
||||
But lately, I've been thinking about the topic of who I am, internally, and come up mostly empty. I've never really been good at looking to the future, and the very typical question of "Where do you see yourself in x years?" usually stumps me. Even when x = 1.
|
||||
|
||||
But I've been reading a [rational fanfiction based on the Animorphs books](https://archiveofourown.org/works/5627803/) I loved so much when I was younger, and one of the main themes that is hitting me is the various characters' explorations of their sense of self.
|
||||
|
||||
The main antagonist has the very villain-trope-y end goal of immortality, but in his exploration of how to attain it, he's very careful to make sure any future version of him is still _him_. The story has just hit a point where he's noticed something different in his own thought processes, which starts him questioning which _parts_ of those thoughts are him and which are not.
|
||||
|
||||
Completely separate to that, a different character starts questioning who she wants to be and noticing how she's changing. How she felt like some of the changes were good and some bad, like she was "a sculptor comparing each new chisel mark against the grand vision".
|
||||
|
||||
But what is this "grand vision"? Who is the sculptor that gets to decide what to keep and what to chip away?
|
||||
|
||||
The answer is both incredibly complex, perhaps even unknowable - but simultaneously incredibly simple: You.
|
||||
|
||||
You are the sculptor of your own self. You get to decide who you are and who you are not. The trick is recognising what is happening and intentionally making the decisions.
|
||||
|
||||
So who am I? How do I know what parts of me to chip away at? I got in touch with the author of the story and he gave me some sound advice:
|
||||
|
||||
> Practice building up the _yes, that's it_ skill within yourself. Like, the skill of noticing when a phrase perfectly matches an emotion, or when a proposed meal perfectly matches the hunger you're feeling.
|
||||
>
|
||||
> I think you're most likely to find fulfillment (rather than disappointment or failure or discontent) along a path where you recognize what you "should be trying to shape yourself into" rather than generating it from whole cloth.
|
||||
>
|
||||
> I bet the "optimal path" for you will feel familiar, at least a little bit. It'll be like putting on an old shoe that still fits perfectly. And the skill of recognizing your own psyche's response of "yes that's it" is one that a lot of people are rusty with, and can improve by trying.
|
||||
|
||||
This advice actually resonated with me. It actually did feel like "yes, that's it".
|
||||
|
||||
So, who am I? I'm not sure yet, but I'm on the look out, and hopeful that I can figure it out as I go.
|
||||
|
||||
# Stuff I've found interesting recently:
|
||||
|
||||
## [Not Overthinking](https://www.notoverthinking.com/) Podcast
|
||||
|
||||
I've been listening to Ali and Taimur Abdaal's podcast for a while now and if you like my ruminations above, you'll love the kinds of conversations these brothers have about "happiness, creativity, and the human condition".
|
||||
|
||||
They most recently discussed how specific words or phrases have changed their thought processes, and discuss anything from social interactions to how a good kitchen bin can measurably improve your life.
|
||||
|
||||
Definitely worth listening to for a different perspective on life advice.
|
||||
|
||||
## Zbigniew Gecis - [8 things to use in “Jobs-To-Be-Done” framework for product development](https://uxdesign.cc/8-things-to-use-in-jobs-to-be-done-framework-for-product-development-4ae7c6f3c30b)
|
||||
|
||||
The "Jobs-To-Be-Done" framework is an oddly named framing for a way to develop a product. Rather than focus on the features or functionality of a product, focus on the job the customer is trying to do and - more importantly - why they are trying to do it.
|
||||
|
||||
The general idea is that a customer is "hiring" your product to do a "job", but that job is in service of a particular goal. The key is to figure out what the goals are, and design and sell your product in terms of that goal.
|
||||
|
||||
It's a different perspective on product development and can even be useful in framing your own purchasing decision: "For what 'job' am I 'hiring' this product to do?"
|
||||
|
||||
## Nat Eliason - [Roam: Why I Love It and How I Use It](https://www.nateliason.com/blog/roam)
|
||||
|
||||
A great primer on what Roam is, with some great productivity tips.
|
||||
|
||||
I've always seen the need for something like a weekly review, but never quite got the hang of doing it. But I'm borrowing some of the tips from this article and working them into my own Roam workflow, and so far it seems to be working for me.
|
||||
|
||||
I might write more about this in the next issue.
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
title: B3.13 Procrastinations issues
|
||||
date: 2020-02-03
|
||||
summary: I barely managed to get this written at all...
|
||||
image: https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F99d43a60-5cac-4ef2-af6d-554af5f25853_500x400.jpeg
|
||||
location: /B3.13
|
||||
tags: Newsletter, self-reflection, procrastination, PKM, wavebox, browsers, burnout, mind
|
||||
---
|
||||
|
||||
# Procrastinations issues
|
||||
*I barely managed to get this written at all...*
|
||||
|
||||
|
||||
|
||||
I'm a natural born procrastinator. I can't help it - I just keep finding ways to avoid the work I know I have to do. This newsletter is an obvious example. I somehow made sure never to commit myself to a schedule, and now that I've hit the date for sending out my third issue, I haven't even written so much as a draft. So keep in mind - I haven't even proofread this one properly.
|
||||
|
||||
It's an issue that is seeping into all aspects of my life, and it comes and goes in cycles. A month ago I was motivated to build and stick to a weekly plan. I was going to collect articles I read so I could reference them in this newsletter. I was going to do a bunch of writing for DevReady, and post links to that in this newsletter as a way to get more content going.
|
||||
|
||||
My weekly plan lasted about a fortnight, I haven't retained much of what I've read for it to be worth posting and I've done exactly zero writing for DevReady.
|
||||
|
||||
The thing is, I know what needs to be done - it's now about finding the motivation to do it. And I know enough to know that "finding motivation" is a myth. An excuse to further put off the work. What I really need to do is dig in and figure out what it is that is holding me back. Figure out _why_ I "lack motivation" and how I can break down those barriers to get back to work.
|
||||
|
||||
Last week I mentioned the concept of the sculpture/sculptor, and I'm reminded of a direct quote from the r!Animorphs fic I referenced which kinda sums up how I'm feeling at the moment:
|
||||
|
||||
> I don’t know. I didn’t have a conclusion. I didn’t even really have a _question_.
|
||||
>
|
||||
> But it seemed like something I really ought to think about.
|
||||
|
||||
# Stuff I've found interesting recently:
|
||||
|
||||
## [Dan Silvestre](https://medium.com/@dsilvestre?source=post_page-----76b54838a877----------------------) - [Digital Minimalism: How to Simplify Your Online Life](https://medium.com/swlh/digital-minimalism-how-to-simplify-your-online-life-76b54838a877)
|
||||
|
||||
This is a list of things you can do to "clean up" your digital life. Some of the things suggested here I've already done, but it feels like it's time for another purge of a whole bunch of digital noise in my life that I really don't need... Apps I've downloaded and don't use, files I'm hoarding in my Downloads folder, bringing back some semblance of a schedule that makes sense.
|
||||
|
||||
For example, I've started using [Wavebox](https://wavebox.io/) as a browser for work. I've been using it for ages as a home for my digital apps (email, Slack, Jira, etc) and now that it's built on Chromium and has proper tab support and a neat profile system, it's basically become my default browser at work. The one thing it seems to be crucially missing is saving my open tabs for when I next start my browser
|
||||
|
||||
But I'm coming to see that as a _good_ thing. It means I don't keep a bunch of stuff open because I know it will disappear, and at the end of my day I _have to_ sort out what any open tabs mean to me and set up reminders or whatever for later, leaving me with a clean slate each morning.
|
||||
|
||||
## [Phil Haack](https://haacked.com/about/) - [Recovering from Burnout](https://haacked.com/archive/2020/01/23/burnout/)
|
||||
|
||||
This is a good article from a man formerly in denial about his own burnout, and his plan to turn it around. He doesn't really offer a lot in the way of actionable advice - he admits he's in a privileged position where he can afford to just take time out and have a break, which not everyone can do (myself included).
|
||||
|
||||
But it's pushed me into facing some thoughts I've been having about how I might be burnt out, and encouraging me to find a way to address it. I'm not there yet, and the digital noise purge I mentioned earlier may be a baby step towards getting the space I need. I'm not sure that a break will help at this stage anyway, it's more about getting the load under control to move forward.
|
||||
|
||||
## [InsideMyMind](https://ryanandrewlangdon.wordpress.com/author/rlangdon9/) - [Today I Learned That Not Everyone Has An Internal Monologue And It Has Ruined My Day.](https://ryanandrewlangdon.wordpress.com/2020/01/28/today-i-learned-that-not-everyone-has-an-internal-monologue-and-it-has-ruined-my-day/)
|
||||
|
||||
Okay, so this blew my mind too, but after the initial reaction, I think I've learned to be more careful with this information.
|
||||
|
||||
So, it turns out that some people run with a constant internal monologue, and some do not. I have a "voice" in my head, thinking in words (and sometimes just abstract concepts, but mostly words). This voice is me - it is the thing that is piloting my body, voicing my words, etc.
|
||||
|
||||
I'd just assumed up until this point that this was the default mode of operation for people in general. Popular fiction seems to support this. Most fiction from a point-of-view will have characters thinking in sentences, characters in movies will have echo-y representations of their voice reflecting their thoughts, etc. But this is not necessarily experienced by everyone.
|
||||
|
||||
It's come to help me make sense of the personalities of some others. How they seem to just say whatever is on their mind, or their need to talk out problems with others out loud. To some degree or another we all need these things, but some of us can act this out internally, while for others it's much more difficult.
|
||||
|
||||
Do you constantly think to yourself in words? Do you play conversations in your head before committing to the words out loud? Or is this whole concept completely alien to you and now you are discovering that other people in your life live with little voices in their heads and now _your_ day is ruined?
|
||||
|
||||
The biggest takeaway here is that everyone's mind works differently. There's probably no one out there who thinks exactly the way you do.
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: B4.0011 OBTF, Subtext, ELF... Oh my!
|
||||
date: 2024-02-20
|
||||
location: /B4.0011
|
||||
tags: OBTF, MOC, Journalling, PKM, Subtext, Ted Nelson
|
||||
---
|
||||
|
||||
# OBTF, Subtext, ELF... Oh my!
|
||||
|
||||
Some random ideas that have popped up are sort of coalescing. Into what, I'm not sure yet. But I fell down a rabbit hole, and this article represents my climb back up. As such, I wouldn't consider this a proper, professional think piece. Just some notes, thoughts and scratchings that I decided to share.
|
||||
|
||||
---
|
||||
|
||||
#### OBTF
|
||||
|
||||
|
||||
@[Ellane W](https://pkm.social/users/ellane "Ellane W") has been documenting her experiments with OBTF (One Big Text File) ([link](https://www.blog.plaintextpaperless.com/i/141545358/the-one-big-text-file-experiment-has-begun)). She links off to others who are doing this, and it's something I've seen before and not paid too much attention to. But now I'm seriously considering it.
|
||||
|
||||
One thing she's doing that stuck out to me, is following bullet-journaling principals and marking each entry with a single letter followed by a period (e.g. `N.` for note, `T.` for task, `E.` for event...). She chose letters rather than symbols so they could be quickly and easily entered on a phone without too much hunting. Double-tapping space will enter the period for her. Plus it's simple to search write queries for.
|
||||
|
||||
#### Subtext
|
||||
|
||||
|
||||
Entirely separate to that whole thing, I stumbled across [Subtext](https://github.com/subconsciousnetwork/subtext), which bills itself as "markup for note taking". The general idea is to treat each line as its own block with a "sigil" at the start indicating the block's purpose (e.g. `#` for heading, `-` for list item, `>` for quote). It bears a resemblance to markdown, except for that focus on blocks, and a complete lack of formatting (it's an index card, not a page).
|
||||
|
||||
It also supports linking, through simple URLs (or surrounding unusual URLS in `<>`), as well as shorthand "slashlinks" to local files. The intention is for links to be transcluded. This allows things like tables to be included by linking to a CSV file. Or if you really need presentation formatting, you can link to a markdown file or PDF or something.
|
||||
|
||||
#### ELF
|
||||
|
||||
|
||||
Subtext is conceptually similar to [Ted Nelson](http://www.thetednelson.com/)'s idea of an ELF (Evolutionary List File). An ELF has three elements:
|
||||
- Entries: A discrete unit of information designated by the user. Text (long or short), symbols, pictures, anything. _I could see these as "files" as they exist today. Remember, Ted was living in the 60s and 70s and imagining the future of computers at this point._
|
||||
- Lists: An ordered set of entries as designated by the user. An entry can exist in any number of lists. _#[MOC](/tag/MOC)s?_
|
||||
- Links: A connector, designated by the user, between two entries in different lists. An entry in one list may be linked to only one entry in another list. _Of course, entries in lists can be linked **to** from multiple places_
|
||||
I think of Notion. Every Notion "document" is actually a list of blocks that can be of different types. Blocks can be linked to specifically.
|
||||
Backlinks are a big thing, too. Seeing everything that links to the entry you're looking at is important. Of course, Ted is all about that transclusion, too. So this is where the "slashlinks" of Subtext come into it. A Subtext file is a **list** of **entries**. There is one entry per line - mostly plain-text, with specified "sigils" to indicate different types of meanings, or URLs/slashlinks, which can transclude files as different kinds of entries. As a plain-text file, it can't really block-reference entries in other list files, so it doesn't quite fit the ELF 100%, but it's close.
|
||||
|
||||
#### Putting it all together
|
||||
|
||||
|
||||
Can we use the Subtext and ELF principals in OBTF? Subtext "sigils" are basically just the bullet types Ellaine was using for her bullet-journal-style approach to the OBTF. Also keep in mind that the OBTF _isn't_ the entire knowledge base - it's just an inbox; a staging area; a replacement for your daily notes; an ever-evolving #[MOC](/tag/MOC) of your day-to-day life.
|
||||
It's a highly personal thing. You could make a note in your OBTF, then later refactor it out into its own note file (I would leave the OBTF entry as-is and just link it to the new note). You can quick-capture tasks, which you keep track of through other means (by Dataview queries in Obsidian, or moving them over to a task management app as part of a daily process). It's all up to you.
|
||||
|
||||
I think I'm inspired to start my own OBTF experiment. I've been off-and-on looking for a new journaling practice since I fell off that bandwagon many years ago, but nothing has quite stuck. Maybe I could try some form of interstitial journaling, along with capturing tasks, ideas, meeting notes, etc in a OBTF list, using bullet journaling principals for each entry. As I intend to keep this file in Obsidian, I intend to use markdown-compatible "sigils" from Subtext (e.g. `#` for heading, `-` for list item, `>` for quote), as well as others like `- [ ]` for tasks.
|
||||
There are some plugins/styles for rendering different kinds of "task statuses", too. I could render `- [i]` as a lightbulb (💡) for example. Simple to search for and query, as well. A bit cumbersome to type on mobile, but I could put in some work to customize the toolbar in obsidian mobile...
|
||||
|
||||
Alternately, I could just keep things like "ideas" as basic text blocks with a hashtag (e.g. `#idea`) at the end of the line if it's something I'll want to search for later. It might resemble a more free-form journal that way.
|
||||
|
||||
---
|
||||
|
||||
As I stated at the start, this was a collection of ideas I needed to braindump and decided to share. So I don't really have a proper conclusion for you.
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
title: B4.0012 Johnny Decimal (Part One)
|
||||
date: 2024-04-09
|
||||
location: /B4.0012
|
||||
tags: Johnny Decimal
|
||||
---
|
||||
|
||||
# Johnny Decimal (Part One)
|
||||
|
||||
I've taken a leap and have started organising all the things with a Johnny Decimal system.
|
||||
It's been something I've been mulling over for some time, and with the Johnny Decimal workshop coming soon and an attempt to switch to a new OS, it seems like a perfect time to get organised.
|
||||
|
||||
I've read through the Johnny Decimal website a few times over the years, and I've been reading the workbook as well. But as with anything organisational, it's deeply personal and you have to take what works for you and throw away what doesn't. For example, the recommended process for organising with Johnny Decimal is to write a scope statement and brain dump all of your related stuff for a week before moving to the organisation process.
|
||||
Well, my brain is impatient, and if I were to follow that I'd probably spend an hour writing down a bunch of stuff on the first day, write a few more on the second, and then probably forget about the process altogether until a couple of weeks later, at which point I feel guilty about it and don't want to touch it. It might sound overdramatic, but I'm pretty sure that's what happened when I tried to use Johnny Decimal to organise my Obsidian Vault in the past.
|
||||
So, screw that, I just jumped into creating Areas and Categories straight away.
|
||||
_[I haven't figured out embedding yet, so go follow this link for the clip I made. Spoiler warning: it contains quotes from Bluey and the Barbie movie.](https://coub.com/view/3e6xav)_
|
||||
|
||||
To start with, I created a new Obsidian vault (knowing full well that this time it's going to be much more than just Obsidian). Rather than making an index note or a canvas (which I did start playing with, to be fair), I decided to just start with folders. I created folders for all the projects I've got going on from the top of my head. I created folders for documents and important resources. As I went, I grouped some things together that made sense, not worrying about how deep or broad anything went, yet. I went through my cloud storage folder for things I wasn't remembering and added those folders in.
|
||||
When I thought I had enough stuff, I put more effort into the grouping. I realised I had a lot of categories and I didn't feel like I had enough room for only 10 areas. But I quickly noticed that a lot of the areas and categories were specifically for software development work, while others were more personal, life management stuff. I considered splitting each of the dev areas out into their own systems, but that seemed like overkill. Instead, I settled on a system for dev stuff, and a system for life, etc.
|
||||
|
||||
And so, I had my first base for IDs: `W01` for all my work and dev related stuff, and `L42` for Life, the Universe and Everything (geddit?).
|
||||
The way I'd split up my areas, `W01` was still looking a bit tight for areas, but workable. But I noticed something else. Quite a lot of the areas were for developments and projects that were out there in the open for everyone to see, while there were a few areas that were related to actual employed work that was *not* out in the open. So I had an idea: What if I split the work system into two: One for public and one for private? I could potentially publish notes in an Obsidian vault with the public stuff (Working with the garage door open), while not risking publishing private stuff, because it's entirely separate.
|
||||
Rather than boring old `W01` and `W02`, I couldn't help but think of HTTP Code 401 — meaning "Unauthorised" — because people would need to be authorised to see stuff in that system. Also, because of the nature of my public work, it made sense to label the public one 201 — meaning "Created".
|
||||
I know that Jonny says that systems work best as letter-number-number, but the whole point is to keep things memorable, and I have a mnemonic for this, so I'm just rolling with it.
|
||||
|
||||
Now with my System IDs in place, I was ready to roll out the next levels of ids, to fit with the Johnny Decimal `SYS.AC.ID` format
|
||||
When creating numbers for my areas, I stuck to Johnny's template of using `00-09` for stuff to do with the system. I also found a couple of categories I couldn't seem to fit into a particular area, so I created `90-99 Miscellany` as an area to catch all that stuff. For example, `L42.91` is a place to archive some old journal stuff; `201.91` is for a LEGO keyboard side-project which doesn't really fit into any of my other areas or categories.
|
||||
Following on from that idea of using `9` for miscellany, I set up `201.99` as a place to hold random ideas about things to work on in the future.
|
||||
|
||||
Also, I decided to follow the `A0` categories (`10`, `20`, etc) as being reserved for system information about the area (not that I'm really using it yet). But I also took this one step further and reserved the `AC.0x` IDs for special standards within a particular category. I plan to use `AC.01` for notes about a particular category. Especially if I'm eventually planning to publish stuff under this format, it makes sense to have at least a note explaining the context of a category. Using my LEGO Keyboard example, `201.91.01` would be the ID for a note explaining the general idea and reasoning around the project.
|
||||
Similarly, I'm using `L42.00.01` to store a note *about* the system, documenting non-Johnny standards like this. while keeping `00.00` free as the index.
|
||||
I'm also planning on using `AC.10` as a category inbox, for stuff that I still have to sort and/or assign an ID to. This means all my IDs start at 11, which is a little odd, but it just means every digit in the id starts with 1 and goes up from there when giving a thing an ID. if there's a zero in it, it's some sort of meta thing, or information about the thing. (I mean, that's not strictly true because 20, 30, etc exist, but it works in my head, okay?)
|
||||
|
||||
As I went along like this, I also noticed that in a few of the areas, I had created a folder for general resources and/or documentation that would assist me in that area. For example, in `201.20-29 Game Dev` I had a category for documentation of the game engines I was using.
|
||||
Even in my life system, I had a couple of categories for things like the ringtones I keep around to use on my phone. And so, just as `9` was my standard number for miscellany, so to `8` has become my number for resources and documentation.
|
||||
That game engine documentation is all going to go in `201.28`. Plus I also have an entire area (`201.80-89`) for resources and docs on various technologies, tools and development resources (all the music, SFX and resource packs I've purchased from Humble over the years are going to live in `201.88`). My ringtones are in `L42.87`.
|
||||
I'm also planning on using `AC.08` as a sort of container for "category bookmarks". Links to a GitHub repository, or a ClickUp task list, that kind of thing.
|
||||
|
||||
So we have some standards going! `0` means meta, `9` means misc and `8` means some sort of resource. It won't always work that way, but it's enough to be able to look at the system as a whole (i.e. all three systems) and see consistency and patterns. And that's what we want, right?
|
||||
If I want the DragonRuby documentation, it's a resource, so will have an `8` in it, and it's to do with my game dev work, which is public, so it's probably in `201.28` somewhere. There's probably even a direct link in my bookmarks in `201.28.08`. If it's not, for whatever reason, there are at most two or three other locations it could be (somewhere in the `201.80`s, perhaps?) and even if it is, I should probably also duplicate it where I looked first.
|
||||
|
||||
The only thing I was having trouble categorising so far was my blog posts. Looking at the Johnny Decimal website for inspiration, it seems the blog posts are identified with an example of: `D01.22.00.0031` (if I include the system identifier, which isn't done on the website). It's a lot. It kinda has to be, really. Theoretically `22.00` is an index, but it hasn't been built yet, and all the posts are identified by four-digit numbers under that.
|
||||
So for me, `201` is my public dev, `10-19` is general stuff, `14` is my website. So, like `201.14.11.0001` or even `201.14.00.0001`? It just feels like a lot. Plus, I kind of have another level in there because I've had a couple of different blogs over the years, and I feel like consolidating them. But keeping them as sequential doesn't make sense to me, as each blog had its own context.
|
||||
So, I'm gonna cheat. I'm making a new area just for my blog: `201.B0-B9`. Yep, I'm putting letters in the categories; time to call the men in the white coats to come and take me away.
|
||||
But seriously, the reason I'm doing this is because the letter makes it unique, and while it will live in my `201` system, none of the resulting IDs need to reference that to be unique. `B1` is the category for my oldest blog (at least the oldest one I can find), with `B1.01` being the content of the "About" page for that old blog, providing the context for the rest of the posts in that category. Right now, this post is `B4.12`, which is much better than `201.14.14.0002` (though I am considering using the 4 digits like JD does, so `B4.0012`).
|
||||
It's going to be so great when I fix it all up on my website and can link directly to `https://death.id.au/B4.0012` — but that's still way off in the future.
|
||||
|
||||
For now, most of my folders are empty and still need to be populated with stuff. I also need to build an index that I can easily update and add IDs to. And I need to start using the IDs in other contexts; like e-mail, ClickUp, code repositories, etc. Plus, you know, there is *actual* work to be done, aside from organising all my work.
|
||||
_[Just replace the word "children" with "work" in this clip.](https://coub.com/view/3e6wp1)_
|
||||
|
||||
But I'm going to try moving my stuff over as I go, tagging things with JD.IDs as I need them.
|
||||
I'm trying to embrace "[Working with the garage door open](https://notes.andymatuschak.org/zCMhncA1iSE74MKKYQS5PBZ)", at least in part so I stick with it.
|
||||
I'll try to keep updated.
|
||||
Loading…
Reference in a new issue