I put a little bit more time into tweaking the full screen entries tonight. Minor adjustments to the text in passive and active states. I still need to adjust how the left and right arrows are displayed here, but I think by the time I wake up in the morning @lucas will have already worked out something cool. With design sessions I find what makes the most impact is time of day and energy levels. Interface design doesn't necessarily flash to me in an instant or something like an insight. I might get an instant insight for something new we should add to Futureland, but the process of actually sketching it out is something that requires concentration. I just need to grind out a bunch of variants over days to figure out the best way to do something. So if my design session happens in the afternoon or in the evening, it's usually a wash. I like stumbling out of bed very early in the morning, making an espresso with my eyes half open and then sitting in front of my Mac barely awake with my head phones on. That's how I get my best work interface design work done. I'll try and make it happen tomorrow.
As of yesterday, I have been making some kind of Interface for 365 consecutive days. The kind of surprising thing was that I didn't even realize it. I was looking through my Daily around lunch and I saw the number '365' beside Interfaces. I was thinking back to the first time I did one of these experiments with music and then code and how much my life has changed since then. It's pretty crazy to think about. I would have never imagined that doing something for 365 consecutive days would be an almost casual thing. I think after almost 3 years of working this way my mind and life has changed in a way where it can be difficult to remember how hard things were before all of this. Thanks for everything. <3
Sketching out some thoughts on full screen entries to share with @lucas
Sketching out how Journals can be listed out on this profile. The height here of these bars is 56px. The draw back of this approach is how do you handle users that have tons of Journals. Perhaps there's some kind of search functionality and the ability for the user to pin specific Journals to the top of their profiles. A lot more thinking to do here.
Starting to think about lay out options for these new profiles. Other components that will require deep thinking are, what elements should be included in these profiles and what elements should not be included. Obviously when you visit a user's profile you need key information, profiles need to function as a way to explore the Journals the user is connected to and perhaps they also need to be a way to understand a users activity. Similar to GitHub perhaps you can see some interesting data on the user's creative output.
Sharing these updated Journal interfaces with @lucas for feedback. I wonder how much he will hate the dotted borders lol :)
Some updates to this side bar after some great feedback from @lucas. Making it clearer how to switch between Daily and Shadows. Also removed the date to clear up this interface. Feels a lot better now.
Sending a package over to @lucas for some feedback and discussion.
Working on an initial way of handling 'Shadows' on Futureland. This interface will function as a kind of 'Home' view. It will show you all of your recent entries as well as entries from collaborative Journals where you are a contributor. You will be able to access Daily here (Journals you want to return to regularly) and you will also be able to use this view for Shadows, journals that you are shadowing. It's tough to know how to integrate all of this into our interfaces in a cohesive way. A good starting point is putting these elements in their own place for now to launch the functionality and learn more.
I took 'Daily' out of the menu in the bottom right. I think it is useful that we have this form of prioritization. Users can still navigate to a lot of different things with a single click, but in terms of importance we can put the most used things in the top navigation of the Interface and the less used things in the bottom navigation of the interface.
Added the edit button into the 'Daily' side bar and adjusted spacing a bit. I also added another icon for Daily into the top right navigation. So now there is an icon for Daily and Shadowing. The idea is that you would click them to trigger their respective sidebars on any interface. They will be persistent until the icon is clicked again. You can also trigger these side bars by using your keyboard.
Trying out another variant of this daily side bar but I'm not sure if it is going to work. Instead of being an overlay this one completely blocks out the elements below while still showing some of the elements to encourage the user to retract the side bar once they are done with it. Might not make sense. Hm.
I'm experimenting with making this 'Daily' interface something that can be triggered on any interface in Futureland. This version here takes a blurred overlay approach. Might be too much for right now and I'll try other variants. I'll also try integrating 'Shadows' into the same sidebar. You'll be able to toggle the information easily.
I was experimenting with an open book icon for 'New Journal' on the top right menu. I reverted it back to the closed book. I also added in a new icon for the shadow side bar. Although it's probably a confusing one to use since Journals have side bars as well. I'll try something else. The idea though is that you can click a third icon at any point and it would show you all of the Journals you are shadowing for easy travelling and reviewing.
Adding in missing elements to this sketch of Daily on desktop + adjusting spacing based on using test version. Specifically here I added in the 'Edit' button to rearrange the order of Journals in your daily. I missed that and I think I improved the position of it for this context. All of the elements in Daily feel a little too big to me. I'm not sure how I feel about it yet. I'll need to use it more and see what others think to understand.
Trying to see if I can tuck the list of Journals you are shadowing into another side bar on the left. I just think it's important that you can navigate between all shadowed journals very easily. I imagine something like how Google Reader used to feel. Where you can see everything that has new updates and then quickly cycle through them seeing each Journal pop up on the screen. I do not like the idea of having too many of these tiled views on the Interface so it's going to take a lot of experimentation and just working through this to figure it out.
I spent a bunch of time today thinking and writing about different components of Futureland. Thanks to everyone who is always messaging me and sharing feedback on using this thing. I'm starting to sketch out an improved version of the Activity view, in this concept there's something called 'Shadowing'. Users would be able to Shadow projects, which means they can opt-in to updates on them but the creators will not be notified of it. This would be a careful step in understanding how concepts like 'Following' or 'Subscribing' should or should not work on Futureland.
We have a working version of 'Hints' in the developer version of Futureland. It will likely be in production very soon. While I am hovering over objects on this Interface, you will see 'Hints' displaying more context about everything I am hovering over on the bottom right of the screen. I am very proud of the work we are doing here because it's been a fun collaboration between @lucas and I and also because I believe this is rooted in good design principles.
I'm starting to feel a lot better. The fidelity of my routine is beginning to get back to normal levels. I made all of the 'Hints' more contextual. So instead of saying Journal, in some instances it will use the name of the Journal - in this case that's 'Interfaces'. This way more of the Hints are contextual to the Journal you are viewing. There's some tweaks that I still need to make to this but I think we should be able to ship this tomorrow.
Slowly integrating back into my routine now. My eye is still recovering. I can look at the screen a bit more. I added more hints to these Journals. When you highlight over the text on the side bar on things like a Journal's title, description, contributors, Hints will give you a bit more context about it.
Basically can't see out of my right eye currently so just adding some hints here. When you hover over a comment or a bookmark the bottom tool bar/info bar/'hints' (?) will show you what you are hovered over. The info is currently displayed as, 'This is a comment' or 'This is a bookmark'. It should probably include more context like, 'This is a comment from { }' or 'This is a bookmark titled { }'.
Daily on desktop
I am working on one narrower variant of this before I send these Interfaces over to @lucas for feedback and experimentation.
Daily desktop
Adjusted the sizing of text here and spacing. The text of the date and total daily entries is larger now. The text of the Journal title is a bit smaller. I increase the distance between the last Journal in the list and the Add Journal icon. It might be worth playing around with this a bit now.
Starting to add hints to our new Journals Interface. As I hover over buttons in the menu here, you can see hints are being displayed in the bottom bar. Here the bottom bar is displaying the purpose of each button. We will add these kinds of hints across all of our Interfaces over time. I'm really excited about how we're doing this! :)
Daily on desktop
Playing around with more stuff. So the text on the left in the Daily log can probably be smaller across everything. That whole interface can be smaller. I can decrease its width too. I added the entries in here on the right side of the Interface. A realization I had while dropping these entries in is that this side of the Interface can display your own recent entries AND also all recent entries from Journals where you are a collaborator. This might be super helpful for team based Journals.
Daily on desktop
Yeah something like this probably makes more sense. The width of the Daily log is now 480px here. Also it would be great if I could tag these entries some how like quickly on the fly. Like I don't want to have to write Daily on desktop at the top of each entry but I do need a way of associating this with something.
Daily on desktop
Trying a 48px distance between each Journal on the Daily log. Maybe that's too large, maybe that works I am not sure yet. It's one of those things I think needs to be felt out through use. Immediate thoughts now are that it is very unlikely that I need to split this down the center. So I'll play with some other dimensions.
Daily on desktop
The Interface is split into two. The icons and menu will of course continue floating on the right. I think I will experiment with putting the Daily log line on the left side and then a feed of recent entries on the right side. Immediate thought is that the space in the left side might be larger than I need.
Starting a design session on Daily for Desktop. Adjusting my desk to the standing position. I am trying to disconnect from the idea of sitting while working with multimedia. Perhaps I will let myself sit while writing but any time I am doing something with multimedia I will always stand. This distinction is natural because I use a separate device for writing (AlphaSmart Neo2) than I do for working with multimedia (MacBook Pro). I think this will be a permanent thing for me. Keeping writing on a separate device.
I’m experimenting with displaying an Occasional section in Daily. The way it could work is it defaults to a collapsed state and then when you click the title or the chevron it will expand revealing any Journals you’ve added to ‘Occasional’. You’ll be able to see streaks on all of these Journals and you can move them to Daily whenever you’d like. Or move Journals from Daily to Occasional.
I'm starting to sketch out ideas for a section in Daily that is marked 'Occasional'. Perhaps it is a place to put Journals that you are not entirely focused on but want quick access to. There's a lot of Journals like that for me. Ones where I am interested in them but they are not part of my daily output (yet). I'm experimenting with making the circles and Journal names smaller for ones in the occasional section. I'll need to play with this a bunch more. I'll try keeping everything the same size and perhaps hiding it at first as well. Perhaps you tap and then it reveals any occasional Journals. The other thing I will need to work out is how to add them to the Occasional section. Maybe @lucas has some perspective on that. Once this is done I will start working on improving the design of Daily on desktop.
Hm. Adjusting my approach here a bit. If a user collapses a Journal's side bar, I think we can interpret that as the use indicating that she understand what this Journal is about and wants the information to get out of the way. So the only essential things that the user would need (if she has all the information she wants about a Journal) is the ability to perform strong actions. Viewing a Journal's store, viewing the Journal as a grid or accessing the deeper menu if she wants to share the Journal or access its settings.
Experimenting with adding a helpful message in the bottom footer. In this case the message is describing what a Triangle is on the Interface. I originally thought these would be like persistent messages but now I think we can actually display these dynamically as additional context depending on what the user is hovering over. We might be able to create a cool experience where a user can learn about anything on the Interface just by hovering over it.
Perhaps when you hover over a triangle (bookmark) it increases in size and displays a preview of the Entry's text like how a Comment works on the Timeline. I worry about two things. Can we get buy with a triangle as a symbol for 'Bookmarks'? Maybe. They can be things like important pieces of information or important events in a Journal. The other thing I'm worried about is whether everything on this timeline is too small. It might be something we need to play around with through use.
What if a Journal's bookmarks were triangle on the timeline? If there's text perhaps when you hover of them they could rotate and then point to the text. Right now Bookmarks are given titles but perhaps they should just display a preview of the text from that Entry. That would make creating Bookmarks much easier. You could just do it from within an Entry menu with two clicks.
I realized something. In terms of noting our own positions on a Journal's timeline, we can use the same symbol as a live user icon. Why should they be different? When you are on a Journal and see the icon of another person live on the timeline it kind of feels like you are in the same space. Why would you not see yourself in that space? We can indicate our own positions in the timeline in the way we indicate someone else's :)
I had to reduce the size of the profile icons when you hover over them on a Journal's timeline. I found this little bug where if they were too big they would collide with the live user icon to the left. I wonder if this size increase is enough. I wish they were bigger but not sure what to do just yet.
If we hover over a comment on a Journal's timeline, how should it look with multiple lines of text? I kept the width of the text preview at 80px and the height is currently 36px (not sure if that makes any sense). Perhaps as this interface is expressed through smaller dimensions the way these comment previews are displayed changes.
Maybe when you hover over these profile icons on the timeline they could look like this. They increase in size by 200% and then you see the comment text in white. I wonder if we should use white or one of the greys we are using on the other parts of the Interface. The text is small so perhaps white is the optimal choice and the entire component functions as a 'link' to that Entry so perhaps using white in this context makes sense. I will need to try and see how this should look with longer text.
Experimenting with an adjusted way of displaying the day as you hover over a Journal's timeline. Here a small circle is used instead of a rectangle. Perhaps a circle fits better with everything else. The date is displayed in white. I'm worried that both the circle and the date are too small. It's interesting to see circles and lines pop up often in these sketches.
Adding this little live user icon of @pasquale back into the interface. Everything is feeling so much better to me.
Changed the position of the store and grid icons in the left sidebar. It's closer to the title of the Journal since the icons trigger the some of the strongest actions on the Journal. I also added the 'more' icon into that little group of icons. I'm really happy with that decision because it is out of place in our current design. It feels much more balanced and intuitive here.
I'm working through each component to see if I can make the entire Journal feel more visually balanced. Been thinking about / tinkering with this for a few days now. I'm very slowly starting to form my own understanding of perception and balance. I have a lot to learn. I was looking at the counter in our kitchen the other day and I realized it has similar lines to our Journals. I need to study this kind of stuff more.
Getting guidance from @pugson. I hope it's clear that I am an amateur.
The power of internet friends (@pugson)
Like @pugson suggests, centering entries in this space might be useful.
Some insight from @pugson
Added a header. The header is smaller than the body. I am not sure if I am happy with this right now but it is a pattern I noticed on Apple's website I thought I would try it out. I don't feel confident enough yet to make strong decisions about these mechanics so most thing remain experimental. The more I work with this stuff the clearer it gets. I also put the 'esc' for exit' back at the top because we will not be implementing that footer concept this week.
It might be hard to see but this is Jim (@wwwjim)'s interface for Tree Explorer on his writing tool, Reading Supply. You can play around with it here: https://reading.supply/explorer. I have to share this here because it is going to be a major inspiration in the things I sketch right now. I have such huge respect for Jim's work because I feel his interfaces push aesthetics in a cool way while retaining focus on its core functionality. It's rare that I come across a balance of those two things in a way that is executed this well.
More variants of this page. Experimenting with removing the header and moving up all of the text. This gave me the idea of putting all little tips and hints on the bottom of the screen in a bottom bar. We explore this on the publishing interface with word count on the bottom (if you haven't noticed) I think there's more we can build on there.
Trying a variant with larger text and stripping away elements. I have a lot to learn. I think for me producing more variants of everything is essential because it's not just about getting this stuff done but I need to actually go through the process of making this stuff over and over again until it clicks and I understand it on a deeper level. I need to find a way to increase my intensity while working on this :)
When a user tries to publish over 50 private entries without Futureland+, thought this could be a simple way of of notifying them. The content drops down a bunch of pixels and decreases its opacity. Then there's a simple message at the top notifying the user that they need to upgrade if they want to publish more than 50 Private Entries. It is probably worth noting here that unlimited public entries are free in case they want to adjust their Journal to public instead of upgrading.
Working on a 'thank you' that is shown after someone upgrades to Futureland+. You will notice that there's a rectangle here that says, 'Futureland+ onboarding film in development'. This will likely be included in the design of the page. In certain instances, I would like us to include more unfinished aspects of the Interfaces on the screen like this as a way of signalling what we are working on and also as a way of allowing users to visually see the tool develop. This might be cool if we can do it in a way that improves instead of taking away from the experience.
This is obviously missing a bunch of elements. I am trying to form a better understanding of when the Entries feels central and in focus and when they do not. So I am stripping away all elements and starting to slowly put them back in to better understand how each element is affecting the Interface.
I removed the large sign up text from the bottom of this page since it is already in the top right menu. I think we can highlight it in a more interesting way. The top right menu is also a persistent location available to the user as she reads through all of the materials. I'll think about a more interesting way to highlight. Something moving on the screen would be very nice.
I love this. https://hundredrabbits.github.io/Dotgrid/
I'm starting to work on a new 'home page' for Futureland. The way I see this project is that a home page is essentially a visual table of contents to navigate the conceptual elements of this project. It's a way of presenting all of the information someone might need to form a complete understanding of what Futureland is. It's presented in a specific way and should eventually be visually appealing while always letting function dictate its form.
Starting to adjust this publishing view so that it can accommodate more media dimensions. It also displays the file name and file size now. I am not sure how I feel about this yet because it's kind of cool, but also kind of unnecessary. I'll try another approach where I really tuck the attachment into the side. I also think it should only ever be tucked in when you start typing or if you have already been typing.
Very experimental right now. Having Daily pop out on the right side of the screen on Desktop when you click its icon. Perhaps it can stay there persistently if you want so that it does not take you away from the current screen you are on. There's a bunch of information missing here, just trying to get a feel for if this makes any sense. I will probably have to design a dedicated desktop one to know. Seems like that much screen for this kind of interaction might be overkill on desktop though.
Experimental. Putting the menu in the top part of the Interface to see what happens. This opens up the right side of the screen, which can be used to expand and collapse 'Daily' so you can see it without ever having to leave the screen you are on. Not necessarily liking this. I'll try and integrate the side bar Daily with the existing icon based menu and see what happens.
Dimming the publish button when you haven't typed something. Going to highlight it in green just now to make it clearer and more functional. A suggestion from @pugson.
Typing here caused the Journal's name to brighten and increase in weight. FL is no longer inferring that you are publishing to the 'Interfaces' Journal, now it IS the Journal you are publishing to. You can click the Where field any time you want and delete the Journal there and enter the name of a new one.
When you push the 'New Entry' button on one of your Journals or a Journal that you are a collaborator on, FL will infer that you want to push to this Journal. You will notice that in the 'Where' field 'Interfaces' is a dim grey. I can change the Journal by clicking on the Where field and typing in a new one.
When a Journal is inferred like this the body of the Entry will be in focus, so you can just start typing or adding media right away. Once you add media or type the Journal's name in the where field will brighten (become white) and its font-weight will change to bold. I'll show you that in the next screen shot.
Had a good conversation with @lucas this morning. Making improvements to this new menu. Increasing the size of all icons, working on different states. Inactive, Hover and Active. Got a good feeling about flow state today.
I'm working on creating space for live icons on the new timeline. Once this is in a higher quality and stable space we will start moving it into production and then we will need to start experimenting with timeline position on other places on the Interface to see how it does or does not open things up! :)
I adjusted the order of key Journal details, moving the URL higher up so it’s more related to the title and description. I adjusted the spacing of every element to make everything feel more balanced, easier to read and interact with. Also added the number of collaborators above the collaborator icons.
Adding a large Journal icon and collaborators icons to the top of this Interface. I imagine right now they will all trigger the same thing. A full screen view that includes more details on the Journal. I tried to make these icons large to consider the contexts we use our phones in. I use the other icons 'comment' and 'more' a bunch on mobile. I think they are too small but they don't bother me that much right now. It works for now but it's something we can definitely tweak to make it a bit easier to use. In time.
I'm making some subtle tweaks to this. The timeline is now shifted to the right of the entries a little more. I'll need to continue o play with this and to really know if it makes sense we will need to implement version of it to get some tactile feedback. But I like how we can more deeply connect the timeline to the entries and also remove it from the far left placement that suggests that it is a global set of controls.
I also added a left arrow under the Journal information that allows you to collapse this information so that the interface is more focused on the entries and the timeline. I'll need to work on a collapsed state. I'll get to that in the morning.
Experimenting with @pasquale's notes. A pretty interesting effect!
Quick tip from @pasquale, moving the timeline closer to the entries. He also suggested messing with adding it to the other side real close almost hugging the entries.
Information on a user can only be revealed through a click. It is not permanently displayed. It's interesting to see but it is not the purpose of Futureland. There's a lot of implications to what we show here so it's something that we will need to play with and have the courage to kill when it's not working.
I moved the Stream and Journals section links back to the top with the icon and user name shifted to the left. This is starting to feel right but I need a degree of implementation to see how all of this feels. I also adjusted the menu back into the top right. I raised it a bit into the top of the Interface. Also need to see how this feels but I want to tuck things into the sides as much as I can to slowly work towards making this feel more like a desktop creative application.
Adjusted the sidebar icons to be in the top header of the entry which seems to be more intuitive and cleaner on the screen. There's two icons now. One for comments and another to trigger and expanded set of actions. This is helpful because we can put new interactions in that little menu as we learn more about how people want to interact with each entry. I think we can make that little icon that triggers the expanded menu kind of fun to use!
Experimenting with adding labels of disciplines on the right side of this projects view so you can sort someone's projects (journals) by discipline. This would mean Projects/Journals can be tagged. This allows you to see the different kinds of things a person is making with his computer, films, animations, software, writing, music and so on and then navigate through their work with that understanding
Just starting to think about how to organize a person's projects (or Journals) on Futureland. It's a bit of a tough thing to figure out because we're moving in a direction with the volume of someone's creative output is expanding exponentially. What is the right way to organize all of that. How do we use projects to express our identity? Why do we use projects to express our identity? What is a project? I'll need to write about this a bunch tonight before I can start some more squares on this thing!
Experimenting with variants to the comment button. Chatting with @pugson for ideas.
I really enjoy the design of https://reading.supply and I'm a huge fan of Jim's (@wwwjim) work in general. I often find myself GEEKING on whatever he's making!
I enjoy this interface a bunch. I like how it uses the entire screen and it feels a bit like a desktop application or a creative tool. It's something I'd love to see us do more on FL.
Just starting to experiment with putting more focus on comments / conversations in Public Activity on Futureland.
- Maybe if you drop a single emoji on something, it displays the output in context. Usually when we use a single emoji like this, it's because we simply dig something!
- Maybe when you write a comment with more text, the text is given primary emphasis since you are now sharing thoughts and ideas which is its own contribution.
A couple of things I need to finish on the Mobile interfaces so we can get that out to users, but I need a bit more time to think about it. So I'm just starting to little file and sketch together in preparation for desktop improvements. In a bit of a rush tonight! See ya in the morning on this stuff!
Started reading about Zen specifically, 'Zen Mind, Beginner's Mind' by Shunryu Suzuki. I have been thinking a lot about how I can integrate some of these ideas into the way that I design interfaces. Many of the ideas are similar to what I experienced in my own learning experiments. But of course here they are much more refined and clear.
Slight adjustment to the spacing of the day, date and total outputs to try and create more symmetry. Something @pugson caught while looking at these interfaces. I think it looks a lot better!
In the Log, I am trying to increase focus on the present day and on your own creative process.
Focus on the present day
You will notice a large heading at the top which tells you what day of the week it is. Your total outputs for the day have also increased in size so you can quickly glance at it and see where you are at.
Focus on your own creative process
I've tried to make it easier for the user to focus on her own creative process by bringing images of recent outputs into this Interface. As the user is publishing through the day this interface will fill up with recent images from the user's creative process.
Also I found this green on @tmm's website: https://meagher.co. I like it a bunch.
Haven't looked at this interface in awhile. It's cool and I think there's a lot we can learn from it. I'm super stoked to get back to designing for desktop once some more of this mobile web stuff is done. There's a bunch of ideas I want to try that might be interesting!
Also @tmm you had a huge jump in contributions from 2016 to 2017. What happened? lol
I find that documenting my progression through an interface like this is really helpful. Each time I try something new in any part of the interface I create a new variant. Every now and then I will zoom out and look at all of the variants. Sometimes I will take something from a previous one and integrate it into a new one. Or by looking at each of the variants I can see if what I am working on now is truly an improvement over what I did in the past.
A more minimal header which I think might look better. Perhaps things fade as you scroll. Perhaps that’s a dumb idea for web mobile! Not sure. There's big spacing here from the content to the header. I'll need to play with that too. Sometimes looking at other stuff and then looking at these interfaces again helps.
Added average publish times to this Stats view of Futureland’s Log. This is something I’ve always wanted to know because I want to know when I’m working I. The night and when I’m working in the morning. I wonder if there’s any patterns here. The average time is useful to me because it serves as an overall indicator of when I’m doing my creative work. For a long time I’ve wanted to shift my creative time to very early in the morning like 3am - 9am to see what happens. I haven’t been able to do it yet but it’s something I think about a lot.
This interface needs a bunch of work. The Average Publish Time section might be useful enough in its current state but I’d like it it was more visual. If there was an immediate way to see if on certain days you’re working when the sun is out and others if you’re working when it’s late at night.
Experimenting with something I am calling dots. They give you the ability to quickly track anything you want in your Log. The ideas is that you can use this for things that you want to track data on but do not want an entire project for. An example could be water intake. The more I use the Log in my work and my life, the more I want it to reflect all of the things that are currently important to me. I want all of this in one place.
Adjusted the folder icon size. Increase the project name text. Thanks for the advice @pugson
Folder layout in the iOS files app. I enjoy the spacing and sizing of things here. Very large and useable on a smaller screen. When you contrast this kind of an interface against the the Finder view on the Mac, you really get a sense of how differently we manipulate interfaces on each of those screens.
Software is a tool. Something that the user should always control and manipulate within their own creative process.
Throughout iOS, people - not apps - are in control. An app can suggest a course of action or warn about dangerous consequences, but it's usually a mistake for the app to take over the decision making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they're in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they're already underway.
- Apple iOS Design Guidelines
I was chatting with some friends the other day about why using an iPhone can feel so much more personal than using a Mac. When I was growing up, the ability for people to immediately understand and manipulate an interface was not a common thing. There's been so much progress in software design since then. I think this paragraph on Metaphors from Apple's design guidelines starts to get at why:
People learn more quickly when an app's virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.
- Apple iOS Design Guidelines
I have been studying Apple's Human Interface Guidelines, starting with their iOS Guidelines. There's a subtlety to the language that is really easy to miss. I enjoyed this paragraph on feedback within an interface:
Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound can help clarify the results of actions.
- Apple iOS Design Guidelines
Maybe I'm just a huge nerd. But I dig the convergence of elements here. It's really cool to think about where software is at right now and where it might be going.
This is a variant that is standing out to me right now. I've made a subtle adjustment to the radius of the buttons that most won't notice, but I think it's a lot better. The publish button gets a separate color treatment than the bottom menu buttons. I also reduced the weight of the line separators on the bottom and top menus. Again subtle but important to keep your focus on the middle of the interface while still creating a feeling of separation where it matters.
I moved the publish button to the top right of the Interface which opens up a lot of flexibility in the bottom navigation. This makes a lot of sense for our current requirements. Now I am sketching variants of this top menu. When I sketch out variants, I get a stronger understanding of all of the variables of the component. What matters and what does not matter. What I know and what I do not know.
What is the ideal design of the output component on Futureland? I'm starting to sketch out variants of the component to understand what makes the most sense. It's one of the core building blocks of these interfaces.
I also adjusted the top bar to have a smaller profile picture. I added a line separator as well. I'll try adding the publish button to the top right of the mobile interfaces to see how that feels. It should open up more flexibility in the the bottom navigation.
I am working on Activity in our mobile interface this morning. These are straight forward variants of the output component. The same as the existing component but with subtle visual refinements. Text size has changed. Character spacing has changed and I've tweaked all greys.
I'll start thinking about how else this can be improved now.
Reproducing this Twitter tray to understand it better. I learned a bunch about spacing objects on the screen and also how to handle the character spacing of text at varying sizes. You can increase the character spacing when dealing with smaller text and decrease it when dealing with larger text.
This might be an obvious insight, but it's cool coming to these realizations in your own way.
The Design of Everyday Things by Donald Norman
Two of the most important characteristics of good design are discoverability and understanding.
Discoverability: Is it possible to even figure out what actions are possible and where and how to perform them?
Understanding: What does it all mean? How is the product supposed o be used? What do all of the different controls and settings mean?
Starting to work on reproducing the interface for Logic Pro X. This is going to take me a bit. On Mac applications the buttons follow the same pattern. There's a slight adjustment in Logic Pro X, the buttons are a bit lighter and larger than in other applications. The shape remains relatively the same.
There's subtle details on the buttons that I can't figure out how to reproduce. I can't exactly match the grey right now. And there's a flatness to the button that is hard for me to replicate for some reason. It's bothering me a lot. I'll keep messing around.
Finishing up this reproduction of Safari. The difficult part for me here was the icons which I repurposed from other places. The most learning was in how you can use greys and gradients to create a metal like feel where the controls of the browser are. I'm just starting to see the parallels between industrial design and the interfaces of Software. Still have a lot to learn.
I started reproducing the Safari window tonight. I might have accelerated this video too much, but I find that reproducing Interfaces like this is one of the best ways for me to learn and think about things on a deeper level.
I use the same approach when reading. If I want to really understand something from a book or from somewhere on the Internet, I transcribe every line and make notes during that process.
In general I'm curious to see what I learn from reproducing the interfaces of a bunch of Mac applications. Things like, Final Cut Pro, Logic Pro X, the finder window, notes, etc.
I'll work on this more tomorrow.
I was chatting with @pugson and he suggested adding a component to the top of the Profile stream that allows for composition and inputs. This seems to make sense. I am not happy with this interpretation yet. The right one will take some time.
A component like this might be useful on all of your projects as well.
I was talking to friends who use FL yesterday about the Log. A common note that came up was, "Why is my Log always empty?". It is not currently clear how to add Projects to the Log. Currently you click an arrow that points left and it reveals a drop down menu. I thought maybe using an equalizer icon might be more fitting. Maybe it should be on the right side of the interface instead of in the center. I have always seen the Log as something that allows you to bring your projects in and out of focus.
The Log works well for me and I use it every day. I think there's value in starting to slowly tighten it up. I would love to one day see a visual of the times I usually publish on Futureland. It might create a heightened awareness of my behaviours.
Starting to think through basic sketches of a grid that displays recent outputs from projects and people you follow on Futureland. I don't have much time today, so just getting something down for reference really.
A thing to think about is what might be most important. Highlighting a project that has been updated and letting it oscillate through outputs or displaying the latest output it self. The text currently displays a preview of the output's notes which I think makes sense and provides the closest relationship to the creator who published.
Naming this open space 'Stream' instead of Outputs because the things you share here will not just be 'Outputs' but could be any artifact from your process at all. The name can obviously be changed and I figure you'll tell me if you hate it.
I also added a Follow button to someone's profile. Maybe on Futureland you can Follow a person and everything they publish or just a specific one of their Projects.
All of this is experimental.
Had a bunch of conversations today. One of them was with @emu and he talked a lot about how he wished there was a 'thinking space' on Futureland. A space to share various artifacts from your process or consciousness that might not be part of any project yet. I thought this made a lot of sense. There's a lot I want to share on Futureland, but I don't always have a place for it. I started to share this concept with others and the response was immediately positive.
So I started sketching some interfaces for a feed that shows all of your outputs including random ones. The idea is that when you visit someone's profile you can see all of the projects they are working on but then flip over to an 'outputs' view where you can see a feed of every artifact from that person's process. A place where it's fine to be messy. And when an output / artifact is associated with a project it will add a project tag that you can click.
Not a fan of calling this feed Outputs But might be a good place to start.
Another night just kind of thinking about design and looking at objects, designing random things. It's been interesting and I feel like I'm finally starting to dive into this in my own way. The main thing I was struggling with was how to break down design into something that I could relate to and process in my own way. How do you break down a feeling into components? I started to find some kind of answers by looking at physical objects more in various light conditions and asking how I feel or why it might be designed the way it is.
Still have a lot to learn.
Later night than I wanted. Making some improvements to this design for how direct messages might work on mobile. Added a button to the top left that will trigger your conversations to slide out from the left. Still thinking this through the. Not sure how I feel about this icon. And need to review other elements I might be missing.
Simple improvement to mobile menu to make it easier to use. A suggestion from @lucas.
An interface to connect everyone learning a specific skill
I added icons to see if it makes this view more informative at a glance. At this point I think the most important events are when someone new starts a project, when someone creates something or when a user interacts with another project. I still think the spacing is off here but maybe it's good enough as a starting point.
Functionality for the future that I was thinking about was, what if there was automatic grouping of users learning the same skill. For example if you decided to learn how to code you would automatically be connected with 3 others in some type of group chat. Just something to think about in the future.
An interface to connect everyone learning a specific skill
Thinking through how this might look on mobile. Definitely not happy with this yet. Just feels off and like it is missing something fundamental. Within the activity portion of the Interface it's difficult to just glance at the view and quickly understand what's going on. I have some ideas and I'll play with more tomorrow.
This is an interface that attempts to connect anyone learning a certain skill. I added number of users to the info in the top right corner and I added a Join button to the center of the Interface. Not sure how I feel about its position yet. I might think about this on mobile to better understand how something like this should work.
Tonight I started working on a new interface. It aspires to connect everyone who is learning a certain skill. The general idea is that once you decide to learn a new skill, you should be able to turn on any computing device and immediately be connected to everyone else in the world who is learning that skill right now. I am limited in my abilities as a designer here, but I think on a conceptual level this could be really cool. There's a lot to work through.
I am thinking maybe we start by trying to connect everyone doing #100DaysOfCode projects on Twitter and see what happens.
Working on direct messages on FL. Finishing remaining empty states, adjusted the input field to be more readable. Talked to @lucas and made some decisions on when @ for users is used on the Interfaces and when it isn't.
More work on a list view for profiles. Starting to experiment with using small rectangles and then anchoring attributes like output number and marathon state just slightly outside of it. Need to see how this looks with longer project descriptions. Still not there yet but I'll experiment more. Maybe there's some aspects of the Log that I can incorporate here.
Starting to add more contextual real world data into these markdown styles to see how it feels. I ended up changing the code block, adjusted the colour of the text and made the background darker. These code blocks might not be ideal in terms of contrast on low performing displays, but I think I like them. I'll need to play with this more though and get some more perspectives.
Stripping this down so we can implement and start playing with it. @lucas put something together already and we've started using it to see what works and doesn't work. Really stoked on this.
Really excited about this concept. I've started sketching out a new tool for Futureland that we're calling, 'Log' for now. The idea is to have a single and immediate daily view that shows you how you're doing across everything you're making and learning using Futureland.
It will show you things like: a streak for each project, the last time you added an output and perhaps how many outputs you made that day. I think this could be really useful tool, especially when connected to Futureland's other components.
Thinking through button concepts. It's really helpful to break down a set of Interfaces into components like this. But I still have a lot to learn. And I think there is a separation between components and mechanics in the Interface if that makes sense. I'm probably using all of the wrong language, but I'm having fun and want to understand this a lot more.
Hanging with @marvindraws and working on improving 'Settings' across various Futureland functions. Going to bed… zzz
Adding an edit state to this simple settings menu. I think @lucas might be implementing this tomorrow.
More thinking into how to highlight projects that have outputted across 365 consecutive days. Wondered if it made sense to call these projects 'Marathons'. I tried the word 'Skill' but it didn't quite make sense, because skills are not limited to the results of these projects. Hm, maybe the word Marathon could work in this context. What do you think?
Quick sketching through a concept where you could a model of the Earth to explore various projects happening around the planet. To make this work, Earth would have to be visualized in a way where some of the information is removed. Things like clouds and colours may be unnecessary. The idea is that you would explore projects by geography and based on what you see you might connect with the projects in various ways.
Don’t have my Mac so sketching some pretty terrible interface ideas on my iPhone.
Something I’ve been thinking about is how should a feed work on Futureland? I don’t think it makes sense that you would see an output out of context among other outputs out of context. Perhaps the feed would just be a display of projects you’re interested in that have been recently updated and you can decide to go into them to explore further?
Working on a new visual onboarding concept for Futureland. I'm feeling pretty good about this. The idea is to create something that feels like a video but occurs right on the Interfaces that the user will be using. This could be an interesting way of sharing the purpose of each Interface and its components.
Sketching out improvements to futureland.tv
Sketching out new improvements to Futureland's homepage. Updating all of the Interfaces to display the current iteration of the tool, considering how visitors might be able to explore projects and building out components that show various use cases. I'll need to start making a few videos to progress further on this update.
My friend and filmmaker Karl Kai came by the house today. He set up his profile on Futureland - futureland.tv/karlkai - and gave some really good feedback on the tool. It was a lot of fun. This oscillation of working all day on something and then opening that something up to feedback in the evenings has worked really well for me in Film and it seems to be working well in Software as well.
Here I'm thinking through how we might realize some improvements to the timeline on the Project Journals. I'm really excited about this.
Worked on a bunch of different Interface improvements today in Sketch. This is an Interface to create new projects on Futureland. It's a system that was created when we were trying to figure out how new users would register for Futureland. The concept is we cut to a full screen Interface that is hyper focused on a singular purpose in certain key instances. Here we are repeating this system when a user creates a new project on Futureland.
Here I am working on an improved login screen for usability. It's an easy Interface to use but everything is too small on the screen right now. Then I spent a bit of time thinking about buttons. And then reworked the publishing view again with the results of my button experiments. I'm liking where it is going. It seems like the more I strip away elements and focus on spacing, placement and size, the better things feel.
Tomorrow Lucas Fischer, a software developer arrives in Toronto from Germany. We met on the Internet about 45 days ago. I rented a house for us in a cool neighbourhood in the city. We'll be living together for a month and working on Futureland. It'll be interesting to see what happens.
I'll write more about this tomorrow.
I am still tweaking the publishing view. I started removing more elements, playing with the typography and weight. I adjusted spacing as well and had a lot of good conversations about UI today in general. It's interesting how detailed it is and how much you have to just keep playing with things until it starts to really work. It's just like learning other disciplines as well in that you have to be willing to make a bunch of terrible things before you make good things. This can be harder when it's visual. Most people don't want to be seen as someone who lacks taste or aesthetic sense, but the reality is that it's about combining patterns, learning from references, understanding people and computers. The idea that you can just start organizing all of those things into coherent Interfaces is not realistic. It takes time and it takes practice. You have to make a lot of things and see what happens.
Still reading about interface design and applying some of those lessons to sketches of the publisher on Futureland. I'm still learning about visual hierarchy and the appropriate ways of emphasizing something, often by de-emphasizing something else.
Tonight is my last night Mexico and I'll be flying back to Toronto in the morning for an intense January and February.
I spent a bit of time studying Interface design before creating something in Sketch. I did this a lot while learning how to code, reading a lot of books and creating at the same time. I think a natural transition is happening in which I'm starting to put more focus into design.
For something to feel designed, it has to feel as if a lot of thought and consideration has gone into each material you are seeing. When something feels 'designed', it's as if it 'knows' you in some specific context. Perhaps quality of design = quality of thought expressed through materials.
Thinking through improvements to the upload interface. Making text bigger, changing the word 'push' to 'upload', increasing the size of buttons and refactoring the layout of the audio interface. Will continue experimenting with this over the next few days.
There's a lot more I have to study and experiment with, but I'm learning a lot.
Limited time today. I spent the time that I did have thinking through elements for the audio interface on Futureland. I'm so used to putting most of my time into writing and studying computer programming. I need to figure out how to put more of my time into designing Interfaces.
In a way it seems like making interfaces is a new medium than writing code. The way we interact with computer based devices has changed so much that it seems the interface design industry is still learning what's possible and makes sense on all of these new screens and the contexts they enable. Whereas; the computer programming concepts underneath these devices have been the same.
I spent a bit of time tonight thinking through an audio interface for Futureland. The interesting thing about Interfaces is that they need to look attractive and be functional. I can't imagine how a designer could nail both perfectly on a first attempt. Perhaps you start making an interface a certain way because you believe it ought to function that way. And then by watching someone else use it you see many of the subjective ideas and beliefs you brought into your design. Now with this new knowledge and awareness, perhaps you can make something better.
It seems if you want to make things that people love using, you have to get good at observing the world around you. Asking, "what is so special about the things we universally love?" and then regularly translating those observations into materials until you find the answer.
Thinking through how to handle the selection of multiple outputs to add them to a collection or delete them. I've worked out two different concepts here so far.
(1) the user would select a bunch of outputs and then 'groups' would appear that they can add them.
(2) the user would select a bunch of outputs and then an input interface would automatically appear where the user can just start typing and it will auto complete with existing projects that the user can push to. I also created a new concept for a delete button.
There's a lot to fit on these Project views. It's an interesting challenge trying to figure out how to keep a particular view focused but also 'fast' meaning whatever a user might need is immediately available to them.
It seems you kind of have to predict what the user is going to do on each view. It definitely helps to use the tool yourself.
Experimenting with a new way to view outputs on Futureland that puts more emphasis on the content and functions as a timeline. As you scroll an indicator the left will display the date. Perhaps it could go back beyond a year to show progress over multi-year time scales. For example, I am still coding every day beyond 365 days. Or perhaps it functions as a central feed of user's output across all projects as far back as the beginning.
Thinking through an improved version of how each output is viewed on Futureland. This new view includes, multiple forms of media, better typography, and ability for other users to have a discussion about each output.
The challenge in figuring this out is creating an Interface that serves various depths of sharing. It should work well if a user shares a single image with no text and also if the user wants to share multiple forms of media and a lot of text.
Experimenting with interface animations. This seems like a much clearer way of communicating ideas. It also forces me to work through nuances that I might not notice when working with static designs.
For example, when you push this purple square in the left corner, it should transition in some way with the other elements. I did not notice this until I started animating the Interface.
Starting to think about a concept for Futureland public profiles where you can:
(1) read a bit about a user,
(2) see the projects they have completed, the projects that are in progress, the projects that have been archived
(3) and find links to their other internet profiles (twitter, instagram, soundcloud)
Studying the work of <wwwjim> who created reading.supply and other work I really dig.
Quick interpretation of Are.na one of my favourite tools