Making of Designspiration.net

December 13th, 2010


Nearly ten months ago, I had an idea that was inspired by the design community, one that I became very passionate about. The idea was to create some sort of platform to share what inspires you. We’ve seen it done before, but what I have for you is something I hope and believe you’ll really enjoy.

Designspiration is the outcome of my efforts to realize my idea, evolving into a site occupied by a diverse range of inspiration curated by its users. Designspiration or DSPN for short, focuses on the core principles of sharing inspiration and utilizes some great features; like a search function that works like a Swiss army knife, which I will discuss more in the post. Little did I know when starting this project that I would be clocking in more than 1,000 hours over the past ten months.

If you’re eager to check out the site, you can hit Designspiration.net or Ds.pn. With that said, I’m really excited to share this project and process with you…


This post is broken up into these sections:

Defining the Goals
Design & Typography
Development
Features & Invitations
Conclusion

Defining the Goals

Since the dawn of the project, I was constantly asking myself, why create another inspiration website?

The answer was simple: I wanted needed to find a way to help fellow students find inspiration. Through talking with other students in the past year at the Art Institute of Seattle, I found that over half of the graphic design students hadn’t heard of image bookmarking sites like FFFFOUND, and had potentially visited Behance no more than a handful of times. Granted, those aren’t the only sites out there, but they are two of the highest regarded. Perhaps even more alarmingly, I noted on multiple occasions that students were stopping by Google images as an inspiration outlet—rather frightening isn’t it?

It was quite clear that what needed to be done was provide a solution to the problem, and a concept was forming in my mind. The question was how do I make it happen? Answering that question isn’t easy. I had to realize that in order to complete this extremely daunting task, I needed to ask myself if I truly believed that I could make it happen. I believed I could do it even though I had no knowledge of how to, but not once did I allow myself to say, “I can’t do this.” Instead I asked myself, how could I do it.

Through the planning phase, done during the first week, I realized two things: one, I knew very little programming (html/css) and two; my budget was…well there wasn’t one. I spent some time talking with developers about what I was trying to do, and was pointed to Ruby on Rails. The following week was hell so I moved away from Ruby on Rails and started using an easier solution, PHP and MYSQL.

Research & Usability Testing

Usability was by far the most important aspect of creating this site, and I spent a great deal of time ensuring it was always usable and intuitive. To gather data for the initial build, I reached out to a number of designers and photographers to ask them a series of questions. The questions pertained to why they use specific sites and what they would like to see improved or added. The results were actually surprising: the majority wanted something very simple, but it had to have search capabilities and a range of high quality inspiration (without the junk). I completely immersed myself in using a lot of sites to understand how and why they are successful. Believe it or not, FFFFOUND is ugly for a reason, and has a unique system of relating images.

After 6 weeks I had a beta build up for DSPN and began doing small task testing. Some of the tasks included the difficulty of searching, ease of navigation, uploading to the site and how users tagged. The hardest part about the testing was who to include and who to exclude in the tests. One of the larger groups incorporated were those who answered yes to experiencing creative block. This group is more likely to use DSPN.

Design & Typography

The designing of the site was the second most difficult part to accomplish. Based on the research and desires of the people who will be using the site, they called for simplicity—I agreed. The design was to be ultimately dictated by the content, and it needed to be subtle, freeing each of the images from distraction as much as possible. I also believe this form of minimalism in the design added to a feeling of sophistication to the site in general.




As with every project I do I start on paper regardless if its web or print. This project quickly transitioned into wireframes however. You can see from the rough sketch to wireframe, how the structure for the live search started developing.

Hand-in-hand with the layout was choosing the right typeface, especially when the site’s audience was planned to be so broad. It had to work well at small sizes and be a default on most machines. Initially, I had explored using gothic faces and serif faces such as Didot and reformed Baskerville for the logo, but most brought too much outside influence into the site’s neutral-leaning aesthetic. Designspiration needed a typeface that said, “I am unique, but I can sit back and watch the show”. Linotype’s version of Helvetica Neue did that.



As with any large project, the smaller areas of design were initially overlooked. Those areas were the login form and each call-to-action above input forms site-wide. Being that tagging forms such a large part of the site, I wanted to calmly let people know that its really not that big of a hassle, and it will actually help you find what you’re looking for faster.

Development

Seventy-five percent of the time spent on this project was invested in the development. Coming into the project, I lacked almost all knowledge of any of the programming languages that I would be using. This may be surprising, but despite my knocking of Google images earlier in this post, the majority of my knowledge in JavaScript, JQuery, PHP and Mysql was found and learned via Google. Halfway through the project, a light bulb turned on in my head and I realized something that all accomplished developers have had to recognize at some point—that the majority of the coding was about thinking logically.

The nice thing about building a site from scratch is that it negates a lot of the unnecessary fluff that frameworks come with and it loads very quickly. Certainly the whole site would have been much easier to build if it were on a framework. Some of DSPN’s biggest original features such as the LiveType search function were built completely from scratch and took a lot of strategy to implement properly. I needed to figure out things like how I could allow the user to have as much control as possible when searching and still be able to use commands such as cut and copy, pasting and typing in other input fields. The only caveat to using JavaScript for all of this is that it may or may not work in Internet Explorer so you should make sure you’re in one of these browsers: Firefox, Safari or Chrome.


The search by color feature was actually easier to create than the tag search. Essentially getting each color from an image is the same as when in Photoshop and using the color picker. Just imagine zooming to 3200% and sampling an average of 2,000 pixels in .002 seconds and you’re hired.

All of those colors get stored and used in calculating what colors in the image. The visual part of this is where things begin to get tricky because our eyes lie. When we look at an image we see colors that have a higher luminance and calculating this is not easy. You may see in the search results that some images seem off and this happens when there is a lot of negative space occupied by whites or lighter colors. As the database grows, these results will slowly get filtered and put into groups with similar color palettes.

Features & Invitations

• LiveType search: To search for any image just begin typing. It’s a much faster solution than having to click in a box every time.

• Color Search: If you’re looking for images with certain colors, click the color search icon and you can select up to 5 colors from a 120-color palette.

• Keyboard Navigation: The Up and Down arrows scroll between posts and the Left and Right arrows take you to the next and previous page.

Hopefully by now, you’re asking, how do I get invited to the site?

Currently, membership is driven by those whom already been invited. Those members have the control over who gets invited; its a way to maintain the user base and the quality of uploads. By doing it this way it allows for me to keep up with the site, but don’t worry just yet because the site has to start somewhere:

Request an invitation by visiting http://ds.pn/register.

Conclusion

Spending the last 10 months working on this project has taxed, pushed, challenged, and ultimately, improved my skills as both a designer and a developer. Now that the project is live and in your hands, I’d like to ask that if you see my idea’s potential as a reliable source of well-curated inspiration, would you tell one friend about it by Tweeting or posting to Facebook.

As usual with projects as large as this, there will be updates and additions. Those will come and as I mentioned before, this site is all about you and your inspiration. Your suggestions and ideas to help make the site better are all valid and I would love to hear them.

Follow Designspiration on Twitter & Facebook.

Check it out, Designspiration.net!

Posted by on 12/13/10 in Designspiration, Portfolio, Process, Showcased Work

