← Back to Upcase

Startup DNA


(ed_wassermann) #1

Hi,

I’m working on a docu about startups in the valley and want to build a site for it. User should be able to stream individual interviews hosted on Youtube / Vimeo or download them as zip files. It’s goal is to educate people about programming and the startup echosystem all over the world.

Key users are between the prototypical 13 year old kid in the Ukraine who wants to know more about the mysterious people doing startups and building huge companies like Google and Fb as well as the insider who wants to get a deeper and more honest look on interesting founders and investors around the globe.

Use cases:
People subscribe to channels (Youtube,…) or come here to download videos before jumping on an airplane as well as newbies who want to learn more about starting startups and people involved in the echosystem.

The design principles I want to follow… hm. Not sure to be honest… I definitely want to make it simple and clean

Here is a link to the rough wireframe I did today for the landing page. http://cryptic-depths-1380.herokuapp.com/

The design that I have in mind looks different but the grid structure is pretty close to what I want at the moment The link has a jpg with a few ideas I played around with yesterday… http://tinypic.com/r/33mx1qa/5

@kylefiedler couldn’t upload images “as a visitor”, seems like a bug…? And I can only embed two links per post …

I’m really looking forward getting some feedback and building this project this month.

cheers, ed


(ed_wassermann) #2

Scetches 01: (only two links allowed per post ):

little scetches
http://tinypic.com/r/24pjebl/5

landing page
http://tinypic.com/r/s1kuqa/5


(ed_wassermann) #3

Scetches 02

videos page
http://tinypic.com/r/5nnrkw/5

people page
http://tinypic.com/r/bvkur/5

some variation that I tried


(ed_wassermann) #4

Scetches 03

profile page
http://tinypic.com/r/dopi6a/5


(ed_wassermann) #5

@kylefiedler

Hi Kyle,

What do you think of Lettering.JS for kerning on the web?
http://daverupert.com/2010/09/lettering-js/


(Kyle Fiedler) #6

The design principles I want to follow… hm. Not sure to be honest… I definitely want to make it simple and clean

Think of 3 adjectives that you want people do describe your site as. If it was a person how would you describe its personality? Clean and simple are kinda of a cop out :smile:

Sketches look great. Thanks for showing them. From the looks of it you are following a good process. I tend to do a little more smaller thumbnail small sketches to start (you might have and just not uploaded them)

re:lettering.js – I think you should only use it if you absolutely have to. Really you should be choosing a typeface that has a good kering table already in-place so you don’t have to mess with this that much.


(ed_wassermann) #7

Ok that makes sense … I would say friendly, smart and playful should describe the site I want to build best.

The modular scale resources you sent me were super helpful. Will try to find one or two typefaces that describe the personality of the site best and then build it from this atomic level up. Tim Browns perspective on the subject really blew me away :smile:

re: lettering.js
Yeah, makes sense to use it as a tool of last resort. I guess also for users without JS turned on, this strategy makes for a better UX. I’m glad it’s around though …

Thanks for the feedback!


(ed_wassermann) #8

Stumbled upon this video of Ryan Singer from 37 signals doing a presentation about iteratively creating designs. Pretty neat!


(Kyle Fiedler) #9

Awesome. I haven’t seen this before I’ll have to check it out.


(ed_wassermann) #10

Glad you like it. I’m so high on modular scale right now :smile:
That was an awesome tip, thanks!


(ed_wassermann) #11

@kylefiedler
I worked a lot on my typography this week.
What do you think? Friendly, smart, playful…?
Too playful maybe…?

Thanks!


(Kyle Fiedler) #12

Ed,
This is quite the change. Maybe because you started to add some real content in the design? I think though you have taken a step backwards with the layout.

  • The gradient that you have in the navigation is a little harsh.
  • What are you trying to accomplish with the circle compass?
  • I tend to avoid justified type on the web because it adjust the line by adding space to the space characters. This breaks up the flow of the text. Also most people on the web are used to seeing a rag on the left.
  • All of the type doesn’t have much contrast it makes it really hard to read through.
  • There isn’t much alignment with the type and because of the you don’t have the same flow that you had in your last design.
  • What were you hoping to achieve with the inset shadow on the headers?

My advice is to really pull back the color and focus more on the layout right now. I usually find it easer to ignore color until I have settled on a layout and type. There is a reason for the progression of the topics in the videos.


(ed_wassermann) #13

yeah, I was playing around with some ideas that I got through “Thinking with Type”. Also describing the personality of the site like friendly, smart and playful changed the previous idea for the site also.

Yeah, the alignment of the text is not as good as before. I was not happy with the text that I chose previously and I thought it would be nice to have two lists of companies and interviewees which are all hyperlinks to the videos themselves and make it easy to jump right into the content. Felt weird to put them in columns somehow.

The compass should express the ambition to create a project that helps startup newbies navigate through the complex startup ecosystem. When I got interested in startups, there was nothing out there that introduced relevant people and companies quick and easy to “outsiders”. I thought this is where I could make the site feel a little playful. The questions on the compass are important to get a context what this project is all about.

Tried to create more emphasis with the inset shadow on the header.

Alright, will focus on the layout and thanks for the feedback!


(ed_wassermann) #14

I am working on the next iteration after the feedback from the office hours. Just uploading this for documentation sake…


(ed_wassermann) #15

next iteration. getting closer hopefully :wink:


(ed_wassermann) #16

@kylefiedler
Remembered the question that I had :smile:

Because pair programming is a very important part of thoughtbot’s culture, I was wondering if designers are pairing together as well?

Oh, and is there like a wall fo fame of projects done in the workshop? Would like to see more projects from other participants in the past.


(ed_wassermann) #17

@kylefiedler

btw, can’t access the last video.
says it’s available on May 27th…


(ed_wassermann) #18

Feel good about this one…


(Kyle Fiedler) #19

@ed_wassermann we are still figuring out the best way for two designers to work together. We’ve found so far that there are points in the project that are conducive for pairing (planning, sketching / whiteboarding, writing HTML & CSS for a predetermined design) there are points though that we have found design to be more of a single person activity (visual design, some of the nitty gritty). On most of our projects here there is only one designer so its not that easily done.

I think that this is comparable to how our developers think about pairing. They don’t do it all the time only when faced with a harder problem.

No wall of fame for workshop projects but I really like the idea.

Do you now have access to the video?


(ed_wassermann) #20

@kylefiedler

That makes a lot of sense, very similar to how developers pair indeed, very cool! Really glad you are pushing the process that way. I especially like that you pair in the planning stages and on HTML,CSS.

If you want to work on the hall of fame, I’d love to contribute in any way…

Yup, got the video on Monday :smiley:

Thx!