make homepage more like a product/campaign #85
Comments
|
I like it. Tell a story. Emphasize community, co-creation and creativity. It would be good to work out the objectives for the homepage: what is it for, who is the audience, what do you want the homepage to achieve and then the homepage can be designed around that. Here's a good example about telling a story: http://petesmart.co.uk/rethink-the-airline-boarding-pass/ Thoughts? |
|
Just an idea I started playing with. |
|
If we were to do a page like this we need to start thinking through sections for the main page. It should focus on the main goals, encourage designers to:
|
|
Hmm, maybe we need to reorganize those by order of importance, and ease of contribution for designers:
|
|
Another iteration. I think I like where this is going. |
|
Do you have the source for this design online anywhere? |
|
@areus I do on layervault, but we might have exceeded our size limit. Let me check and I'll put it in a public dropbox if that's the case. |
|
Maybe we can make a shared folder? My dropbox email is [email protected] |
|
Shared. If anyone else fancies downloading it: The illustrator file |
|
@areus I think it should be easy to incorporate some nice transitions (nothing too heavy) and fixed background images in sections that make sense. Also, I'd love to look at using snap.svg or something like it to animate the images/graphics as long as it makes sense. |
|
Fully agree. We'll tweak those kinds of interactions so they're nice and subtle. I used lazylinepainer on a project before, but it looks like we will have greater output using snap.svg. |
|
I've also been looking for an excuse to use it. |
|
I've been wanting an excuse to play with snap ;)— On Tue, Feb 4, 2014 at 10:28 PM, Areus Wade [email protected]
|
|
The source of the image (no known copyright) http://www.flickr.com/photos/twm_news/9717154582/ |
|
From flickr: (Copyright) These images are Crown Copyright. We're happy for you to share these digital images within the spirit of The Commons. Please cite 'Tyne & Wear Archives & Museums' when reusing. Certain restrictions on high quality reproductions and commercial use of the original physical version apply though; if you're unsure please email [email protected] FYI |
|
@dncnmckn weird. I'll contact them, but on http://www.flickr.com/photos/twm_news/9717154582/sizes/l/ it says no known copyright restrictions. |
|
That is weird. Silly Flickr. Crown Copyright is odd, means it's government or Royalty controlled and can have unusual licensing issues: https://en.wikipedia.org/wiki/Crown_copyright#United_Kingdom |
|
Found on unsplash. http://unsplash.com/post/68620416424/download-by-galymzhan-abdugalimov |
|
Yeah, there are some other good ones if we have to. But I'll email them - you never know. |
|
Yeah, I really like the image you found. |
|
I went ahead and made a kuler of this color scheme (with an added dense gray because you need 5 for kuler) https://kuler.adobe.com/OSD-Home-Page-color-theme-3458755/ I'm diggin it. |
|
Sorry - I need to colophon this stuff. I totally used the colors from https://kuler.adobe.com/21-Flat-Business-Icons-color-theme-3375340/ |
|
Another slight variation. |
|
Variation on Garths design: Went for a more cleaner header but reused the photo as section headers, probably use more relevant images for sections. Made use of the contents list idea as navigation to sub sections listed below. [EDIT] tweaked turquoise graphic to remove haloing. |
|
Derek, I like where your head is at. The design does bring up one potential issue with this color scheme- The blue and coral (orange? red? I'm awful with colors) vibrate like whoa when next to each other. |
|
@derekobrien I really like that layout and style. Clear, bright and surprising. Do you all think it possible that there is some form of document that can be downloaded that explains the philosophy further? |
|
Yes the turquoise does't sit well on the salmon red which creates a haloing effect, though it can be overcome by outlining with the cream as seen by the updated imaged above. So a brand guideline could easily be setup to prevent direct use of turquoise on salmon red. Would like to see someone with more typography knowledge tweak this further such as - http://typecast.com/blog/a-more-modern-scale-for-web-typography |
|
@derekobrien I also like where you took most of the page but we lost interruption value above the fold with the high contrast message and photo. The "how to start section" should be closer to the bottom after we have told the story a little more. Let's interrupt them on why Open Source Design is so neat, then briefly educate them on how it works, then call for action. @dncnmckn Great idea, what about a Philosophy page. Something very story driven, like maybe a full page, slide driven layout. I'll find an example. |
|
@dncnmckn I think we could make a book to do that if we wanted to take it further. |
|
I love the idea of producing a small booklet for that. |
|
@derekobrien I'm happy to have a scale, but I don't think we should just plug in the numbers from the article. It has to really be custom to make sense - it depends on the typeface and the layout. |
|
@derekobrien also - @terracomma has already been doing great work with the default typography. #86 |
|
Hmm, a book or ebook to help firms or small groups get started using OSD in their organization would be interesting, could be very profitable too. |
|
@heyharmon @dncnmckn @terracomma I'll break that out into a different discussion. There is not a ton of money to be made in tech books - but what I would recommend we do is try to partner with a publisher but have a full html version for free. I've done something similar with other books and it worked out well. |
|
@derekobrien I really like your layout. I agree with the salmon and teal - they work best with separation. I like the idea of a table of contents, but the vertical layout lacks scan-ability. I wonder if we need it if the sections are small enough. |
|
Last tweaks on my variation and I'll leave it there for now. Will tidy up the Illustrator file and upload it soon if anyone wants it. [EDIT] Dropbox link to Illustrator file (CS6) 'OSD_Mock_003.ai' -https://www.dropbox.com/s/xj42dw40jxmdnzj/OSD_Mock_003.ai |
|
@derekobrien - yes! this. I think we should have different photos in the breaks. Also we could play with different colors/patterns for different sections. I'm thinking of more variations betweens sections like http://frankchimero.com/what-screens-want/ Thanks so much for doing this @derekobrien |
|
@derekobrien I could also add you to the dropbox if that would help. |
|
@GarthDB sure, Dm'd you my dropbox account email, makes sense to keep stuff centralised. |
|
Sent and it looks like you accepted. You can put it in the same Ai file on a different art board or just in a separate file. Whatever is easiest. |
|
Some interesting images. |
|
Here's a pretty solid resource for vintage imagery that is stock: http://nos.twnsnd.co/ |
|
nice. I also like http://unsplash.com/ |
|
but not as many vintage images. |
|
Yep that's a good one. Definitely more modern. Here's an insane amount of CC0 images: http://www.flickr.com/photos/britishlibrary Attribution to use these ones: http://superfamous.com/ |
|
On flickr you can search the commons too for a ton of no known copyrights - that's where I found the head image. |
|
Another great example of a campaign / narrative site. http://www.designedtomove.org/en_US/?locale=en_US |
|
Ack! Just opened up my OSD_Mock_003.ai file from last night and looks like Illustrator decided not to preserve my layer grouping/naming.. Will try an re-order the layers today. Meantime had a little play with colours for sub-section backgrounds, colours where randomly chosen from vintage palettes off Adobe Kuler and tweaked to match them up a bit more. Also header images need properly editing. Colours I was playing with: CS6 .ai file added to Dropbox Another variation with some neutral background areas for content to improve readability etc. |
|
@derekobrien awesome! Mind if I play with some of this tonight? |
|
sure no problem, knock yourself out :-) |
|
I heard back about the image use: AP/61/1/1639 Dear Mr Garthwaite Thank you for your email received here on 6 February 2014. You are most welcome to use the image requested on your website. Please acknowledge Tyne and Wear Archives and Museums and link back to the image on www.flickr.com. I hope this is helpful. Alyson Pigott for Archives Enquiry Team. |
|
That was nice and easy. |
|
It's pretty late right now, so I'll keep this short, but I wanted to chime in on the in order to restart the conversation a bit. I'm going to work on bringing together some of these concepts to make a jumping off point for the proposed relaunch of this site. I think a fresh look at some of the themes that have gone through this discussion should help us get back to working together to make this site what it should be and what we know it can be. This page should act as a jumping off point for the interior pages of the site as well, so I'll keep that in mind as I compile some of the concepts here. I'll post here as I consolidate the ideas so we can get the conversation going again! |
I've been thinking a bit since yesterday's designathon.
I think we should make the homepage more like a product page. I think the key elements should be:
Inspiration:
The text was updated successfully, but these errors were encountered: