The new Share, which I’ve decided to call “Vanguard” for now, works. Most of the backend is identical to the old Share, just refactored a bit, so that’s not too much of a big deal.

I also made some adjustments to the URL validator to allow for more URLs, and made some small UI tweaks to the front-end.

The Vanguard to-do list now lists 3 bugs, 3 frontend tasks, and 3 really huge backend tasks left. It’s a sizable amount of work, but it’s getting there.

Share as it is now requires the user to perform a bunch of high level tasks just to submit a single image. You have to right-click and figure out which contextual menu item will copy the image URL, then paste it into the Share form on visually. Every browser’s contextual menu is different too, so its hard to streamline instructions. That’s way too much work, and what if you want to select multiple images from the same page? There’s a lot of repetition there.

One way to solve this problem is with a bookmarklet, but there should be a solid way to share images on-site as well. For the past week or so, I’ve been working on majorly rehauling how Share on visually works. While what you see is likely not the final design, it represents a significant step forward in how users will interact with the site.

The foundation of this new Share is a scraper. “Scraping” is the process of taking a source of data, in this case a website, and extracting that data for processing. In our case, you can now put any URL into the Share input, and it will grab all of the images (and soon videos) contained at that URL. You can select which of the images you want to submit to visually, and then add tags, make thumbnails, and do all the things you’d usually do in a streamlined, extremely fast interface.

The entire UI is written in Javascript, so its all clientside, which allows it to be lightning fast. The only thing PHP does it validate the webpage the user inputs and scrape the page from images.

With that said, there’s still a lot left to do, but a lot of progress has been made. The frontend is probably about 85-90% done, and the backend is hovering around 50-60%.

These tabs were an idea I had at work last week and jotted down frantically in my sketchbook. I’m only just now getting the time to really explore it, but I think it’ll shape up into something nice and really make Singles something interesting to work with.

Started playing with UI paradigms for the header and I this one is sticking the most right now. I’ll probably try some CSS tests tomorrow to see how executable it is.

I know I shouldn’t be working on this, but I am. Before, the bookmarklet submitted but wouldn’t tell the user that it was successful. Finally sat down with a friend and we figured out why, and now we have output! Just gotta figure out why tags suddenly broke now.

After that, its just UI modifications before the first bookmarklet release!

Trying to see how fast I can make a barebones RESTful API. Going well so far. I can already easily get a lot more data than my XML generator API, but for visually mobile I now have to decode JSON. Anyway, I need to get it exporting some more data before it gets really useful.

I am currently in a class called Special Topics in Interactive Art & Computational Design, taught by Golan Levin. For my final project, I decided to explore rich interaction methods for visual-heavy sites like visually on mobile devices.

My original idea for the project was to make a desktop version to begin playing with visualization and interaction with heavily visual data outside of a web browser (because we all know how restricting those things are).

I did a lot of sketching trying to figure out UI paradigms and ways that I could interface with hundreds, or thousands of images at once. It wasn’t going well, and I decided that I’m more interested in each image individually than the fact that this is a conglomeration of images. However, I didn’t want to make it difficult for the user to find specific images that exist in the global site or their personal repositories. To kind of remedy this problem, I came up with a treemap UI that is additive, so you can search for one tag, say “typography”, and see what comes up, but then you can add in another tag, say “posters”, to further limit your result set. This makes it easy to do things like limit by user, popularity, or color as well. When you have a result set, you can browse it visually to find exactly what you’re looking for.

After a little bit of thinking, I came to the realization that this was a waste of time, since it would just be studies for the eventual mobile app. So why not just make the mobile app from the get-go?

So that’s what I did.

I had messed with openFrameworks a little bit the week before this project really got going because I knew I was new to it and that if I didn’t have a head start there would be no way I could get this done. This proved extremely useful. I also made a rudimentary API and tested the connection between visually and Processing ahead of time too, so a lot of the classes and things that I had to make weren’t hard to port to oF. For the checkpoint, I grabbed color data from visually and made a proof-of-concept to let myself know I could get this thing to work. The above image was what I had for the presentation, but it isn’t an accurate representation of the actual colors by any means.

The image on the left is a much more accurate representation of the color space of each image. However, as you can see, things aren’t lining up properly and there’s a lot of negative space within each bar, so this is something I’ll have to work to perfect over the weekend.

The heart and soul of visually is images, so I tried outputting those too. There was a weird bug trying to output both colors and images at the same time which I have to take care of. As you can see from the image in the middle, there seems to be some colorspace mixup when it comes to solely displaying out images, likely having to do with the hack-up class I’m using, so that’ll have to be fixed first. The class I was using seems to have been inverting the colors on the image it output. In the rightmost image, you can see its now displaying properly.

