Categories
Multimedia Deign

Break the Grid og Responsive Design

To Grid or Not to Grid

Hvornår skal du overholde et grid? Og hvorfor skal du nogen gange bryde med et grid? Reglerne kan virke modstridende; men det handler dybest set om æstetik og psykologi. Mennesket har det godt med rytmer. Men vi vågner op, når rytmen brydes med synkoper og skæve toner.

Mennesket har brugt grids lige så længe som det har kendt geometri. Grids er stadig et hot emne – fx nævner Jake Rochelau grids blandt “varme emner” i nutidens webdesign.

Grid

Et grid er et geometrisk mønster, der “usynligt” gestalter (former) en flade eller et rum. Hvis du tegner på et hvidt stykke papir; men bruger et ternet papir nedenunder til at styre tegningen med – så bruger du et grid. GIMP og Photoshop har indbyggede grids. Du kan slå dem til eller fra med et museklik.

Denne søgning på Google viser eksempler på geometriske grids:

Grids - fra en google søgning.
Grids – fra en google billedsøgning (29.4. 2013)

 At bryde med grids

“Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure …” (Linda van Deusen (* 1961) – citeret fra “Never Use White Type on a Black Background – and 50 other Ridiculous Design Rules”, NL 2009 p. 53)

Grids er geometriske strukturer, der ideelt udspringer fra et æstetisk behov. Du kan finde grids overalt. I kunst, arkitektur – og i sneglehuses brug af det gyldne snit. Grids handler om en systematisk opdeling af en flade. Det gyldne snit og reglen om tredjedele er også grids.

Hvis alt indpasses efter et grid er resultatet gabende kedsommeligt. Sider fra Pinterest er et godt eksempel. Pæne billeder under hinanden. Nydeligt. Kedeligt. Dødkedeligt. Uinteressant …

Gabende kedeligt grid. Hvorfor mon?
Gabende kedeligt grid. Hvorfor mon? (Pinterest 29.4. 2013)

På overfladen ser det jo nydeligt ud. Pinterest er så kedelig at se på, fordi griddet styrer for meget. Alle regler er da overholdt, ja… og … det er bare så  uinspirerende at man får lyst til at kaste med maling.

Grids er gode, når de skaber orden og overblik. Men de bliver uinteressante, når man gentager sagerne i det uendelige. Vi har altså brug for grids; men ikke for enhver pris.

Læg mærke til, hvordan ugeblade skaber grids og bryder med dem i en uendelighed. Nogen sider har mange spalter. Andre har få. Nogen er helt uden regler. Ofte er der tale om standardsider, som veksler mellem hinanden. Layoutet styrer en afvekslende oplevelse. Og sådan burde en webside nok også være.

Se og Hør er et kulørt ugeblad fyldt med sladder om såkaldt kendte og kongelige. Deres webside er interessant, fordi man både overholder et grid – og bryder med det.

Se og Hør (29.4. 2013) - grid gestalter siden; men der er også brud.
Se og Hør (29.4. 2013) – grid gestalter siden; men der er også brud.

Grids er altså noget man forholder sig til, eller som van Deusen (op. cit.) siger: “they exist in relation to content“. Se og Hør skalber interesse om sit logo ved en teknik, som man kunne kalde “bryd med griddet”. I forhold til AIDA-modellen kan man sige, at brud med grid kan give opmærksomhed (attention).

IBM eksperimenterer både med grids og animationer. Referentiel layout holdes i stamme linjer. Opmærksomhed (A) fanges, der hvor man bryder med griddet – eller hvor det varieres (for der er system i fordelingen af ikonerne ved smarter cities).

IBM - grid og brud med grid
IBM – grid og brud med grid (29.4. 2013)

Smashing Magazine har mange artikler om grids. Denne tutorial viser, hvordan man lynhurtigt kan sætte sit grid op. Der findes også halvautomatiske systemer, der kan skabe gridkoden – og som giver designeren en hel værktøjskasse af muligheder. 960.gs er et eksempel på denne type websteder. Her får du både HTML, CSS og et hav af filer til skitser i Photoshop, GIMP og andre designerprogrammer. Sådan et design kan selvfølgelig omsættes til en template i WordPress (forudsat du véd, hvordan man laver en template og linker relativt til et stylesheet fra templaten).

Responsive Design

960.gs har et problem. Problemet er den fastlagte bredde: 960 px. Selvfølgelig kan man gå ind i kodegeneratoreren og ændre sidens bredde til fx 1024px eller måske 600px. Det er fint nok, så længe man designer til en bestemt skærm. Problemet er bare at folk sidder med alt fra 40 tommer TV og til mere eller mindre smartphones, tablets og hvad ved jeg.

Responsive design er et forsøg på at forholde sig til denne situation. Websitet er programmeret til at forholde sig til apparaterne. Responsive.gs og Gridpack.com er sådanne forsøg.

Jacob Gube viser 25 eksempler på responsivt design her (29.4. 2013). Læg mærke til at det ikke er tilfældigheder, der afgør designet på små sider. Men hvordan angriber man en opgave, hvor man ikke kan nøjes med ét design? Skal man begynde med det forkromede storbillede – eller er det bedre at begynde med design til små skærme?

Arita Roy har samlet en række udmærkede tutorials (29.4. 2013). Hvis du ikke har arbejdet med emnet før, så er Nick Petits introduktion til responsive design et udmærket sted at begynde.

Workshop

