Posts Tagged ‘design’

  • SXSW countdown: one day!

    At long last… tomorrow morning we’re off to Austin!

    Stu and Antonica, Made by Many’s de facto cat herders, are limbering up even as we speak to corral the lot of us from Heathrow to Dallas Ft Worth on to Austin. Assuming no one offends Homeland Security on the way in (you know who you are…), we should all be ensconced in our Texan digs by tomorrow evening.

    Our departure is big news for our website, as it means our super-dynamic, sex-on-Twittter-toast* SXSW special homepage will be live. We’re kind of excited about this page. As well as all our latest tweets and links to our Twitter accounts, it shows off the latest Made by Many blog post and the most recent addition to our Flickr account. It offers a smooth user experience, too, as everything updates dynamically and in real time.

    The page will be live the whole time we’re away, which means you can keep (non-creepy, please) tabs on us and get a sense of what the SXSW experience is like. You’re also heartily invited to @ or DM us with suggestions, feedback, jokes etc while we’re gone — this is, after all, a conversation.

    For those who missed the earlier posts on this project, we took this page as an opportunity to open up our creative process and design in public. Here’s the first vision of the page. We followed this with a post on the idea’s evolution before whipping the curtain back for the big reveal.

    Thanks very much to everyone who offered feedback on this work — and of course, if you want to do so now, you are more than welcome.

    So on that note… have a great week and, um, watch this space!

    *not my words but damn do I love ‘em

    No Comments

    0
    Sara Williams By Sara Williams

    10th March 10

    0 comments

     Made by Many

  • SXSW countdown: one week

    And lo, ready to roll a full week before we take off for Texas, here it is — our Twitter-powered SXSW people-tracker:

    sxsw_d15

    For those who haven’t been following the posts and discussions around this project, here’s the story…

    Just about all of Made by Many is heading to Austin, Texas for SXSW interactive. Several weeks ago, we decided to build something onto our website to bring our SXSW experience to life for the people who aren’t going to be there with us. We thought this project would also be the perfect occasion to throw the doors open on our creative process and actually share the journey we go through as we work an idea through to a final execution.

    This series of posts started with shots of our original approach. We then showed how this idea was refined a few different ways. The third and final instalment in this design journey is above.

    The idea for the page is very simple: all of our most recent tweets on one page, updated in real time as it happens.

    The design started out as a series of coloured panels, one for each person, laid out on a very regimented grid. However, we all felt that this was a bit strict – it neither reflected our personality nor the event we’re going too.

    So we loosened the design up, taking the hand drawn style of our avatars as inspiration. The page is a series of speech bubbles, laid out in a seemingly random and slightly haphazard way. Connected by lines, doodles and graffiti, the speech bubbles change colour with time: the freshest tweets are dark, the stalest white. The page will be darkest when the conference sessions are going on and we’re tweeting non-stop, but completely white in the middle of the night when we’re all sleeping. Except for @malbonster’s bubble. He never stops.

    As well as pulling in our tweets, the page also pulls in the latest photo in our Flickr stream, our latest blog posts, even twitpics. You’ll be able to see more tweets from each person by clicking on their avatar or simply going through to their Twitter stream.

    The idea for the page is very simple: all of most recent tweets on one page, updated in real time as it happens.
    The design started out as a series of coloured panels, one for each person, laid out on a very regimented grid. However, we all felt that this was a bit strict – it neither reflected the personality of us or of the event we’re going too.
    So we loosened the design up, taking the hand drawn style of our avatars as inspiration. The page is a series of speech bubbles, laid out in a seemingly random and slightly haphazard way. Connected by lines, doodles and graffiti, the speech bubbles change colour with time: the freshest tweets are dark, the stalest white.
    We imagine that the page will be dark red whilst the conference sessions are going on and we’re tweeting virtually non-stop, but completely white in the middle of the night when we’re all sleeping. Except for @malbonster’s bubble. He never stops tweeting.
    As well as pulling in our tweets, the page also pulls in the latest photo in our Flickr stream, our latest blog post, even twitpics. You can see more tweets from each person by clicking their avatar or simply going through to their twitter stream.

    We like the sketchy style and the playful execution. We also think the design has some dynamism to it, that it tells a story and carries your eye through that story fairly easily. All in, we think this is really close to who we are.

    This whole ‘designing in public’ thing felt a little strange at points (sort of like being naked in front of a lot of people, I reckon) but we got some interesting feedback here and on other blogs, which was cool. And it’s practice for us to be more open in the future — something we are really committed to doing.

    Our SXSW special will be live on Made by Many as of Thursday 11 March.

    4 Comments

    4
    Sara Williams By Sara Williams

    4th March 10

    4 comments

     Made by Many

  • Online > offline: we still love paper goods

    Last Tuesday night, I went to the preview for the Brit Insurance Designs of the Year exhibition (aka the Oscars of the design world) at the Design Museum in Shad Thames.

    The exhibition

    (Photo credit: Luke Hayes, from the Brit Insurance Designs of the Year blog)

    It was a fluorescent evening, buoyed up by free-flowing champagne and ebullient design types larging it in hats, big hairdo’s, bright lipstick and serious specs.

    The exhibition covers the gamut of design: architecture, furniture, product, graphics, interactive and fashion. One of my favourite pieces was a bit of folly with a serious message: ‘Panda Eyes‘ a crowd of WWF Panda collecting tins, wired up to a camera in the sky to detect human movement and shift in sync as you walk around them. Its intention is to raise awareness of pandas’ plight in the wild. I think.

    What I found interesting is that some of the graphic entries were really all about the relationship between online and print (and therefore arguably candidates for the interactive category). These three entries all had online generation in common: the articles, images, comment and opinion are all drawn from the crowd, using twitter, blogs and data to bring a concept to life.

    Newspaper Club (which for some reason has a bit of an ugly website, but produces beautiful papers) allows anyone to create and print their own newspaper, without the need to be a multi-millionaire media mogul.

    Here’s a particularly cool example that’s both useful and will please anyone who likes a bit of data visualisation loveliness. The Postcode Paper was an experiment from the Newspaper Club themselves that took information from data.gov.uk such as local services, crime stats and other useful stuff you need to know when you first move somewhere, like TFL transport links, and republished it in one handy, paper format.

    The Postcode Paper

    (Photo credit: Newspaper Club)

    It’s Nice That brings together the best of the creative industry in one place. As well as existing online, they also produce “a bi-annual printed publication, monthly talks and videocast, an online shop selling exclusive products as well as regular interviews and features with current practitioners.” I haven’t seen the print publication, but they feature some mighty nice stuff online.

    Tyler Askew's brand identity for Music HDTV channel RAVE

    And having recently received an extremely dull pre-conference magazine for SXSW, I can appreciate how something like The Incidental would be refreshingly interesting and bring the good stuff to your attention when wading through the programme at a conference. Essentially, it’s “a community-generated news pamphlet and website at international design events which offers debate, reviews, news updates and recommendations by tapping into what everyone is talking about.”

    This has given us some ideas for SXSW…

    No Comments

    0
    Charlotte Hillenbrand By Charlotte Hillenbrand

    24th February 10

    0 comments

     Great Stuff

  • SXSW countdown: two weeks, one day

    We’re still keen to open up our creative process by sharing the evolution of our SXSW project.

    As mentioned last week, it’s a Twitter-powered execution that aims to give an as-it-happens update of what the Made by Many folk are up to, as we’re doing it. This week we’re sharing three snapshots to show how the design is coming together.

    Here’s where we were in the middle of last week:

    colours

    This was our first attempt in Photoshop. Each person gets a panel that shows their avatar and latest tweet. We’ve colour-coded the boxes to show recency, with the freshest content (hot colours) at the top, and the stale content (cold colours) at the bottom.

    However, we wanted the page to update in real time, which would mean people and their panels moving around the screen. We figured that was going to get far too busy and complicated… Onwards!

    Here’s the next stop on the journey:

    Flash

    Here we’ve brought in a bit of alpha-order to give everyone a spot on the page and keep them there. This solved the busy problem, but when the coloured panels are shown in a non-spectrum order, it looks confusing. We trimmed the colour back to what you see here but found that they meant less.

    Standing back a bit, we worried that this design was actually a bit boring and unemotional… just not MxM enough. Next!

    Finding the right conversational note:

    bubbles

    Here we’ve started to play around with something that’s a bit more conversational and has more personality. There’s still more work to go, but we think this could be fun. Now we’re moving in the right direction.

    We agreed this design and we’re taking it forward even as we speak.We’ll preview this project again next week, but in the meanwhile, feel free to tell us what you think.

    3 Comments

    3
    Sara Williams By Sara Williams

    24th February 10

    3 comments

     Made by Many

  • Pictory – A beautiful example of online editorial design

    I’ve talked before about exploring different ways of navigating and consuming content online.

    I first came across Pictory a few weeks ago and absolutely loved it. But as it starts to fill with stories and topics I feel provides some beautiful and elegant ways to gorge yourself on content and is really forging a path into new areas of content layout and navigation online.

    Their line ‘Your best photo stories’ explains what it is nicely.

    Pictory screenshot

    Let’s look at the evidence.

    Lovely, big images. Navigation via a keyboard which allows me to skip from piece to piece simply by pressing the left/right arrow keys. A balanced mix of captioned images and short stories pulled together to create a rich textured viewing / reading experience. Real-life stories which often cause an emotional stir in the reader. And the designer in me loves the use of Typekit fonts.

    I think it’s an example of crowdsourcing at it’s absolute best. A nice tightly worded brief but open enough for interpretation by the viewer. (Aren’t all the best briefs like this?)

    Being ultra picky. A full-screen view would be nice.

    Anyway, I think it’s best if you go there now and lose the next hour of your day.

    1 Comment

    1
    Simon I'Anson By Simon I'Anson

    21st January 10

    1 comment

     content

    design

  • The DIYist

    If you want to understand ‘the social web’ and where it’s going, take a look at what the DIYists are up to.

    Readers Digest DIY manualFor years, DIY was the bastion of the weekend jobbing dad. Men would buy tool belts, low-quality hand drills and set about putting up shelves, bleeding radiators or hanging pictures. And their bible was the Reader’s Digest Complete Do-it-yourself Manual. The appeal of DIY is really the time when you’re NOT doing DIY and you look at the thing you did and think “I did that, all by myself”. There’s immense pride in DIY. And the pride can be totally disproportionate to the effort you put in. You can bang a nail into your bathroom wall with a shoe and still feel pretty pleased with yourself when you look up at that C. M. Coolidge every time you perform your ablutions.

    Read full post

    3 Comments

    3
    Mike Laurie By mike

    15th December 09

    3 comments

     Social Web

    opinion

  • Life after Verdana

    Typekit launched recently amid a tremendous buzz from designers and bloggers across the web.
    What typeset offers are ‘real’ fonts on the web. Don’t quite know what this means. Surely Arial, Verdana, Georgia, Tahoma et al are all ‘real’ fonts. I think what they mean is that there is now access to a huge library of extra fonts to employ in browser-based design.
    This sort of follows on from my previous post about Art Direction on the web. This wider choice of fonts should allow greater freedom for the designer to inject some personality into their designs and help achieve some differentiation. As, arguably, one of the nicest serif-fonts online Georgia is used all over the place for online publishing. The arrival of Typekit should help reduce the reliance on Georgia for this purpose.
    So how does Typekit work?  It’s actually very clever. You see, the problems with fonts online are the same as digital music publishing, namely DRM. As soon as I install a font on my web server and use it on my site then I need a license for the distribution of that font. And those licenses don’t exist. Ot they do but their prohibitively expensive.
    Typekit have got round this problem by allowing you to rent the font from their servers for use in your site CSS and HTML. You pay a monthly subscription (on a freemium model), the level set depending on how many fonts you want to use and how many sites you want to publish those fonts on. Once you’ve chose your fonts and enter the URL of the destination site and it spits out a couple of lines of javascript for you to place into the <head> of your HTML file. It looks a bit like this…
    <script type=”text/javascript” src=”http://use.typekit.com/etn1iee.js”></script>
    <script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>
    This works in all major browsers (Firefox 3.5 and up, Safari 2.4 and up) and even IE (version 5 an up).
    It’s all quite ingenious really. And a very elegant solution to a problem that looked insurmountable a few years ago.
    However, I’m slightly wary of where this might lead. The old saying ‘just because you can, doesn’t mean to say you should’ needs to be plastered all over the Typekit site. The font catalogue may be extensive but there are some absolutely hideous examples of the typographers art on there. Allow the user to set them small onscreen any they’ll be completely illegible.
    This may also open up the floodgates for some crimes against typography. Remember when, in the early-mid 90s the PC became more and more pervasive. The world became filled with rainbow coloured, Times, Comic Sans and Brush Script-rendered signs in corner shops? The same people who used the <blink> tag and texture-mapped animated gifs. I fear we may be treading the same path again.
    Whatever, in the right hands this opens up a very exciting future for web-based editorial design and art direction. A future that may be even brighter when some of the larger foundries come onboard with the likes of Garamond, Franklin Gothic, Clarendon etc.
    For those that care about typographic nuances I found this useful tool for seeing exactly how the font will render in a browser, at different sizes, white out and at varying shades of grey.
    It’s probably worth pointing out that there are others doing similar things to Typekit. Some use a different method of linking back to the font file (@font-face) but the principles are the same. These include, Kernest, Fontdeck (coming soon) amongst others.

    Typekit launched recently amid a tremendous buzz from designers and bloggers across the web.

    What Typekit offers are ‘real’ fonts on the web. Don’t quite know what this means. Surely Arial, Verdana, Georgia, Tahoma et al are all ‘real’ fonts. I think what they mean is that there is now access to a huge library of extra fonts to employ in browser-based design beyond the standard set of ‘browser-safe’ fonts.

    Screen shot 2009-11-17 at 14.10.50

    This sort of follows on from my previous post about Art Direction on the web. This wider choice of fonts should allow greater freedom for the designer to inject some personality into their designs and help achieve some differentiation. As, arguably, the nicest browser-safe serif-font, Georgia, is used all over the place for online publishing. The arrival of Typekit should, if nothing else, help reduce the reliance on Georgia for this purpose.

    Read full post

    3 Comments

    3
    Simon I'Anson By Simon I'Anson

    17th November 09

    3 comments

     design

    innovation

  • Looking towards more flexible web-based editorial design

    Isaac and I have been discussing how users consume media and news which has raised some interesting questions around online publishing. Specifically: how we construct content templates, how that content looks when it’s in place, art direction at a micro level and how we can create richer, more engaging and, importantly, more ‘useful’ reading experiences online.

    Over the last 4-5 years there has been a gradual convergence in how most newspaper sites construct their article pages. Based on a grid system, they employ a wide central column for the body copy and a number of other columns, usually on the right of the screen, for related information, links to other stories, MPUs, tools, etc. We should know, we’ve designed a number of sites for media owners, as well as countless blogs that conform to these conventions.

    No matter how long the article is it is wedged into the same template. If it’s 200 words, stick it in. 800 words? No problem, paginate it and reap the ad impressions.

    There’s loads of sense to this approach. The beauty of the web is its democratisation of publishing. Drop your text and image into a well crafted template and you’re away. But I think there’s room for another approach.

    Read full post

    4 Comments

    4
    Simon I'Anson By Simon I'Anson

    29th October 09

    4 comments

     opinion

  • Plotting a critical path

    I’ve enjoyed following the debate around Manuel Lima’s information visualisation manifesto, published after he spoke here at Kingly Street last month (see Justin’s post below). The manifesto was sparked by a call from a part of the audience for a critical discourse on data visualisation, so that we could stop just going “Ooohhh” and begin to answer the question ‘What makes a good diagram?’.

    Manuel’s response was the succinct and simple yardstick: “form follows revelation”.

    He elaborates: “Form doesn’t follow data. Data is incongruent by nature. Form follows a purpose, and in the case of Information Visualization, Form follows Revelation…. Independently of the subject, the purpose should always be centered on explanation and unveiling, which in turn leads to discovery and insight.”

    This is an essential truth but there’s a lot of filling in to do before being able to apply the maxim in the world, and Manuel begins with these sub-clauses: start with a question; interactivity is key (discuss); cite your source; [use] the power of narrative; do not glorify aesthetics; look for relevancy; embrace time [cf. interactivity]; aspire for knowledge; avoid gratuitous visualizations.

    I have others of my own, but I’ll start by referring back to the origin of the debate which is (I can say with authority, as one of Ian Douglas’ naysayers) that, in half a decade of observing dynamic and interactive data visualisation emerge, there’s a frustration that the critique hasn’t moved beyond cataloging new typologies (of which an excellent job has been done by Manuel’s visualcomplexity.com, the infosthetics blog, and by books such as Data Flow and Else/Where.

    I wrote a review of Else/Where in Eye in 2006 (you can read it here) which took up the theme:

    “Else/where reveals that, whereas the abstractions we use to represent relationships, dimensions and properties in the physical world are universally understood and ingrained in our consciousness, the visual language of intangible landscapes is immature”.

    And In reference to one particular diagram:

    “No matter how much well-researched data the Map of World Government contains within its frame, the message is unclear, the scale wrong, the detail obscured by arcane pictograms and its visual intensity diminished by over-reliance on text. This ‘map’ leaves its reader powerless. Like… Read full post

    1 Comment

    1
    By William Owen

    19th October 09

    1 comment

     Made by Many

    opinion

« Older Entries

Our latest tweets

  • RT @juxtapozed: Back in sunny London, and feeling like a zombie. Here's some photos from last week @ SXSW http://bit.ly/blC4N5 17 mins ago
  • @madebymany back in the UK after an intense and awesome time at SXSW 1 hr ago
  • And SXSW comes to a close. The MxM crew seem to be simultaneously brimming with ideas & quite close to the end of their hungover tethers. 1 day ago
  • More updates...

Categories

Archives

Find us on the web