This weekend I think my goal is to make an interactive tree map. The transitions from screen to screen and the searching won’t be necessary until all the key components work individually, but since the map is kind of the main UI paradigm, getting that done will be key. Also, right now my API is really rudimentary, and while I have a RESTful API in the works, there’s no way it’ll be done in time to use for this project, so I’m wondering if there’s some more efficient way of storing data (SQLite?), because I can see reading and searching XML files and arrays becoming a problem in the near future for memory management (and my sanity).

Really minor things done in the past day, but they count for a fair bit. I’m also going to learn Javascript so I can make a bookmarklet. It’s not going to be easy, but whatever.

This is what got done today:

• Previously, you could only upload JPG/JPEG files because that was all the cropping system supported. GIF and PNG should work now.
• Viewing profiles were ported to the new design. Currently, it only supports seeing the images that that user has submitted, not images that the user has favorited. That’ll come soon.
• Fixed a bug that made the user appear to be logged in when they weren’t.
• Added the code that prevents non-logged in users from accessing the edit profile page and the share page.

visually is once again back to full capacity. Every page on the site works. You can register and edit profiles again, which is great.

I wonder how long until I break something again.

Anyway, with Registration and Edit Profile both up and running in the new layout (though the latter still doesn’t support updating options), that leaves very few pages to be migrated, one being the user profile page, which will probably be the next page I tackle.

I’d also love to start working on a bookmarklet, which I’m seeing as one of the last things I need to do before I can really let other people use the site. It’s something I feel would really enhance the user experience and submitting to the point where it’s a pleasure to use, and can easily assimilate into the user’s browsing habits. That being said, I have no idea how to start it.

Anyway, since I enjoyed writing the last one, I anticipate the next post will be about process again.

Howdy to all you virtual cowboys. It’s been a while.

So what happened? I took a bit of a break from updating. After I finished that project about a month ago, I started working on the design side of visually a little bit more. I played with logos, wordmarks, graphics, and lots of different things to get a feel for where the project was going; not exactly dictating how it should be, but trying to discover how the application wanted to be portrayed. It’s a weird way to think of it, but I felt like it had a life of its own, and I wanted to see how this different way of thinking would turn out. This is what happened:

These are just type studies, playing with the word “visually” with different type treatments, all fairly experimental (and bad). Ultimately I went with Helvetica Neue LT Std 65 (Bold). By taking the transparency of Helvetica and complementing it with the attention demanded by a bold typeface, it kind of makes for a type treatment that’s “there when you need it.” What I mean by this is, (hopefully) it will disappear when you’re looking for images, but if you need the application to do something for you, the type will lead the way. Combined with visually’s casual voice, I’m aiming to take away ambiguity and make the user feel comfortable with the application.

On top of playing a bit with typography (something I want to do more of), I played with marks. A great designer (Spiekermann?) once said that a logo should only have a square, a circle, and a triangle. Or something like that. Pretty much, geometric shapes are the key, and everything else is visual clutter. That’s kind of the philosophy I had when developing the mark for this, alongside my idea of letting the application “speak” for itself. I didn’t want it to be complex, and I didn’t want it to say anything it didn’t need to.

It’s pretty obvious which one won. Even though I developed the winner pretty early on, I decided to still explore more possibilities, but the circle-containing-circle really spoke to me, so soon you’ll probably see that popping up around everywhere.

After that, I started experimenting with ways to display images quickly and effectively to give the user what they want as quickly as possible, with minimal visual clutter and clicking. The idea was to take a usability platform and make it easy to access the information you want, and only the information you want. I sketched and did mockups, which you can see below.

The only problem was, after the mockups were done and I sat on them for a while, making minor tweaks, I found that an already-popular image bookmarking site, dropular, was doing the same thing, down to the design. I visit dropular regularly, so it might have been subconscious, but it felt crappy that someone else had already developed my design. It was unfortunate, and I was discouraged for a week or so, but eventually I decided that it was probably a good thing, and an indicator that I was on the right track. While visually does still use the same design, if I can make it different enough from dropular, that’s fine. If I have to redesign it again, that’s fine too. I figure I can take however long I need to make a design that communicates its voice perfectly.

Anyway, since then, I’ve (obviously) built the newer layout and ported most things into it. All the forms aren’t working though, which is what I’ve been working on lately. The sharing method is completely revamped, and next up is Registration and then Profiles so that people can register and edit their information. Search has been implemented (for tags only) and is functional, but isn’t in its final stage yet.

So while a lot of work has been done, there’s still a lot to do. A lot of what I’ve been doing is under-the-hood improvements dealing with efficiency and robustness. Hopefully, by the end it’ll as easy for me to manipulate the program as it is for the user to use it. That’s my goal for now.