Lav en mockup (i valgfrit udviklingsmiljø – fra Pico i en terminal til Photoshop eller måske Adobe Edge, hvis du er til sådan noget.

Mockupen skal tage højde for at dit design kan opleves på flere forskellige skærmtyper. Der skal være mindst to eksempler: designet til den store skærm og designet til en mobil enhed.

Designet skal forholde sig til et grid – og der skal arbejdes med mindst ét brud på griddet, der giver opmærksomhed.

Links
Læs mere her:

[wp-blogroll catname=Grid]

Categories
Multimedia Deign

Harlem Shake @Innoevent

Categories
Multimedia Deign

Preparing Harlem Shake

image

Categories
Multimedia Deign

Acute care

image

Categories
Multimedia Deign

The acute patient

image

Categories
Multimedia Deign

Cebit – program

Torsdag den 7. marts 2013

Kl. 07:30 – Mødetid på skolen
Kl. 08:00 – Afgang fra Tietgen Kompetencecenter, Ejlskovsgade 3, 5000 Odense  vi kører med Bergholt Bus, Rudkøbing.
Kl. 09:00 – Opsamling i Bramdrupdam. Afkørsel 63, ved OK-tanken, Vejlevej 361, 6000 Kolding. Hurtigt stop ved grænsen (20 min.) – Fleggaard – www.fleggaard.dk

Kl. 14:00 – Ca. ankomst til messen – www.cebit.de
Kl. 18:00 – Afgang fra messen
Kl. 19:30 – Ca. ankomst til hotellet – www.rennschuh.de
Kl. 20:00 – Middag på hotellet

Fredag den 8. marts 2013
Kl. 07:00 – Morgenmad
Kl. 08:00 – Afgang fra hotellet.
Kl. 10:00 – Ca. ankomst til Cebit messen
Kl. 16:00 – Afgang fra messen
Kl. 18:00 – Ca. ankomst til Restaurant Maximo – www.restaurant-pinneberg.de
Kl. 19:30 – Afgang fra Restaurant Maximo
Kl. 22:30 – Ca. ankomst til Ejlskovsgade 3, Odense (afhængig af trafik)

Categories
Multimedia Deign

So you think Twitter is just for fun?

Think again! Try to use some desk research. It’s not hard to find the amazing facts about Twitter.

100 most popular Twitters
100 most popular Twitters

Let’s have a look at http://twittercounter.com/pages/100

Lady Gaga was the most followed on Twitter. At the moment it’s Justin Bieber.

Who – Justin Bieber
Right now Justin Bieber is the most popular guy on Twitter. But – is it really Justin’s just tweeping his days away. His fingers must glow like red hot iron on the phone. Allegedly he’s the author of not less than some 20.000+ tweeps.

That’s an amazing number of tweeps – especially if you compare to the tweeps of Lady Gaga. She tweeped around 2500 times or so.

Kipling’s “six honest serving men”
From the poem “Six Honest Serving Men” from “The Elephant’s Child” you can learn how to analyze communication:

I KEEP six honest serving-men
(They taught me all I knew);
Their names are What and Why and When
And How and Where and Who.
I send them over land and sea,

I send them east and west;
But after they have worked for me,
I give them all a rest.
I let them rest from nine till five,
For I am busy then,
As well as breakfast, lunch, and tea,
For they are hungry men.
But different folk have different views;

I know a person small—
She keeps ten million serving-men,
Who get no rest at all!
She sends’em abroad on her own affairs,
From the second she opens her eyes—
One million Hows, two million Wheres,
And seven million Whys!

 

What – Twitter

So where are we? Twitter is a micro blog. You can post max 140 characters. That’s it. You can also post images, video or sound. Twitter is for short statements. It sounds boring. But professional authors and artists can reach out to a big audience.

When – anytime
Justin can tweep anytime – at least if he’s in reach of the internet somehow. He might use a browser – or his smartphone. Whatever device he prefers there might be some app where he can write his updates.

An so he did. 20.000+ times. That’s a lot of micro blogging.

Why – the most important question!
The most important question is: “Why?”. Do you really think that this is just Mr. Bieber having fun? When I click send around 60 persons will receive my tweep. When Justin does the same thing

33.728.223 

can read his tweeps. That’s a lot of readers.

To me Twitter may be a kind of social media. But when you reach out to millions of readers it’s not a passtime any more. It’s hardly a hobby. So for people like Justin Bieber Twitter is a mass media channel.

In comes Laswell’s classic communication model:

 Who is the author?
It could be Justin. At least some of the time. But the page looks strangely welldesigned. It’s nice in an almost boring way. Here it is relevant to ask yourself – is the page really made by Justin – or do you think that a ghostwriter is afoot? Are the pictures really made by Justin?

  • Did Justin write all of the text, some of it or nothing whatsoever? 
  • Can Justin really read the tweeps from the 123.772 persons he follows?
  • Will this page even pass a Turing test? (Could we suspect robotic activities here?)

Perhaps part of the site is made by professionals. Perhaps all of it. If somebody was payed to help Justin they did a good job if you can take the number of followers as a sign of such a thing.  Have a good look at the site.

Justin Bieber on Twitter
Justin Bieber on Twitter – so nice, sooo boring.

Have a good look at this – and the other 100 most poplar Twitter sites. Asking yourself who the sender really is might light a candle. So from the point of view of the multimedia programme you can say, that:

  • Twitter is business
  • Twitter is communication
  • Twitter is webdesign
  • Twitter is interaction