Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Design Inspiration for OpenSourceDesign.is #14

Open
GarthDB opened this Issue · 61 comments

9 participants

@GarthDB
Owner

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.

@ttimsmith
Owner

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
Owner

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
Collaborator

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
Owner

@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
Owner

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
Owner

Bureau

bureau

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

@GarthDB
Owner

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
Owner

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
Owner

thought and theory

link
Too extreme maybe.

@GarthDB
Owner

astheria

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.

@zakkain

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.

screen shot 2013-09-24 at 12 27 56 pm

@ttimsmith
Owner

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

@GarthDB
Owner

@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?

@ttimsmith
Owner

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

@GarthDB
Owner

@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?

@ttimsmith
Owner

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
Owner
@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
Owner

@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. #18

@mrondina
Owner

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.
inspire-1_hightail

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.
inspire-2_snowbird

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.
inspire-3_north

@GarthDB
Owner

Thanks @mrondina.

I really like the High Tail example.

@ttimsmith
Owner

Same here. Love the High Tail one.

@GarthDB
Owner

It's a little detail, but I love the yellow highlight links. They feel so nice.
screen shot 2013-09-25 at 12 45 55 pm

@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
Owner

@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 GarthDB referenced this issue
Closed

To-Do List #3

@GarthDB
Owner

Personal Blog by Jeremy Sallée

Personal Blog by Jeremy Sallée

Nice fixed with, large image, article header.


Blog by Pierre Georges

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

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
Owner

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
Owner

I really like the large image header with nice typography and single column for main content.
screen shot 2013-10-02 at 12 21 13 pm

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
Owner

@mrondina nice.

@ttimsmith
Owner

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
Owner

@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
Owner

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

@ttimsmith
Owner

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
Owner

@ttimsmith yeah - looks great.

@GarthDB
Owner

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

@mrondina
Owner

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
Owner

@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
Owner

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

@mrondina
Owner

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

@GarthDB
Owner

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

@GarthDB
Owner

it syncs like dropbox.

@mrondina
Owner

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

@mrondina
Owner

osd_style_tile_1

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
Owner

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

@mrondina
Owner

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
Owner

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.

example

sonic

orbit

timeline

@GarthDB
Owner

And another.

sb bank

@GarthDB
Owner

One with leaders

leaders

@lustandfury

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

@GarthDB
Owner

Table of contents

@GarthDB
Owner

Large letter toc

@GarthDB
Owner

another toc

crows

elephant

convergence contents

gutter 03

@mrondina
Owner
@terracomma
Owner

What if we attempted to restrict ourselves only to open source design assets. Using only faces from the League of Movable Type and others like it, and using iconography from FontAwesome or the Noun Project?

@terracomma
Owner

A related article on building a style guide by Anna Debenham, posted on 24Ways in 2011

http://24ways.org/2011/front-end-style-guides/

@GarthDB
Owner

@terracomma so far we are. We are using Adobe's open source typeface - Source Sans Pro, and cc0 images from Flickr's commons and such.

@GarthDB
Owner

The important thing is using correctly licensed assets, wherever they come from. It's up to the contributors accepting the pull request to verify.

@GarthDB
Owner

As far as style guides go: contributors can use any tool they think is best for the design process. I hesitate to prescribe any one workflow as it can increase the barrier to entry.

@terracomma
Owner

I'm not proposing anything so restrictive that it would dictate the tools or process of the design. I'm just thinking of this in terms of tag-level styling for the top level pages. Nothing that would affect custom designs for posts.

@GarthDB
Owner

@terracomma great idea. Opened a new issue for the discussion.

#76

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.