Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

Responsive web design

30 Nov 2011

Vorige week werd ik gevraagd om op een Fronteers bijeenkomst in de Lessius Hogeschool in Mechelen te spreken over responsive webdesign. Het was een erg leerrijke ervaring. Je kan een verslagje van de avond nalezen op Creative Skills en op de Fronteers blog.

Wie er niet bij kon zijn kan de slides vinden op SlideShare of gewoon hieronder:

Reacties zijn uiteraard altijd welkom.

3 reacties


view comments

Designer meetup Gent part 2

9 Sep 2011

Eerder dit jaar kwamen 20 ontwerpers samen in de Gentse Vooruit om bij pot en pint te babbelen over typografie, illustratie en grafische vormgeving. Deze keer pakken we het iets groter aan. Er is plaats voor 40 ontwerpers, en Yves Peters van Fontshop komt een uurtje spreken over typografie. De meetup vindt plaats in de Brugzaal van Vooruit.

Yves Peters ken je wellicht van http://www.fontfeed.com en http://www.fontshop.be of misschien zelfs als @BaldCondensed op Twitter.

28 september. Vanaf 20u. Presentatie Yves Peters om 21u20. Na de presentatie kan er nagepraat worden.

Omdat de plaatsen beperkt zijn, is reserveren een must! Alle info hier. Eerst komt, eerst maalt!

3 reacties


view comments

Mobile first ontwerpen

20 Jun 2011

Enkele dagen terug heb ik een tweede responsief ontwerp online geplaatst. Het is deze keer een eenvoudige webshop geworden. Het resultaat kan je bekijken op madebywolf.com. Haal er gerust je gsm of iPad bij. (Qua vormgeving was ik hier gebonden aan een bestaande huisstijl.)

wolf desktop layout

wolf mobile layout

Het grote verschil met Sleepstreet, mijn vorige responsive design, is dat ik de Wolf website volledig “mobile first” heb opgevat (onder impuls van Andy Clarkes 320AndUp).

Desktop first

Sleepstreet was “desktop first” opgebouwd: ik maakte eerst een fluid versie van de website zoals die er moest uitzien op de desktop en ging daarna media queries gebruiken om het ontwerp aan te passen voor een vijftal andere schermresolutiezones, gaande van gsm tot high-res monitor.

Het voordeel van die “desktop first” aanpak is dat de website zonder problemen meteen goed wordt weergegeven in Internet Explorerversies ouder dan 9 (die geen media queries ondersteunen). Geen gepruts daar dus.

Het nadeel is dat mijn CSS een pak uitgebreider werd. Want voor elke regel CSS die iets specifieks aanpakt in de desktop layout, had ik er minstens 5 extra nodig voor de andere schemresolutiezones. Dat komt omdat ik media queries gebruikte met minimum- en maximumwaardes, zoals deze:

@media only screen and (min-width 320px) and (max-width 380px{  } 

De CSS in bovenstaande media query wordt alleen toegepast als de viewport tussen de 320 en 380 pixels breed is. Is ze 319 of 381 pixels breed, dan wordt de standaard desktopversie weer getoond. Daarom is dus een volgende media query nodig die de volgende schermresolutiezone aanspreekt, zoals:

@media only screen and (min-width 381px) and (max-width 768px{  } 

Mobile first

Wolf is dus mobile first opgebouwd. Mijn basis-CSS beschrijft bijgevolg de gsm-versie van de website. Op zich heeft dat alleen maar één groot nadeel: oude IE-versies tonen altijd de gsm-layout.

Maar op media queryvlak wordt het wél interessanter, als je gebruik maakt van media queries die alleen minimumwaardes bevatten tenminste, zoals deze:

@media only screen and (min-width 480px{  } 

Via deze eerste media query ga je bepalen wat moet gebeuren als een gebruiker je site bezoekt met een scherm dat wat meer pixels kan weergeven dan het standaard gsm-scherm. Het leuke aan die media query is dat de CSS die er in gestopt wordt ook wordt toegepast op een scherm dat 2000 pixels in de breedte kan weergeven. Dat komt uiteraard net doordat geen max-width is beschreven.

Het komt er dus op neer dat je een CSS-regel doorgaans niet in elke schermresolutiezone moet definiëren. Alleen in die zone vanaf dewelke je wil dat er verandering optreedt. En dat zorgt voor heel wat minder CSS.

En Internet Explorer dan?

Maar wat met oudere IE-versies die geen media queries ondersteunen? IE8 is nu eenmaal ‘s werelds meestgebruikte browser. En die 30% van je bezoekers willen heus geen mobiele versie zien van je website op hun desktopcomputer.

De oplossing is eigenlijk vrij eenvoudig: geef IE respond.js. Respond.js is een fantastisch script dat checkt of je browser media queries ondersteunt. Als dat niet het geval is, dan zal respond de CSS uit je media queries interpreteren en die via javascript aan de browser gaan opleggen. Het resultaat: je media queries werken in oude IE-versies.

Ik ben overtuigd. Mijn volgende website wordt op designvlak zeker en vast opnieuw mobile first.

7 reacties


view comments

Sleepstreet: mijn eerste responsive ontwerp

6 May 2011

In Ontwerpen zonder bladspiegel had ik het al over de boeiende tijden die het web momenteel doormaakt: in heel wat landen surfen nu al meer mensen via de gsm op het internet dan via een “vaste” computer. In bepaalde ontwikkelingslanden is een computer onbetaalbaar, maar zowat iedereen heeft er wel een gsm.

In de jaren die komen zal deze trend zich ongetwijfeld voortzetten. Ook in België komt er een dag dat op jouw website meer bezoek van mobiele gebruikers verwacht mag worden dan van de reguliere computergebruiker.

Dit vergt uiteraard een enorme aanpassing op het vlak van websiteontwerp: het scherm van iemand die met een smartphone jouw website bezoekt is zoveel keer kleiner dan het scherm van de computer die je misschien op je werk gebruikt. En tussenin zitten nog de tablets, iPads en god weet welk apparaat er morgen op de markt komt.

Daarenboven werken sommige apparaten met een aanraakscherm, terwijl andere computers uiteraard met een gewone muis of trackpad werken. Ook dat vergt aanpassingen aan het ontwerp.

Tijdens de Fronteers bijeenkomst van gisteren had gastspreker Vasilis van Gemert het over adaptief ontwerpen en responsive webdesign als antwoord op dat alles: één website die zich perfect aanpast aan de verschillende schermresoluties van elk apparaat. (In mijn vorige blogpost had ik het ook al over de uitdagingen die zo’n ontwerp met zich meebrengt.)

Ik was verheugd om te zien dat Vasilis heel even wat van mijn werk demonstreerde tijdens zijn presentatie. En vandaag schrijf ik eigenlijk dit artikeltje om het resultaat van mijn eerste responsive webdesign ook met jullie te delen: je vindt de Sleepstreet website bovenaan mijn portfoliopagina. Of je kan natuurlijk ook gewoon deze link volgen naar de Sleepstreet site.

sleepstreet op iphone en desktopscherm

Sleepstreet is dus volledig responsive opgebouwd. Neem gerust een kijkje op je smartphone of iPad. Of schaal je browservenster om te zien hoe de site reageert op andere schermgroottes. Er is nog wat werk voor mobiele niet-Safarisurfers, maar ‘t is toch ook voor hen al een stap voorwaarts.

Zelf zin in een responsive website design? Contacteer me gerust!

4 reacties


view comments

Ontwerpen zonder bladspiegel

25 Feb 2011

Het zijn boeiende tijden voor webdesigners. De eigen workflow die elkeen van ons jarenlang rustig kon verfijnen, en die tot snel en efficiënt werken leidde, moeten we overboord gooien. Allemaal moeten we vroeg of laat op zoek naar nieuwe manieren om aan vormgeving voor het web te doen.

Op het internet is er geen sprake van een vaste bladspiegel zoals grafisch vormgevers dat uiteraard wel kennen. Collega Danny Calders wees me er gisteren nog op dat zelfs de term webpagina volledig ongepast is. De man heeft gelijk: het is een slechte metafoor die zoals zoveel ontwerptermen zijn oorsprong vindt in de drukwereld.

Enige tijd geleden konden we een bladspiegel nog makkelijk faken door in Photoshop te ontwerpen binnenin een screenshot van een leeg browservenster van 1024 pixels breed. Met wat CSS achtergrondtrucjes en vloeiende vlakken leek alles mooi te passen op het scherm van elke bezoeker. De hoogte stond dan wel nooit vast, maar verticaal scrollen is nu eenmaal geen echte barrière voor de websitegebruiker.

Maar daar is plots het mobiele web. Meer en meer mensen surfen op het web met gsm’s, tablets en nog meer goeds. Een website die 960 pixels breed is, is ok, maar helemaal niet meer het optimale compromis van weleer. Geen enkel gsm-scherm kan die 960 pixels zonder schuifbalken of schalen weergeven.

Responsive webdesign

Responsive webdesign is in dat opzicht een prachtig gegeven waar ik ook mijn eerste stappen in waag. Het idee is simpel: met wat CSS-magie zorg je er voor dat je website zich qua breedte en hoogte aanpast aan de schermgrootte van elke bezoeker. Zo benut je het scherm van de gebruiker maximaal en spaar je de gebruiker van onleesbaar kleine tekst of vervelende interacties als horizontaal scrollen, pinchen of zoomen.

Maar hoe ontwerp je zoiets met ontastbare afmetingen? Vroeger ging ik dus een bladspiegel faken in Photoshop en met wat verbeelding wist ik perfect hoe het ontwerp ging meeschalen naar een breder browservenster. Kleinere browservensters waren er praktisch niet. Maar nu?

Eén van de laatste projecten waar ik mee bezig ben, is het websiteontwerp van een Gentse B&B. We gaan volledig de responsive toer op. Intuïtief ben ik in Photoshop begonnen met het ontwerp in een canvas dat de afmetingen heeft van een iPhone.

sleepstreet ontwerp iphone optimized

Toen dat er was, ben ik alles opnieuw gaan schikken in een canvas met de afmetingen van een staande iPad.

sleepstreet ontwerp ipad staand optimized

Om daarna nog een psd te maken met het ontwerp aangepast voor een liggende iPad. En uiteindelijk nog een versie voor grote computerschermen.

sleepstreet ontwerp desktop optimized

Yep, 4 ontwerpen voor de homepagina. Daar kruipt veel tijd in uiteraard. Leuk om doen, zeker en vast, maar het kostenplaatje voor de klant loopt snel op. Zeker als je weet dat de gemiddelde “eenvoudige” website snel uit een vijftal templates bestaat. Waar ik dus vroeger 5 ontwerpen ging maken, worden dat er plots 20.

Ontwerpen in de browser

Zover heb ik het niet laten komen. Onder impuls van een invloedrijke webdenker ben ik vroeger dan gewoonlijk naar HTML en CSS overgestapt: nadat het ontwerp van de 4 homepaginaversies af waren. De rest van de webpagina’s ging ik dus rechtstreeks in de browser ontwerpen. CSS als Photoshop. Mja, het is gelukt, maar het heeft me veel tijd gekost. Af en toe ben ik ook teruggekeerd naar Photoshop om mijn ideeën de vrije loop te geven en op zoek te gaan naar minder voor de hand liggende oplossingen.

Ik worstel dus. Ik ben op zoek naar een nieuwe werkwijze waarin de puzzelstukjes beter passen. Ik zie mezelf nooit een website vanaf nul in de browser ontwerpen. Ik moet me vrij kunnen uitleven in Photoshop.

Responsive web design vraagt meer aanpassingen dan wat ik op het eerste zicht dacht. Het is meer dan een paar CSS media queries. Een bijna wiskundig systeem van grids is zeker en vast een oplossing, maar mag niet te beperkend werken. Voer voor onderzoek.

Ik ben benieuwd naar jullie ervaringen. Hoe beïnvloedt de onbestaande bladspiegel jullie ontwerpproces? Care to share?

9 reacties


view comments

Hoe het ontwerp van Transistor tot stand kwam

12 Jan 2010

In een vorige blogpost kon je meer lezen over de release van Transistor, een iPhone app waarmee je de Belgische radiozenders kan streamen. In deze blogpost wil ik graag even stilstaan bij het designproces van het programma.

Het uitgangspunt van Transistor was dat we (David als developer en ik als ontwerper) een radio-applicatie wilden ontwikkelen waarmee gebruikers naar de meest populaire Belgische radiozenders kunnen luisteren. Er was uiteraard al de radio-app radio.be, maar wij wilden het ietsje grafischer aanpakken. Ik wilde vooral ook een heel erg duidelijke en gebruiksvriendelijke gebruikersomgeving ontwerpen. Daarom kozen we voor weinig features en instellingen, gewoon rechttoe rechtaan radio streamen. Less is more!

Het iPod navigatiewiel

Als belangrijkste navigatiemiddel wilden we werken met het bekende iPod navigatiewieltje. We gingen er van uit dat de meeste gebruikers van een iPhone of iPod Touch ook ooit al eens een klassieke iPod hadden gezien. Ze wisten dus meer dan waarschijnlijk wel hoe zo’n iPod navigatiewiel te gebruiken. Het kon hen een positief gevoel van herkenning geven.

Dieter Rams

In het begin wilden we vooral dat Transistor het sentiment van een oude transistorradio zou oproepen. Ik ben toen op zoek gegaan naar voorbeelden van goed ontworpen radio’s. Het is waarschijnlijk geen toeval dat ik snel bij Dieter Rams ben terecht gekomen. Rams is een Duits productdesigner die vooral bekend is door zijn werk voor elektronicaproducent Braun AG in de jaren 1950 tot 1990. Het is een publiek geheim dat het werk van Rams ook een directe inspiratiebron is voor de designers bij Apple. Hieronder vind je enkele van zijn mooie radio-ontwerpen:

dieter rams design voor Braun AG als inspiratiebron voor Transistor

dieter rams ontwerp voor Braun AG als inspiratiebron

dieter rams radio-ontwerp voor Braun AG als inspiratiebron voor Transistor


Van Rams naar Transistor

Vooral de kleuren en het ontwerp van dat laatste radiootje vond ik sterk en bruikbaar. Geïnspireerd volgden enkele vlugge schetsen op papier. Daarna startte ik Photoshop op en vrij snel ontsproot het eerste ontwerp voor Transistor:

Transistor ontwerp versie 1

De positie van het navigatiewiel en het venstertje spreken voor zich. Het kleur doet denken aan dat van een witte iPod. De kleuren en het uitzicht van de frequentieband zijn geïnspireerd op de radio’s van Dieter Rams.

Functioneel denken

Bij het ontwerpen van een gebruikersomgeving moet je natuurlijk ook altijd functioneel gaan denken. Het leek me logisch dat het draaien van het wiel ook de frequentieband zou doen bewegen, net zoals je vroeger aan een knop kon draaien om een radiofrequentie te zoeken. De donkere overlay duidt dan de geselecteerde radiozender aan.

Als er geen radiostream beschikbaar is, dan brandt het lampje linksonder rood. Als de radiostream aan het inladen is, dan flikkert het lampje en als de radio afspeelt dan brandt het lampje groen.

België is Vlaanderen en Wallonië

Ik moest ook nog een manier vinden om een onderscheid te maken tussen de Nederlandstalige en de Franstalige zenders. Zoals je kan zien loste ik dat op door twee knoppen onder het schermpje te plaatsen. Tik je op de FR knop dan verschijnen de Franstalige zenders, klik je op de NL knop dan zie je uiteraard de Nederlandstalige zenderlijst verschijnen.

Problemen bij het eerste ontwerp

Na bespreking en enkele revisies werd het duidelijk dat het eerste ontwerp enkele belangrijke problemen had:

  • Belangrijke radiozenders van het andere taalgebied zitten verstopt. Hoewel de taalknoppen vrij duidelijk lijken, kan het gebeuren dat een gebruiker niet meteen een anderstalige zender vindt.
  • Om de klassieke radiolook te behouden moest ik de radiologo’s aanpassen naar het Braunoranje. Dat maakt ze minder snel herkenbaar voor de gebruiker. Daarbij komt dat het eigenlijk not done is om de kleuren van een logo te veranderen.
  • Het groene lampje dat de status van de stream aangeeft, staat een beetje te ver van de zenders: het oog van de gebruiker moet een sprongetje maken van logo naar lampje en terug. Dat werkt verwarrend.

Ontwerp 2: even finetunen

In een volgende ontwerp werd vooral het probleem van de taalkeuze opgelost:

Transistor iPhone app ontwerp versie 2

In plaats van twee knoppen te voorzien kon ik gewoon de frequentieband gebruiken om het onderscheid te maken: aan de ene kant de Franstalige zenders en aan de andere kant de Nederlandstalige zenders!

Zoals je kan zien staat het statuslampje nu ook rechtsboven. Dat leek me logischer omdat je als iPhonegebruiker gewend bent om ook voor de netwerk- en batterijstatus bovenaan op je scherm te kijken.

Kleuren

In het tweede ontwerp zijn ook de kleuren aangepast: weg van de iPodkleuren en volledig richting de Braunkleuren. Mede door het weglaten van de taalknoppen ziet alles er al een pak rustiger en duidelijker uit.

Problemen bij het tweede ontwerp

Ook het tweede ontwerp had enkele duidelijke problemen:

  • Het probleem van de oranje logo’s blijft bestaan (zoals hierboven omschreven).
  • Het statuslampje staat logischer gepositioneerd maar staat nog altijd te ver van de zenders waardoor het oog van de gebruiker nog altijd sprongetjes moet maken om te zien of een zender goed ontvangen wordt.
  • Als de taalaanduiding helemaal aan het uiteinde van de frequentieband staat zoals in het ontwerp te zien is, hoe kan een gebruiker dan weten welke taal aan welke kant van de band staat? De gebruiker zal heus geen zin hebben om de volledige band te doorlopen om dan te ontdekken dat zijn favoriete zender eigenlijk aan de andere kant te vinden is.
  • Ondertussen hadden we na hele simpele tests ook nog een bijkomend probleem ontdekt: Het navigatiewiel was een beetje te klein voor mijn grote vingers!

Achteraf gezien bood dit tweede ontwerp dus niet meteen de juiste oplossingen voor de problemen van het eerste ontwerp. Al was het positieve wel dat de interface er eenvoudiger uit zag: minder knoppen.

Ontwerp 3: weg van de Braunkleuren

“Als we de logo’s in hun oorspronkelijke kleuren moeten houden, dan houdt het Braunoranje geen steek meer en dan laten we de Braunkleuren best helemaal vallen.”, dat was de redenering achter het derde ontwerp:

Transistor ontwerp versie 3: zwart

En dus opteerde ik, zoals je kan zien, voor logo’s in grijswaarden en kleuren. De applicatie zelf werd volledig omgebouwd naar de kleuren van een zwarte iPod.

Weg met het statuslampje!

Het probleem van het statuslampje kon ik ongelooflijk eenvoudig oplossen: ik haalde het gewoon weg! Visuele feedback over streamen en bufferen kon anders en beter aangepakt worden: het logo van het radiostation dat ingeladen werd, licht vanaf nu op in kleur. Een flikkering tussen zwart-wit en kleur betekent dat een connectie wordt gemaakt en een blijvend kleurlogo betekent dat de radiostream voor dat station wordt afgespeeld.

Het oog van de gebruiker kan dus blijven rusten op het radiologo. Dat maakt alles plots veel eenvoudiger en duidelijker. Bovendien blijkt het ook heel erg logisch. Dat ik daar niet eerder aan had gedacht!

Om het gevoel van een oude radio toch nog te behouden, probeerde ik even met een glasplaatje boven de actieve zender.

De taalaanduiding

Ook voor de taalaanduiding vond ik een eenvoudige oplossing: als je Transistor voor de eerste keer opstart, dan zie je het midden van de frequentieband. Daar verschijnt meteen een aanduiding: Nederlandstalige zenders aan de linkerkant en Franstalige zenders aan de rechterkant. Je kan de aanduiding zien op het ontwerp hieronder. Ook dat leek me duidelijk en logisch.

Transistor ontwerp met taalaanduiding in het midden

Probleem van het navigatiewiel

Door de problemen in de vorige ontwerpen met het te kleine navigatiewiel, speelde ik even met het idee om het navigatiewiel te laten varen. In plaats daarvan zou ik een Braunachtig luidsprekerpatroontje gebruiken.

Ontwerp zonder navigatiewiel maar met Braunachtig luidsprekerpatroon

Ik vind het op zich nog altijd een mooi ontwerp maar het impliceert dat de gebruiker moet scrollen door te schuiven in de frequentiezoeker zelf. Wie dat doet, bedekt met de vinger automatisch deels de zenderlijst wat het navigeren bemoeilijkt. En ik kan me inbeelden dat vele gebruikers iets functioneel verwachten van het luidsprekerpatroontje. Mooi maar niet bruikbaar. Skippen dus.

Ontwerp vier: groter is duidelijker

Voor het vierde ontwerp liet ik het minder geslaagde glas vallen en maakte ik het schermpje een stukje groter. Ik positioneerde het wat beter ten opzichte van de randen van de iPhone en maakte meteen ook de logo’s groter en duidelijker.

Transistor ontwerp versie 4: grote duidelijke logos

De taalinformatie liet ik ook zakken zodat die in het midden van het schermpje komt te staan. Duidelijker kan niet.

Transistor startscherm: taalkeuze in het midden

De infoknop is er ondertussen ook bijgekomen op een minder opvallende plaats: wie de knop nodig heeft zal hem ongetwijfeld wel vinden. (Wie op de infoknop klikt, krijgt minder belangrijke informatie te zien over Transistor, samen met een regio-instelling.)

Volumeregelaars

Misschien heb je gemerkt dat Transistor geen volumeregelaar heeft. Dat was een bewuste keuze: wie een iPhone heeft, weet hoe je het volume kan wijzigen door de knoppen aan de zijkant van het toestel te gebruiken. Het leek ons dan ook onnodig om een aparte volumeregelaar toe te voegen aan Transistor zelf. Je kan gerust die van de iPhone gebruiken.

Testen maar!

Transistor had een duidelijke vorm gekregen en werkte goed. Tijdens de weken die volgden op het laatste ontwerp heb ik vooral veel mensen rondom me aangeklampt, hen mijn iPhone in de handen geduwd en hen gevraagd om Transistor (in bèta) eens te testen. Ondertussen hield ik hen natuurlijk nauwlettend in de gaten. Noem het gerust een soort van usabilitytest met onwetende testpersonen.

De resultaten waren heel gunstig. Eén probleempje kwam wel telkens opnieuw naar voren: minstens één op de twee gebruikers had niet meteen het navigatiewiel ontdekt en probeerde met de vingers op de frequentieband te duwen om zo te scrollen doorheen de radiozenders.

Dat was een schok. Vanaf dag 1 hadden we het idee opgevat om het navigatiewiel te gebruiken. We waren er ook van overtuigd dat het een leuke en goede manier van navigeren zou zijn. En nu we dichtbij de release van Transistor stonden, bleken mijn testgebruikers het wiel niet eens op te merken!

Terug naar Photoshop

De oplossing lag in het probleem: de testgebruikers merkten het wiel niet meteen op, dus moest het wiel duidelijker zichtbaar worden. Door het contrast te verhogen tussen de achtergrond en het wiel was het effect op nieuwe testpersonen heel erg positief.

Transistor: meer contrast tussen wiel en achtergrond

Even terzijde: hoe feller de schermhelderheid van een iPhone is ingesteld, hoe lichter de kleuren en hoe duidelijker het contrast wordt. Voor onze testpersonen gebruikte ik altijd een iPhone waarvan de schermhelderheid op het minimum was ingesteld. Als de testpersonen op dat toestel het wiel opmerkten, dan zouden ze het zeker opmerken bij meer heldere iPhones.

Niets aan het toeval overlaten

Eén enkele testpersoon had toch nog niet meteen door dat het navigatiewiel gebruikt moest worden om door de zenders te navigeren. Toen hebben we beslist om voor alle duidelijkheid een kleine instructie te geven wanneer je Transistor voor de eerste maal opstart:

Eerste keer? Draai het wiel om naar je favoriete radiostations te tunen.

Ik geef toe dat ik er niet helemaal tevreden over ben: het bericht is een symbolische bekentenis: “Het is niet duidelijk dus geven we maar een instructie.” Het is ergens een toegeving van slecht ontwerp. Want als Transistor heel erg duidelijk was geweest, dan was de bovenstaande instructie overbodig geweest.

Leren uit de reacties

Maar goed, het bericht is er nu en Transistor is al een tijdje gratis beschikbaar in de iTunes App Store. Met succes trouwens! Ondertussen leer ik heel erg veel uit de reacties van de gebruikers. Ik kijk ook nauwlettend hoe ze met het ontwerp omgaan. Die feedback zal helpen om het ontwerp van een volgende versie nog beter te maken.

Voor mezelf was het ontwerpen van Transistor alvast een heel erg leuke ervaring. Programmeer je zelf een iPhone app en ben je nog op zoek naar een designer? Laat dan zeker wat van je horen!

9 reacties


view comments

Transistor: radio op de iPhone

21 Nov 2009

Tussen klantopdrachten en freelancewerk door werkten David en ik de afgelopen maanden aan Transistor, onze eerste iPhone applicatie. David als developer, en ik als ontwerper.

transistor iphone app screenshot

Transistor is een eenvoudige radio app geworden waarmee je naar de meestbeluisterde Belgische radiozenders kan tunen op je iPhone en iPod Touch. Het programma is vanaf nu gratis beschikbaar in de iTunes App Store. Transistor is verkrijgbaar in het Nederlands, Frans en Engels en je kan er de onderstaande radiozenders mee streamen.

Nederlandstalige radiozenders:

  • Radio 1
  • Radio 2
  • Studio Brussel
  • Klara
  • MNM
  • Nostalgie
  • Top Radio
  • Be One

Franstalige radiozenders

  • La Première
  • Viva Cité
  • Musiq3
  • Classic 21
  • Pure FM
  • Nostalgie
  • NRJ
  • Fun Radio

Heb je dus zo’n fancy gsm of iPod, laat dan zeker eens weten wat je er van vindt. Het ontwerpen van de user interface van zo’n iPhone programmaatje was trouwens een erg leuke ervaring. Maar daar vertel ik je later wel eens meer over. En nu downloaden maar!

6 reacties


Over logo TheHotSeat 

foto Thomas Byttebier pijltje TheHotSeat is Thomas Byttebier, freelance webdesigner en user interface designer.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij. @bytte op Twitter.

RSS Feed TheHotSeatLaatste blog posts

Laatste reacties

Categorieën

AlleExpressionEngineiPhoneTransistorMarketingSEOOntwerpTypografieOntwikkelingjQueryPHPZend FrameworkOpiniesOverigePhotoshopWebomgeving