Increasing the size of everything in this display of Journals to see how it feels
Increasing the size of everything in this display of Journals to see how it feels
Adding support for editing and deleting entries in this expanded menu.
A menu is trigged with the expand icon is clicked. This is something we can build on and improve but could be useful to design this way for now as we are learning.
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!
Adjusted the date and project component on the entry header to adopt our existing style which is simpler and cleaner.
Needs work! Trying to figure out how to best represent this Journals on the screen. I can use no icon, an icon or the media from its contents. the current version shows media and I think it's cool
Adding a spot to search through someone's Journals. It is text that simply states search and the user's name. When you click it, it will highlight white and blink with a cursor to signal it is ready for input.
Changing the word Projects to Journals
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!
Adding a simple little highlight on whatever section of a Profile is selected. 'Stream' or 'Projects'.
Adding a profile photo to the top, I thought I could get away without it but doesn't feel right for some reason.
Added three icons to the right of the entry now. Increased the width of every line of the comment icon.
Adding a link button below the reply button. So now there's kind of a tray of little icons beside each one of the entries. Could work.
Adding comment buttons. Not sure how I feel about this yet.
Experimenting with moving the publish button to just below the top right menu on FL.
Just starting to sketch out ideas for updated Profiles on Futureland desktop… need to get my thoughts down first
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.
Getting some thoughts down on removing projects from the Log.
Made improvements to the spacing and text size of this interface. Events should be more independent and readable now in this variant. I need to make a comment badge for these little reply / comment icons.
Just a subtle to the text when you make a new output / entry to a project. Reverting to shorter text.
Making some more simplifications to this interface. Adding some descriptive text back in and adjusting the placement of everything. Also a new comment icon. I will try and make another variant that highlights how many comments there might already be in a discussion.
Another variant. Trying to reduce focus on ‘self’ by removing profile images. Maybe this puts more focus on the content and less focus on the presentation of identity.
Trying to integrate a reply / comment button. This seems like it might be working.
An output / entry takes a large part of the interface. I might be fine with that for now. I like the increased focus on conversations here. Telegram was a useful reference.
Feels like improvement
Still working on this Public Activity interface. I’ll need to get this top bar right and perhaps everything else will fit into place from there. I’m trying to value conversations over outputs / entries in these variants to see what I learn.
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!
Hm. Maybe I can left align everything in a way and see what happens.
Working on an update interface to start new projects on mobile screen. Been struggling with this one this morning, but maybe kind of getting somewhere now. Apple's files app is a continual reference.
Working on a new project component for mobile that's triggered from the Log and other places. Pretty obvious there's still a lot to do!
Making some adjustments to the colours of this stats view. Just trying to make this interface simpler, while amplifying interesting high points.
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.
In the Log, I am trying to increase focus on the present day and on your own creative process.
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.
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.
Wondering how Futureland’s log might look if it was more focused on the present moment. It would be great if it also helped keep your attention on your own creative process and nothing else.
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
Putting stats on the bottom now opens this interface a bunch. I haven’t added a line that separates the bottom menu from the primary content yet. I wonder if it can work without it?
Cleaning up this bottom menu a lot. Adding a section for just Stats.
Experimenting with putting Stats in its own space to make the interface simpler.
Something I need to study a bunch more.
I'm enjoying a bunch of things about this interface. I like the sizing and layout of things a lot here.
Removing the top bar and adding labels to the bottom menu + adding a persistent floating publish button opens up the space on the screen a lot. I’ll play with this across the other interfaces. Seems like a big improvement!
A variant of that button, this feels better.
Experimenting with a new top bar. The hope is a more delightful visual as well as a clean integration of a back button. I don’t like using this purple highlight too much, I feel it’s a bit of an overdone kind of thing but it obviously works.
This is a simple take on a project specific stats view. It’s not the best variant yet but it might do the trick just to start. I’ll need to adjust how we think about the top bar a bit to make it easier to go ‘back’ on Mobile.
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.
Working on interfaces that show you more data on your specific projects on Futureland.
Adjusted the header here again and adjusted the icon placement of comments and share. I’ll probably play with this icon placement more. The heading seems like a bit of an improvement.
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.
Playing with a stronger separation of the top heading. Not sure how I feel about it yet! I’ll try variants with this for sure.
Experimenting with making spacing more clear in the activity view.
Starting to sketch out a few improvements to the Activity view on Futureland
Playing with the spacing of these two little lists. I’m not happy with this yet but it seems to work for now. Maybe they can both be converted into visuals similar to above. It might be more immediately useful that way.
In the Daily Active Projects section, I could probably move the outputs over by another 8px - 16px.
Starting to experiment with showing Daily Active Projects in the Stats view so you can get a sense of which projects you are focusing the most at any point in time.
Added a little moon to the Average Publish Time. Alternatively would be a little sun if the average was an AM. Not sure how I feel about it yet. It might be helpful to become more aware of whether your work is happening at night or during the day.
Some quick sketches on integrating a 'New Project' button into this Interface. Not happy with any of this yet!
I don’t mind how clean this screen is. I like the narrower selection buttons at the top. Also like how the top line is longer than the others. It’s a pattern I’m noticing in iOS lists. Maybe it’s everywhere but it makes sense.
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.
These lines feel too harsh I’ll probably try and ditch them tomorrow. I might add some kind of graph aesthetic behind the bars. Maybe not though might be over kill for now.
I’m done designing for today.
Adding a way for you to dive into more stats on specific projects. Apple’s screen time is a heavy influence.
Starting to work on stats within the Log
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.
Added a toggle button on this interface to switch between your finder view and your stream (all outputs). Also changed the height of the toggle button to be more narrow. I might play with this on the log as well now to see if it works.
Adjustments to this Finder view on Futureland to make it easier to manipulate on mobile screens.
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.
Showing the size of your digital information in gigabytes on this Interface now.
Making subtle adjustments to the size of basically everything in this Interface.
Playing with an adjusted top menu now. I don’t particularly like text on top like that but it might make sense for now.
Experimenting with adding a third button to the bottom menu here. This changes how I think about the top menu a bit in these interfaces.
Making some minor adjustments to this overlay while on the phone. I adjusted the font size to be a bit more readable. I also added a small arrow to the left of one of the folders. I'll expand on this tomorrow. I'm designing with sub projects in mind.
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.
Getting closer I think. The text is probably too small for people who aren’t me!
I'm starting to sketch out other components of this updated Activity view on Futureland. Something about it is not working yet. I'll make some variants of this comments object and see what happens.
Adjusted the menu on the bottom to be simpler. I don't see a reason to exaggerate anything right now. Probably need to adjust that down arrow on the Log to something more memorable.
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.
Dig the spacing here a bunch. The search bar specifically is cool w the black bg
Mix of grey and black. Cool how the line separators don’t carry all the way through to the icons.
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.
Nice clean list. Inspiring use of spacing and separation.
Cool little tray.
I am still creating variants of each component. The menu tool at the bottom is far from complete, but I'm digging this change from green to purple to mark projects that have you added to for the day.
Starting to generate variants of each component in this Interface as a way of thinking about what works and doesn't. Or what works best and what works just a bit.
i Like this little component a bunch. Good sizing of everything.
Added an outline around the profile image, needs work. Playing with variations of how it might look if a particular icon is selected in the bottom menu. Not sure how I feel about it right now. Maybe it needs to feel more alive or something.
Adjusted the top buttons to be text instead of icons with a slider inspired by iOS. Starting to build out the persistent bottom menu. Not sure how I feel about the size of the + button yet. The profile image should link back to the user's profile but that probably needs to be more obvious.
Digging the way this outline pops or something. There’s a subtle shadow around the bottom that is nice. A cool mix of greys.
Experimenting with an adjusted menu button. And a tray of buttons at the top of the interface depending on what you are viewing. I'll need to see this on my phone to see how it feels. Might be a dumb idea but I'm kind of digging it for now.
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?
I've started studying, 'The Design of Everyday Things' by Donald Norman. It's been brought up with me a bunch of times. Pretty cool so far.
Really dig the spacing and sizing here. I wonder if that little line separation has to be there. Button size is neat. I like how compact this whole component feels.
Thinking a bunch about rounded corners. Integrating them into the Log on Futureland to see what I learn.
Starting to dig really round corners. Not sure why yet
Really dig the way this looks especially the shadow under the album cover. It hangs a bit lower than my brain expected. Makes me happy
Studied Twitter's input component a bunch today and started interpreting insights in my own way.
Working through this reproduction of Logic Pro X. I think it's interesting at least on Interfaces like this how buttons are grouped. A group of buttons is a small collection of everything a user might need when they try to transform something in a specific way.
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.
Just got a bit of time tonight. Adding visuals to 'Activity'.
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.
Continuing a train of thought from last night. When you hover over this Project object, the object illuminates since it sits on a black surface. Still not working yet, but I think the concept of illumination is directionally correct.
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.
Spent a bunch of time just studying interface design tonight. I've been thinking a lot about simple icons that fulfill multiple purposes. It might be something that we can incorporate more into Futureland.
Working on an Interface for updated project settings on Futureland. It's part of connecting Futureland projects to Twitter threads.
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.
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.
An interface to connect everyone learning a specific skill
Adjusting the location of the Join button. Moved all primary content lower on screen. Moved key information about view including number of projects, number of outputs and number of users to the top left.
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.
Slight adjustment to the project view. Integrated total project outputs with Twitter share and link copy buttons.
Adjusting project design to display the total output number at the top. Adjusted position of Edit project text.
Working on a new output block for link previews.
Making some small improvements to profiles. Adjusting spacing of key information and adding a space for a url.
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.
Empty states for direct messages. Added new message icon which triggers a search function for you to select who you want to message.
Making adjustments to the direct message design based on early sketches of a mobile use case.
Thinking through direct messages on mobile. Still a bunch of stuff to do here.
Added a subtle input prompt for this direct message interface, input styling and send button which only appears once you start typing. Switching back and forth on font styling. I think this is cleaner and better.
Working on the direct message interface a bit more. Pulling inspiration from IRC.
Sketching out a minimal direct message interface for Futureland
Starting to explore subtle improvements to the output component on Futureland. Specifically, trying to make who's publishing more prominent. This is still very very far off. Have to experiment with various output types and profile images. And just trying to make it better in general.
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.
More work on a potential list view for profiles. This still needs a lot more experimentation. Obviously real world project data but also what's the best to highlight outputs or Marathon projects. The part I like about this is the simple distillation into text.
Starting to think through what a list view might look like on projects. I think this might be useful for users who have lots of projects on Futureland. This sucks right now and it needs a lot of work. I'll experiment with more.
Thinking through quote blocks on Futureland. This needs work, not sure how I feel about it yet but it's a start. It's funny I'm doing this for the first time ever in my life.
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.
More thoughts on markdown styles
Slow day today, just starting to define some mark up styles
Getting down my own thoughts on a little Mac app for Futureland. But definitely not working right now.
I have been using the new log concept daily and adjusting the design based on my experiences. Design now includes a quick reflection of yesterday's output when you open the log for the first time each day.
Adjusted the design of the log so that you can add new projects to it without leaving the Interface. And added text that explains the purpose of the log when a user opens it and has not added any projects to it.
Adjusted spacing and label positioning on stripped down version of Log. Starting to work on a desktop version now. I'm thinking, since there is more space - should other things be included? Should be integrated with another view. Not sure.
Still playing with this, I'll try to finish it this week.
More work on this daily log concept for Futureland
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.
Working on a component for 'windows' you use when setting up new projects. Definitely not working yet. I need to do more research and find some interesting references for this.
Working on field components - I think I am liking this direction.
Working on components for fields. I'll think of a few more here. Pretty straight forward right now. I'm not happy with the disabled / inactive states yet. I feel like they could be more interesting some how.
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.
Starting to design from the perspective of components. This is something I need to work on and study a lot more. I'm really stoked to dive deeper into this soon.
Finished a draft of this settings menu.
Working on Profile settings for Futureland. My days are super busy right now and I have a little bit of time each night to design.
A little bit more work on a new settings menu. Adding hints and explanations. I might have to cut these down a bit.
Thinking about how we might express thoughts, insights or random artifacts that we are learning about our users on the Activity page.
Cleaning up the menu on Futureland bringing more focus to Activity and Profile.
Working on a really, really basic settings menu
Super busy day almost forgot to design something. Was walking to bed and then had to turn around and turn my MacBook back on. I'm sketching out a new login screen for Futureland and for some upgrades we have coming to authentication in general.
More work on a text based activity feed. Not a fan of this blue, but not sure what other colour to use to retain a functional feel yet.
Thinking through a simple text based representation of various kinds of activity on Futureland as a means of exploring for now.
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?
Working through some concepts for a web based deck for Futureland.
Thinking through text only outputs on Futureland. Should the text be limited and then expanded or always show in full view?
Thinking through some kind of verification and highlighting for projects that have outputted across 365 consecutive days. Open to any feedback on this. I'll be putting a lot more time into Interface Design in general over the next bit.
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.
random graph thing
Random sleep chart thing, thinking about sleep… limited time on outputs for this month but still making very mediocre stuff
Sketching out more random concepts for how someone might explore projects on Futureland on mobile. Kicking the can as usual
Resting this weekend, made something random. But it was nice to just click around and not think a lot.
Taking the day off gn
Wondering how users can explore projects on mobile and explore Futureland in general on mobile. Kind of lost with this right now, probably need to spend some time writing about it / studying interface design on mobile a bunch more.
Super limited time tonight. Started thinking through how users might explore project Journals they are subscribed to when viewing Futureland on their phones.
Making more adjustments to this home page concept for Futureland. Trying to simplify it and remove elements to see how it works. Also increasing its width.
More thinking on an adjusted home page for Futureland. It puts more focus on the question we're trying to answer which is becoming the nature of this experiment in general.
Sketching an improved version of the home page for Futureland based on some good conversations
Early thinking on how we might handle subscribing to projects on Futureland and how someone might view all of the projects they are subscribed to
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?
Spent most of my time working on a film about Futureland today. Just seeing how a video might fit into this concept.
Adding a table of contents to this concept that explains the history of Futureland and other data.
a sketch of a page that explains the current state of Futureland, aspirations, hypotheses, challenges, data.
Trying to eliminate the pop up window when users are adding collaborators to Journals.
Ideas on how users will add collaborators to their Journals
Starting to sketch out a concept for a new screen
Building on this full screen comment window…
I'm still on a limited schedule but I played with this a bit more, randomly dragged the comment window out to the full width of the image and its kind of interesting.
Trying to make more visual improvements to comments. Not happy with the way this right now…
Trying to make some visual improvements to comments on Futureland.
Thinking through visual improvements to comments on Futureland
Sketching out ideas for how to handle collaborative Journals on Futureland.
A little more work on this onboarding concept. Spent the whole day writing code. I'll probably take a break from this for now because something about it feels off right now. My mind is pretty occupied by with some code I'm trying to work out.
A bit of work on this visual onboarding thing
More sketches on how to introduce people to Futureland
A few more steps with this visual onboarding concept
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.
Experimenting with more visual on boarding concepts. This still needs a lot of work but I'm getting a better sense of how to handle this. It's kind of like a video that explains something, but each component of the explanation is triggered by a click in a visually appropriate location.
Starting to think through some visual onboarding concepts for Futureland. A lot more to do here.
Very tired, just sketching whatever tonight. Good night
Making some more minor tweaks to Futureland's home page.
Early sketches on some kind of project based feed for Futureland. A lot of work to do here.
Making a few more improvements to the home page concept. I'll work on this more tomorrow.
Thinking through more improvements to Futureland's home page. I need to make a video assets to continue to get a feel for this. I'll probably do that tomorrow.
Still trying to figure out the best way to handle comments, needs more attention.
More thinking on how to handle comments, what if I force everything to the right side? I still have a lot to learn about screen design in general.
Thinking through how comments might work on Futureland outside of the timeline.
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.
More work on the timeline of Journals
Sketching some thoughts on improvements to Journals.
Thinking through how users will edit projects.
Thinking through how a new user might select a profile picture when they first start out on Futureland. I'll need to start thinking through a settings menu soon.
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.
Spent a few hours working on improved interfaces for some upcoming changes to Futureland.
Working on concepts for a profile that displays a user's projects.
This is the longest amount of time I have spent designing in a single day. It was fun, I'm learning a lot.
Working on concepts for a new homepage and project creation workflow. We made a lot of progress on this today.
Sketching some ideas for handling audio on the output editor. Had a good session in general today working on Futureland interfaces with Lucas.
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.
Giving myself a bit a break tonight. Just some simple stuff. Good night.
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.
Spending some time thinking through how users might interact with someone else's project. There's still a lot of work to be done here.
I also need to start spending more time studying user interface design in general. Both the technical operations of Sketch and various design philosophies as well.
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.
Thinking about how collections or groups of outputs might work on Futureland
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.
Making improvements to web publishing interface.
Starting to think through how users might publish audio to Futureland using a web interface.
Various interfaces I worked on or refined today while working on web publishing for Futureland
Putting together interfaces for a prototype of web publishing on Futureland
Working on interface concepts for publishing to Futureland on mobile
Adding more components to publishing interface on Futureland
Experimenting with a text based Futureland profile
More thinking on how project selection / tagging might work when users are publishing outputs on the web. I like this simpler approach.
Some quick thinking on wire frames for how projects would be displayed during publishing outputs…
Quick mock up of confirmation after a user adds authentication to their accounts. I'll probably scrap this.
Thinking through Interfaces that help existing users enable authentication on their accounts.
Spending a bit of time thinking through web publishing. I'll work on this more tomorrow.
Ridiculously simple login page to start running some experiments on user authentication
Improving how new Futureland projects are started on mobile devices.
Another version of a simple on boarding screen that is displayed once a user starts a project on Futureland Alpha.
Thinking through a concept where after a user starts a project on Futureland, the screen goes black and a text message conversation starts with the user.
Finishing off improvements to how new users sign up for Futureland: Alpha
Making improvements to the Interface users see when they are starting a new project on Futureland
Sketching out interfaces for the next version of Futureland
Sketching every Interface for the next version of Futureland. It's going to take a lot of output to get every view moving in the right direction
Thinking through a profile view where you can navigate through a users various projects and other elements.
Thinking through improvements on how new projects are started on Futureland
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.
Separating Profile View and Project View. This seems to be an important insight in how all of this should work.
Wire framing how to add more functionality to profiles… need to think through how users can navigate through various projects, sign in, publish and edit their outputs.
Applying what I'm learning about wireframing to Futureland
Learning about libraries and overrides
Learning about symbols and overrides
More practice / study laying out Interfaces
Studying and practicing laying out interfaces
Studying and practicing laying out interfaces
Studying and practicing interface layout
more practice with icons … a lot to learn
Learning a bit about icons…
Exploring profile interactions for next version of Futureland
Thinking through some improvements on how users start new projects on Futureland
limited time. quick experimentation
very very tired, some random experimentation
Some random experimentation while on a very tired flight to Toronto
More development on how users are eventually going to interact with and explore their Futureland projects.
Building on interfaces interactions for when users publish to Futureland
Been a tough few days mentally, but still progress because of Futureland. That's what I really like about this process, helps me get out of my own way.
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.
Experimenting with a quick way to get more information about a project on Futureland
More exploration into various components of profiles… thinking about how users might connect various projects
More work on how users will use and navigate through various functions of their Futureland profiles
Thinking through various ways to navigate around Futureland profiles
Thinking through how logging in and other functions might work on mobile. I am finding that for me to feel confident in my design decisions I need to produce many interfaces
Limited time tonight, exploring how additional settings could be handled on this Interface. Need to tweak my process for more focus in the coming days
More iterations of publishing and logging in on Futureland
Thinking through mobile interfaces for Futureland
Pulling inspiration from other interfaces to think about how futureland could look on smaller screens
Creating interfaces for something I was working on called Desk, it allows anyone to turn any place into a coworking space.
Just trying something new, revisiting a concept I was working on before I knew how to code called Desk
Trying something new, just revisiting a concept I was exploring before I knew how to code called Desk
Thinking through a simple settings menu, might scrap this
Feeling out of it today
I think I have worked out how to handle user login programmatically, so just thinking about how the Interface should handle it.
I am getting a better understanding how to implement web publishing to Futureland profiles programmatically, so putting together an Interface to handle it
Imagining what this Interface might look like on wider dimensions
Exploring functionality through two big simple buttons
Playing with this abstracted Interface to see what I learn
Abstracting a Pinterest profile to see what I can learn. Seems well balanced.
Spending some time abstracting an Interface to see what I learn, I might do a bunch more of this
This is all over the place right now, but it doesn't matter. Just trying to imagine what it would be like if the first visual of Futureland was some kind fly over of a futuristic city or place… long way to
Thinking through the first screen a user might see after signing up for Futureland. Just starting out, a lot of thinking and prototyping needs to be done with this.
Thinking through various ways people might start Futureland projects
In the process of bringing new functionality to Futureland on the web. Part of that is reworking how users start projects.
Quick thinking through how output pages should reflect style changes I've made to the rest of Futureland profiles. Will likely publish this tomorrow.
More experimentation into what public profiles might be like on Futureland
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)
Exploring what an expanded view might be like on Futureland profiles. There's a lot of experimentation to do to figure out the best way to display a variety of different projects
Exploring new ways in which Futureland could display individual outputs.
More subtle improvements to Futureland profiles as I'm learning more about designing with base 8. I'll be publishing an update to profiles soon.
Exploring the various ways users might add outputs to their Futureland projects
More exploration into how users might login and publish to their Futureland profiles
Exploring how user login might work on Futureland profiles
No time tonight
More studying of and experimentation with designing in base 8. I have a lot to learn
Trying to understand the impact of a base 8 system by applying it to Futureland profiles. I have to practice this a lot more.
Don't have my MacBook Pro charger, had to do all of this on 10% battery.
Imagining the first screen once someone logs into Futureland
Opened Sketch and created whatever came to mind.
Creating a desktop iteration of the first screen someone sees when visiting Futureland
Imagining another design of the first screen someone sees when visiting Futureland
Imagining new home pages for Futureland
Imagining how users might publish outputs to their Futureland projects. This kind of interaction probably makes for desktop.
Exploring how new improvements to Futureland profiles will look on larger screens
Limited time today. Beginning to explore what some new interface improvements might look like on Futureland profiles on desktop.
Thinking more about how exploration might work on Futureland
Starting to think about what project exploration might be like on Futureland
Thinking about how users might publish project outputs directly via their profiles interface. I need to do a lot more research and experimentation on this.
“Imagining new Futureland profiles. When someone taps a user's profile picture, the primary interface fades into the background and a bio becomes an overlay."
Continuing to imagine new functionality and improvements to Futureland profiles…
Exploring new functionality on Futureland profiles. A lot to think about here and more iterations required.
Building on this Interface that users see once they have started a new project. Still not completely satisfied but a better starting point.
Creating a screen that is shown to users after they start a a new Futureland project. Not satisfied with this yet.
Starting to think about how this new project interface should look on larger screens. I'll start porting this over to html/css later today
Building on the Interface I created yesterday for users starting new projects
Starting to improve the experience for users starting new Futureland projects. This is a draft of the first Interface they may see.