If you keep track of this place, you might know about Better and how it changed over the past few months. It is my only iOS project and i’m very fond of it. It finally got someone willing to develop it, so i’m giving it my full spare time to create the best design possible. The following images are from the seven screens i’ve made to show some of its features.
The images will be uploaded on Tumblr, and if you don’t know, it ruins images completely, so if you want to check all screens in retina-ready display, check it here.
From the last designs, the navigation bar used to be green, but there’s a reason why you don’t see green being used often (at least not without a few blue, right, Vine?). I went for a gray navbar to don’t clash in case the user picks a green color for the item label. I also added separators between each item to keep the same colors for background and font. I also removed the checkboxes.
One of the reasons why i love my girlfriend is that she’s just a human being when it comes to technology, This makes her perfect to test your interfaces, but also to come up with the most intuitive set of gestures. I’ve asked her to do a list, mark a few items, exclude a few more and you can see the results in the gestures listed. In the end, it is just like Clear, but that’s only because Realmac did a great job with gestures, Clear is sincerely an inspiration to anyone who wish to work with iOS interaction. And no pinch, etc, gestures, they suck.
A little detail that may pass unnoticed. When you swipe to the right (archive), the item slides with your finger, like fitting in a drawer, meanwhile, when you swipe to the left (delete), your finger will swallow each character, so you know that you’re excluding the item.
This is the early concept of the fading the rest while one is selected. This is supposed to make pretty clear that you’ve selected an item to rearrange it. Also, it grew a bit tall, just to be certain.
This was a tough screen, tapping expands the item, just in case you wrote more than a single line, but most importantly, it displays actions. If you know Better from its earlier days, you know that its trick is allowing you to perform actions based on its plain-text syntax. It is all about making it easier to call someone, send a SMS or even visit a URL. Hitting that little rocket (clear reference to Launch Center Pro) will perform the action that you’ve added to the item. There’s also Copy Text, Pin and Share. Pin is to send the item to the top of your list, independently of your sorting mode.
Welcome to the most difficult screen of the day. This is not only a preview of Editing an item, but on the Editor overall. First, the navigation bar changes to display a Cancel icon (which may be replaced to a back arrow) and the OK in the right to say you’re done editing. The ‘fade away everything while one is selected’ is back, showing exclusively the item below and the one above, so you keep reference of what you’re editing. Then there’s also the Quick Add button, which is basically a rip-off from Listbook, another awesome list manager. Above the keyboard you have the list of actions. Can you identify each one by the icon? Here’s some help: Call, Send a Message, Email, Link to an URL, Set a location, Google Search and Set an Alarm. I must admit that i love this screen.
And the last screen of the day is about showing the Lists navigation. It keeps the reference for the actual list, just in case you want to swipe to return. You can create a new list or check the general settings from the navigation bar, the pressed item has an info icon to take you to its specific settings. At the bottom, you have Sherlock and the search, but this is a concept to be taken through the entire application. When you’re at the end of your list, it won’t block you at the bottom of the screen, but in the middle and the remaining space below will show you this huge spot to tap and take you to the search, just in case you couldn’t find what you were looking for.
This is pretty much it, i’m done writing or designing for the day.
Back to the drawing board (:
Foxhole began as an alternative for software like Yojimbo and even Evernote. But think for a moment, Evernote is highly praised due to its mobile sync, without that it would fall into the same hole as every other information manager. When we go down to the OSX software, there are already plenty of options to organize your files. IPhoto for your photographies, iTunes for your music, maybe Yep for your PDFs, Notational Velocity for your quick notes, Lyn or Pixa for your general images, perhaps LittleSnapper for screenshots or Papers for academic research.
But then there’s always a piece missing to complete your workflow. Anything buckets are applications created to fill that gap. They pack several features, turning them into malleable solutions to easily fit in your workflow. But they’re band-aids and much of their praise come from the fact that they give the feeling of completeness. If you ever made the jump from a band-aid bucket to a specific application, you know it is an improvement, yet one not every workflow is able to afford.
What i’ve noticed is the problem i’ve used Anything Buckets to cover could be dealt with more specifically and that is a better environment to store all articles I may use for further reference. As i’ve declared earlier, I need a read-it-forever service.
Services like Readability, Pocket and Instapaper are great, read-it-later has become a market these days and if you organize it properly, you can create a good place to stash your articles there. They’re just not made with that in mind. The latter even declares it openly:
> But Instapaper isn’t optimized for keeping track of thousands of pages. This isn’t the right tool to collect, categorize, tag, filter, and search the contents of every web page you’ve ever found — for that sort of use, try Pinboard or Evernote.
Consider the suggestions. Honestly, Evernote is as good to store web articles as any other anything bucket, since its web clipper also keeps the formatting of the article and it is not always the best format for reading. Evernote itself isn’t a very good reading environment overall. Unless you use another application like Evernote Clearly or Instapaper to send articles to Evernote, you won’t carry a good reading experience.
Then comes Pinboard. I’m a huge fan of the service for bookmarking and they offer a $25/year to store an image of the webpage. I’m willing to get the service (I have the basic only) as a last attempt to organize my web articles, however, it falls onto the same dilemma it seems, as i don’t believe it stores as a clean, nicely readable article.
Foxhole is thought to cover this issue once for all.
You have tags and folders. I don’t believe that tagging by itself is a proper organizational system, so I support hierarchy. Tags, at least for me, is more about searching and filtering. The only place to navigate through folders and smart folders is from the sidebar, even if a folder contains another folder, the folder won’t be displayed among the stored articles, but within the wiki structure of the sidebar. If you also check the status bar (bottom of the image) , you’ll notice a quick access to your tags, just like ReadKit does, but which would follow a structure closer to Yojimbo, as i’m a big fan of its Tag Explorer. You’d be able to pick colors to folders and that kind of stuff. The Inbox is a smart folder by itself, if a file is untagged and/or not in a folder, it will display there, inducing you to organize that article.
The article browser (middle) offers two different views, you can find both on Evernote as I consider those two the best ways to visualize a library. Of course, there’s a twist. It is easier to change how you sort your files, but you can also manipulate the size of your thumbnails, something Evernote misses. Beyond that the article browser is pretty straightforward, with each thumbnail displaying title, reference link and sorting reference (in this case, Date Added).
Before moving to the reading panel, you have the Edit panels. It is optional of course and there’s a button right above it in the toolbar to hide or activate it. It gives you quick options to highlight, note or link your article, with any color. In the bottom you have quick options to view in browser, share or print. On top you got the More Info option, but that one is always available even when the Edit panel is off, only a bit more hidden.
Then you got tabs, which are also optional, but will help you opening whatever references the article has and already storing them into the app’s cache and making reference with the original article. This means that I could not only view the original article offline, but also all the links it carries along for reference. The articles won’t be displayed in your library unless you want to, but they would be stored anyway. And just in case you missed the details, there’s a quick option in the Toolbar to change between a Light and a Dark theme. Meanwhile, in the Statusbar you have the possibility to include and view tags or to collapse all the side menus and have a full reading experience.
Besides that, not much to talk about the readability of the article (meta, isn’t it?), it’s a larger font, using a larger character and line spacing with decent margins, the font is Avenir Next, which i’ve used for the whole mockup. I hope that it makes a good enough environment for your texts as well.
Something not included in this mockup (but coming for the next ones) is the Similar Readings panel, which would show up on the More Info panel or at the bottom of your article. Since Foxhole stores text content mostly, it is easy to search and compare for content, so creating reference between your articles is just one step forward.
This is what Foxhole became. A read-it-forever application. I hope it could help you as much as it would help me.
Sketch is an application to create vector art released by Bohemian Coding. Even though it misbehaves a lot, crashes more than any beta i’ve ever been into and could have a few improvements, it still seems like a nice alternative to Illustrator. Specially for its price.
Besides tradition, part of the problem is that if you have Illustrator, you don’t have only a powerhouse of features, but also resources. I believe in the promise of Sketch so i designed an wireframe GUI for OSX (you can find one for iOS here).
The original was designed by Jonatan Castro for Photoshop and you can find it here.
I have no clue if this is actually perfect, but you can change it however you want.