Admin Area

This is Admin Login

<%= current_page.data.title || "The Middleman" %>

25 | <%= partial "header" %> 26 | <%= yield %> 27 | <%= partial "footer" %> 28 |

6 | :markdown 7 |

12 | 13 | Hello there. I’m a designer living in San Francisco. I design iOS apps during the day, and learn to make nice websites during the night. This blog is the very first result. 14 | 15 | I love writing and designing with content. I’m also into photography. While I could no longer afford polaroids, I take my [Voigtländer Bessa](http://en.wikipedia.org/wiki/35mm_Bessa#The_Bessa_R2A_and_R3A_.28auto-exposure_rangefinder.29) with me whenever I travel. 16 | 17 | At the moment I work at a design agency making financial apps. Previously I worked at [Crush + Lovely](http://crushlovely.com/), [Miso TV](http://gomiso.com/), [Apple Inc.](http://apple.com) and [AppMesh](http://appme.sh). I’m helping [Jina](http://jina.me) on her [Art In My Coffee](https://dribbble.com/shots/1650280-Refactor-in-My-Coffee?list=users&offset=2), and getting into Haml and Sass. 18 | 19 | You can find me on [Twitter](http://twitter.com/cmzhang), [VSCO Grid](http://hellocate.vsco.co/grid/1), and [Dribbble](https://dribbble.com/hellocate). You could email me at post@hellocate.me. 20 |

6 | :markdown 7 | # A thought on Static Mockups 8 | The other day as I was going through my old computer, I found one of the many mockups I did for a project. More than three years has passed, the design still holds up well. I stared at the nice typography for a minute and thought, how come I didn’t ship it? 9 | 10 |

13 | One of the many concepts I had for Curate.it, my thesis project for school. Photo credit to from top down: Mark Peckmezian, Silas Dominey, Glen Erler, and Walker Evans 14 |

16 | 17 | I looked through folders of discarded static mockups. I was too busy worrying about my work not being good enough. Remember the [Imposter Syndrome article](https://medium.com/@aliciatweet/overcoming-impostor-syndrome-bdae04e46ec5) you read some time ago? Exactly that, or very similar. 18 | 19 | I kept on starting from scratch over and over again. Each time I couldn’t make up my mind. I was afraid to make the wrong decison. “You think too much”, as my hair dresser always told me in our therapy a.k.a hair cutting session. I wanted everything to be perfect the first time around. 20 | 21 | Start small. Do it right away when you think of an idea, when you are still excited about it. Don’t take too long. First time you make something, there will be flaws. Prioritize. Iterate. Be disciplined. Get yourself into a momentum. 22 | 23 | More importantly, have fun with whatever you do. Eventually you will ship the project you are proud of. 24 | 25 |

28 | :markdown 29 | # Curate.it 30 | 31 | I made Curate.it between late 2011 to early 2012. It was one of my school projects. The concept was simple — an iPad photography magazine where people can easily browse and bookmark the content they like. 32 | 33 | Photographers would sign up and submit their projects. A curator would determine which ones to publish. Both the photographer and the curator would use the website to achieve those goals. 34 | 35 | ## The iPad App 36 | 37 | For the iPad app, I selected content from photographers I know of and other resources, designed the interaction, UI and the visual style. 38 | 39 |

Sign up or login, you get to explore projects, to be able to follow photographers and favorite content.

43 | 44 |

Layout of the featured project titled Virtuoso of Visual Creation. The overview screen (right) shows all pages contained in this project, as thumbnail view. Left screen shows a full page view.

48 | 49 |

Actions you can take with each photograph: to favorite, share to friends, follow the photographer, and check out the photographer’s other avaialble projects.

53 | 54 |

The list of photographers you follow. Everytime a new project is published from someone you follow, you get a notification. Account settings on the right screen: you can set your own home page, updated your profile and change password etc.

58 | 59 |

60 | 61 |

62 | Here is a video demo. The later half on project submission wasn't well thought out. So I expanded it into a website, shown below. Video credit goes to Oscar Beckmann. 63 |

64 | 65 | 66 | ## The Website 67 | 68 | If you have watched the video above, you would notice the part that allow photographers to submit their work was poorly executed. The submitting a project is too troublesome to do on an iPad. Wouldn’t you prefer to do it on your desktop? That way you can take your time to fill out the forms and compile the images. 69 | 70 | So I took the submission process out of the iPad app and expanded into a companign website. I also added the UI to allow curator to choose and publish. Previously, I was thinking just to have all submission emailed to the curator. 71 | 72 |

75 | On the homepage, featured app screen has an updated UI. Previously my thought was the curator can publish any submission at any time. For this update, I introduced the concept of being a quaterly magazine. Therefore you see the navigation "Summer Issue" and "Fall Issue". The user no longer needs to sign up for an account to view the content. The homepage is where photographer or curator log in. 76 |

78 | 79 |

Photographer’s submission form. The photographer can choose a predefined category for her work, and add tags. It helps the curator to navigate through a large quantity of submissions.

83 | 84 |

Photographer previews layout. The website only support one layout to begin with. The same layout would be what you see on the iPad app. Edit caption in place is supported. You can aslo adjust the photograph within it’s frame.

88 | 89 |

Drafts section for the photographer. You could view your submmited projects here but you would’t be able to edit it.

93 | 94 |

Curator's view on all submissions. This is a mailbox for him. Catogories, tags defined from photographers help him to find projects, though the curator has the ability to override them.

98 | 99 |

Curator’s view showing the publishing deadline. In this case he already selected the required twelve projects to publish for the Fall issue.

103 | 104 |

A contrast view when the curator hasn’t selected any project for the upcoming magazine issue. Click on any placeholder would take him to the inbox.

108 | 109 | You can [view the entire InVision prototype](http://invis.io/NPORJVDV). I also documented the walkthrough and wireframes. [Download the pdf](https://www.dropbox.com/s/qv7eft3viq53h1n/book.pdf?dl=0). 110 | 111 | All I knew at the beginning was I wanted to work on a photography project. I attempted three ideas. This process helped me to get to the final execution. 112 | 113 |

114 | 115 | ## Process: The Three Ideas 116 | 117 | ### Photo essay sharing 118 | 119 | My very first attempt. Like Flickr, but user shares essays or stories instead of individual photographs. Popular content and authors get featured onto the homepage. I had the navigation so cluttered. 120 | 121 |

Each project has a time stamp when the photos were taken, with the location as well. I wanted to encourage photographer to write educational content.

125 | 126 |

You can browse by authors. The site will aggregates popular and new members.

130 | 131 |

The detail view. You can comment and find related articles. Possible actions you could take is display in a menu on the right: you could so things like add this article to your library, share to other social platform, check out the author and jump to comments.

135 | 136 |

The dashboard view for registered users. You get updates on new article and activities associated to your articles. There is shortcut for submitting new work and recent library items you added.

140 | 141 |

Public profile. The copy could be better, instead of "my", it could be "Bjørn's" since anyone would be able to see.

145 | 146 |

The history of my submission and their status.

150 | 151 | ### Pinterest for photography? kind of. 152 | 153 | This was when I began to experiment on the iPad. You could view projects generated from all users. You could save any text, photograph or entire project to a collection of yours, and share with anyone. 154 | 155 |

My profile screen with general inforamtion, my equipments and published work.

159 | 160 |

You swipe left or right to move the timeline for your bookmarked content. A long tap to launch the share menu.

164 | 165 |

Location based projects. It's up to the photographer to share her shooting location.

169 | 170 |

A detail view of a project. You can choose to only read text or browse photographs. The default view shows everything.

174 | 175 |

179 | 180 |

184 | 185 | I made an update on this concept, with inspiration from [Gimme Bar](https://gimmebar.com/). It allows users to save anything on the web into their own collections. I took the similar approach, reworked the terminology to "Exhibition", so any public exhibition the user decided to save, they can save into their own created exhibition and share with anyone. All content is user generated. 186 | 187 |

Catogory view is switched on: recent or popular exihibitions. Tap to disable them.

191 | 192 |

Detail view. Curating mode allows to add any content to your own exhibition.

196 | 197 |

Create your own gallery before you could save any content to it.

201 | 202 |

Pinch to collapse the entire project and save it to your gallery.

206 | 207 |

211 | 212 | ### The Magazine 213 | 214 | This is the visual exploration. I wasn’t worried about how to submit or publish projects. Dealing with a smaller scope sped up execution, even though it had a different look and feel compared to the final version. The idea is to showcase twelve projects based on user’s location. 215 | 216 |

220 | 221 |

225 | 226 |

230 | 231 |

235 | 236 |

240 | 241 |

245 | 246 |

Equipments information if available from the photographer

250 | 251 | This project spaned over three semesters. With each exploration I gained more clarity and direction. If anything, this is what I learned: 252 | 253 | + Keep scope small. Do one thing well, not ten thing average. 254 | + Focus on content. 255 | + Make it for web, tailor content for mobile devices later. 256 | + Show progress often. Ask for feedback. 257 | + Choose a subject you are passionate about. 258 | + As a student, this might be one of the few opportunities where you get total freedom and all of your day time on a project. 259 | + Have fun with it. 260 | 261 | ## Attribution 262 | 263 | Special thanks to the following photographers: [Tommy Oshima](https://www.flickr.com/photos/tommyoshima), [Isabella Bejarano](http://www.isabellabejarano.com/home), [Silas Dominey](http://silasdominey.tumblr.com), [Jaqueline Vanek](https://www.flickr.com/photos/jaquelinevanek). [Mark Peckmezian](http://www.markpeckmezian.com/) and [Federica Erra](https://www.flickr.com/photos/federico_erra). If you prefer not to be featured here, please contact me @cmzhang. All work used in this project was for academic purposes. 264 | 265 | 266 | 267 |

List

This is Admin Login