30 COMMENTS   »  Leave your Comment

  1. Opie says:

    Nice concept, this website will be a daily visit for me.
    ps. the keyboard command for bookmarking doesn’t work on that site;)

  2. Damion says:

    Looking forward to the Live broadcast today. I also did a little write up on my blog if your interested in checking it out. Definitely had to share this site. Great concept and design. http://damionscsav.blogspot.com/2010/12/inspiration-of-designspiration.html

  3. [...] a little background and to put everything into perspective, Shelby has written up a very detailed blog post about the site, the design, and his entire process of building this inspiration platform from the [...]

  4. Greg Ponchak says:

    Incredible job on the site! I’m already loving it. The color search feature is a marvel to me; was this done in PHP?

  5. Wojtek says:

    awesome idea and execution. can i have an invite please?

  6. Shelby White says:

    @Greg, yep the site was built in PHP.

    @Opie, the keyboard commands should work now—let me know if you’re still having trouble.

    @wojtek, drop an email to register AT designspiration.net with your portfolio and I’ll take a look.

  7. thehalvo says:

    amazing work Shelby. I’m stoked to see the site progress forward.

  8. Jesse says:

    Great idea and work! I am very excited to see where this can go. So new and already becoming an invaluable tool. Thanks!

  9. Geert Brouwer says:

    You should checkout the inspiration stream by Veerle Pieters. It is one of the best inspiration galleries out there that continues to have a high quality stream of updates.

  10. Shawn says:

    Fantastic work here!

    I think it would be extremely wise to integrate the jQuery “Infinite Scroll” script to create a more fluid use experience.

    Here is a link… http://desandro.com/demo/masonry/docs/infinite-scroll.html

    Best of luck and Congrats!

    Shawn

  11. Luca says:

    Great work here, love it!

  12. Bob says:

    It’s great to read about your process. I redesign my blog about every six months or so. That’s pretty much the reason for the blog. The design I’m working on is slightly inspired by your work on Designspiration. Be encouraged that you’ve got a great site.

  13. [...] now meet Designspiration.net by wanken. It doesn’t have ffffound’s random weird images but it does have a huge advantage in [...]

  14. [...] WANKEN – The Blog of Shelby White » Making of Designspiration.net [...]

  15. Great outcome from the project. The site serve as an incredible example for professional galleries!

  16. Lisa says:

    Designspiration is my Firefox home page—I love it! I had no idea it was so new. Great work & thanks!

  17. Shelby White says:

    @Lisa thank you! That is awesome it’s your homepage!

  18. [...] from the majority of all websites—keyboard navigation. After spending over a year working on a project and forging an experience that fully utilizes the keyboard, I started to seriously question why it [...]

  19. Alexander says:

    Thanks for this inspiring post Shelby! I’m in the process of developing a long-conceived community project myself and decided to document it from start to finish. Should you be interested, please see: http://www.oldenburgs.org/

    Thanks again!

  20. Alexander says:

    Oh, and see this (first) post for an outline of what the project is all about: http://www.oldenburgs.org/post/8350893694/oldenburgs-finally-making-this-happen

  21. [...] The making of Designspiration Behind the design of Designspiration. A basic idea turned into an awesome site. (via Brandon Rike/twitter) Share this:EmailFacebookTwitterStumbleUponLike this:LikeBe the first to like this post. [...]

  22. Matt says:

    Love Designspiration, probably my top most daily visited website.

  23. Eryn @ 3-60 says:

    Thanks for posting the background behind the site. Cool to see your thought/work process.

  24. Loan Myers says:

    Wow! I never new what humble beginnings Designspiration had. Very inspiring insight into your process – something that I can take away and use.

    Thank you muchly!

  25. Hey Shelby,

    Your contact form wont allow me to send. You can delete this post after you received it and respond directly to my email.

    Love the post on Designspiration (http://blog.wanken.com/7202/designspiration/). Been going there for a while now. But i actually arrived here when researching yours and http://wearehunted.com/ search functionality. I think this is top of the line UX design and would really love to learn more about how to apply these search capabilities. I noticed you used Livetype and it is built in PHP, but I am a Designer and a front end tinkerer and would not know exactly how to hand code it. Since 2010 have you ever packaged your search capabilities or made a how to? I can understand if you dont want to give up your secrets but I would appreciate if you could help point me into the right direction.

    Thanks. Love the work and hope to hear from you.
    Justin

  26. I love your site and I am doing a post on the LAB. You have provided a very valuable resource for design lovers everywhere. Thanks!

  27. [...] Shelby’s blog, he explains the process behind this unique website. I have to say this: if you are in the process [...]

  28. Shelby White says:

    @Brett, thanks so much!

  29. Jorge says:

    Great Job !!!! Amazing and very useful

  30. [...] Shelby’s blog, he explains the process behind this unique website. I have to say this: if you are in the process [...]


Leave a Response