Design Inspiration for OpenSourceDesign.is

[GarthDB]

I've been trying to think how we could do a collaborative mood board process, I haven't come up with a good solution so I thought we could just collect inspirational pieces here.

[xavibenjamin]

This'll be interesting. I've only done a mood board once. The rest is in my head, which isn't really helpful for anyone else.

[GarthDB]

Mood board is a loose term. I think we should just talk about what type of design we're looking at and post screenshots.

[bradfrost]

Is this in general, or for the design of the site http://opensourcedesign.is/ ?

We could use a style prototype http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype to generate in-browser style tiles to establish colors, type explorations, textures, etc.

[GarthDB]

@bradfrost This is specific to http://opensourcedesign.is/

I like the idea of a http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype

I was thinking we could gather some ideas, have some discussion on design inspiration, and then consolidate down to something like that.

[GarthDB]

Here's some of my thoughts so far, feel free to jump in.

The design should:

• focus on the content
  • links (resources)
  • articles
  • videos
  • showcases
• be fairly neutral
• not be boring (I guess the word delightful fits here, but I'm getting sick of it a bit)
• invite others to participate
  • the community can post any of the content mentioned above
• be an ongoing process
• be defined by a clear and flexible style guide (or style prototype)
• be responsive (I feel like I shouldn't have to say this)

[GarthDB]

Bureau

I love the personality and the split layout in the large screen.

[GarthDB]

We could do crowd source illustrations for headers on the articles. Not sure on the organization, but I like the idea of having an open call for design/art of some sort and not just copy.

[GarthDB]

Looking through my inspirational screenshots I realize I have a thing (I should get it checked out) for sites with large photography, but I really don't think it works for this case.

[GarthDB]

link Too extreme maybe.

[GarthDB]

This site's been updated since this screenshot.

I like the way it highlights the latest post, and it's use of space for the other post links.

[caycefischer]

I think the subject matter would lend itself very well to an http://ia.net/ approach. Very sparse and rich in details, typography, etcetera. I agree that large photography isn't the right way to go.

[GarthDB]

@zakkain :+1:

[xavibenjamin]

I personally love the look of Bureau. I'm a sucker for large type, lots of white space, and yes, large imagery.

[GarthDB]

@ttimsmith yeah. What do you think about the idea of having an open ongoing call for designs/artwork to use as header images for posts?

[xavibenjamin]

I love that idea! We could do art direction for longer posts like Jason Santa Maria.

[GarthDB]

@ttimsmith that would be neat. Would we halt the process of publishing the article until we get a submission? Or go out with the default theme until we get something?

[xavibenjamin]

Maybe we could put a call out there a few days before we publish, and if nothing comes in, we publish anyway. We can have fun with the art direction even without an illustration

[mrondina]

I really love the idea of customizing the design of posts to fit the content. On Sep 24, 2013 1:25 PM, "Tim Smith" notifications@github.com wrote:

I love that idea! We could do art direction for longer posts like Jason Santa Maria http://jasonsantamaria.com/articles/chocolate-is-for-girls.

— Reply to this email directly or view it on GitHubhttps://github.com/opensourcedesignis/opensourcedesignis.github.io/issues/14#issuecomment-25024802 .

[TheBlueDog]

Joining in on the discussion. Any thoughts on what the content structure would be? Will it all be articles/blog posts of some sort?

[GarthDB]

@TheBlueDog great question, but maybe a little separate from design inspiration (but definitely related). I started a new issue to discuss it a bit more. https://github.com/opensourcedesignis/opensourcedesignis.github.io/issues/18

[mrondina]

I was digging around in sites that I've always enjoyed or liked some aspects of. While I like the minimal approach, I love to intersperse some bright color into the design. Hightail has a nice clean look to the articles with small amounts of accent color that play well. I like have multiple columns, but plenty of space for the content.

Snowbird has done a great job in the redesign, especially on the twitter and facebook updates, which can start to look gross, but they kept it type focused.

North Temple's site is a bit old, but I still like their archives page. I've always like their branding of a strong sans-serif font with the design of strong color and texture distorting it. It may seem dated now, but I still like it alot.

[GarthDB]

Thanks @mrondina.

I really like the High Tail example.

[xavibenjamin]

Same here. Love the High Tail one.

[GarthDB]

It's a little detail, but I love the yellow highlight links. They feel so nice.

[olsonjj]

Here's my 2 cents. Its a site on open source design, so how about letting people submit their designs, maybe just CSS? Like CSS Zen Garden. And then allow people to switch between the various design, and even fork the CSS to create tweaks of their own. Kinda like http://wonderfl.net/ but for CSS on this site. Share designs w/ others, allow them to fork, tweak, etc. See what it morphs into.

[GarthDB]

@olsonjj there are so many great benefits to css zen garden's base idea.

It would be fun to get that to work with jekyll.

[GarthDB]

Personal Blog by Jeremy Sallée

Nice fixed with, large image, article header.

---

Blog by Pierre Georges

I like the toolbar draw looking thing, I wonder how all the scrolling content would work out.

---

Blog by Andrey S. Rodrigues

I think this is my favorite of this trio. A bit of the combination of my favorite elements of the other two - large image, sidebar, etc.

[GarthDB]

This site will have multiple authors, here and I found an interesting showcase of just "About the author" blocks.

http://interactiveblend.com/blog/online/about-the-author/

[mrondina]

I really like the large image header with nice typography and single column for main content.

I really like the like of Francisco Inchauste's blog - http://www.getfinch.com/ The about page has a nice grid layout as well.

[GarthDB]

@mrondina nice.

[xavibenjamin]

I love Francisco's article styling. In fact, I was going to implement something similar to that for The Bold Report. However, the only problem with things like this is, I feel the often get in the way of publishing. Creating good looking graphics or finding images is time consuming. But, take my words with a grain of salt, I'm of the belief there is nothing more beautiful than well designed words.

[GarthDB]

@ttimsmith I agree. I feel like we should make something flexible that would let us add an image if one is readily available, or if the community wants to contribute something after the fact, but the design shouldn't be dependent on it.

[GarthDB]

Don't let finding the right image get in the way of publishing content.

[xavibenjamin]

I think working on a display model would be really good. I'd love to start working on some wireframes. The display model would have stuff like:

Article

• Title
• Date
• Byline
• Content (paragraphs, blockquotes, ul's, ol's, footnotes)
• Author info at the bottom
• Comments

[GarthDB]

@ttimsmith yeah - looks great.

[GarthDB]

Somewhat obvious article. http://www.webdesignerdepot.com/2013/10/how-to-design-blogs/ yet still germane.

[mrondina]

I've been working on some style tiles for the site. I'd like to load them up for everyone to check out, rework, whatever. Should I use my layervault?

[GarthDB]

@mrondina you could - or use anything that works for you, just try to post the source. (public dropbox, creative cloud, dribbble - if you have pro account, etc).

[GarthDB]

@mrondina I just invited you to the layervault project if you want to add it there.

[mrondina]

This may seem remedial, but I don't see a way to add files to the layervault project. Am I missing something?

[GarthDB]

@mrondina install the desktop app and add the files to your local folder.

[GarthDB]

it syncs like dropbox.

[mrondina]

Wow. I don't think I've used it since the beta a long time ago :)

[mrondina]

I thought I'd post it here as well as a snapshot of the styles. You can get the source file over on layervault

[GarthDB]

yeah - posting here totally works - thanks for starting this.

[mrondina]

It's my pleasure! I have a bit of a hard time with minimal design because I always feel like my designs lack the polish I can get with other styles.

[GarthDB]

I've been hit by a bit of a bolt of inspiration.

I think the home page should be modeled after a table of contents - since that's pretty much what it is. We could number the articles - instead of having page numbers. I've been through some examples of book table of contents.

Good collection here.

[GarthDB]

And another.

[GarthDB]

One with leaders

[lustandfury]

I can really see that red Sonic layout working really well in a responsive grid. I like the clarity.