Colorwheel. All text to paths because it looks pixelated in FF and FF can't handle CCS letter-spacing-property on SVG's

Hey hallo...ik ben Raymond Uphoff

Ik ben freelance designer en ik ontwerp intuïtieve User Interfaces. Hierbij zoek ik balans tussen functie en vorm. Ik vind het een gaaf proces om vanuit niets iets te creëren. De eindgebruiker mag natuurlijk niet in het ontwerpproces ontbreken.

Skills

Of het nou gaat om Apps, websites of webapplicaties, ik ben betrokken vanaf het concept tot en met de uitvoering. Daarnaast ben ik een self-taught guy als het om Front-end gaat. Dit is vooral handig omdat ik tijdens het designen rekening houd wat realiseerbaar is.

User Experience
Design

  • Interaction Design
  • Prototyping
  • Concepting

User Interface
Design

  • Wireframing
  • Mockups
  • Pixelperfect GUI
< />

Design &
Frontend

  • Visual Design
  • Ervaring Front-end
  • Responsive Design

Details skills

  • UI-/UX-design:
    De gebruiker moet niet hoeven uitvogelen wat het doel van een website of webapp is. In één oogopslag moet duidelijk zijn wat de functie van deze website of applicaties is. Dit bereik ik door bijvoorbeeld visuele hiërarchie, heldere call-to-action, witruimte en contrast. Ook principes als User Centered Design en Gestalt-theorie spelen hierbij een belangrijke rol. Het gebruik van een Grid-system in zowel design-tools als HTML en CSS mag niet ontbreken*.
    Het puzzelwerk dat om de hoek komt kijken om de workflow uit te dokteren, vind ik uitdagend. Opleveren van wireframes of flowcharts aan development-team? Geen probleem.
  • Design-gereedschap:
    OmniGraffle, Photoshop CS6, Illustrator CS6, Flash CS2, Director MX, Pixelmator, Inkscape, Lightroom 3, Première Pro CS, ImageOptim/ ImageAlpha** (compressors + optimizer) en FontExplorer X Pro
  • Ervaring met Front-end***:
    Ik heb ervaring met xHTML/ HTML5, CSS2 & CSS3, LESS, CSS-spriting, jQuery, un petit plain JavaScript, SVG, SMIL, Media Queries en CSS-frameworks. Dit is vooral handig om als designer een vertaalslag te kunnen maken. Onderbewust denk je dan toch na hoe een developer het kan implementeren. Dit zorgt voor makkelijker realiseerbare ontwerpen. Ik ben goed in staat om een responsive wireframes of prototypes op te leveren.
  • Overigen:
    XML, Ajax, MODx Revolution & Drupal 7 CMS, wat ActionScript en Lingo, blauwe maandag aan PHP, OS X, Windows, FTP, SSH en Networking
  • * GuideGuide is een super handige tool om een grid in Photoshop de generen. Ik kan gewoon niet meer zonder.
    ** ImageOptim en ImageAlpha zijn progs voor OS X om je afbeeldingen verder te comprimeren. Photoshop voert zijn taak beroert uit als het om comprimeren gaat.
    *** Ik ben niet als dedicated front-end'er werkzaam. Ik vind dat elke designer basiskennis van HTML, CSS en een library als bijvoorbeeld jQuery zou moeten hebben.

Responsive Twitter-driven webapp

Input

Ontwikkel een applicatie die zowel op smart-devices als desktops te gebruiken is. De uitstraling moest fris anders, en 'techie' overkomen. Foto's moeten een prominente rol gaan innemen.

Output

De uitdaging was om de applicatie zo te ontwikkelen dat de gebruiker weinig handelingen hoeft te verrichten om de auto op uiterlijk te kunnen beoordelen. Ik kwam uit op een tiled-layout. Zo kunnen foto's meer schermruimte innemen. Ik wilde het op het speelse uiterlijk van Twitter laten aansluiten.

Desktop-versie Responsive twitter-driven webapplicatie
iPad mini Landscape webapp
iPad mini Portrait Responsive webapplicatie

Medewerkersportaal 'S Heeren Loo

Input

De opdrachtgever stelde UX centraal. De te ontwerpen interface moest jaren mee kunnen. Wel zou het leuk zijn als flat design meegenomen zou kunnen worden met webfonts.

Output

Ik ben taken gaan prioriteren. Aan de hand van een persona heb ik bekeken waar haar behoefte ligt. Bij de mobiele versie zijn de buttons groot genoeg om met de duim te bedienen. Dit wordt wel eens over het hoofd gezien.

iPhone schuin: webapplicatie medewerkersportaal
iPhone recht: webapplicatie medewerkersportaal
Desktop browser: website
wireframe portrait-modus smartphone: webapp

Concept website CustomerConnect

Input

“Onze 10 jaar oude website heel snel vernieuwd worden! Raymond, je hebt de volledige vrijheid. Je kan hier tussen de bedrijven door aan werken.”

Output

In Illustrator ben ik met swirl-achtige vormen gaan expirementeren. Ik had een idee dat de interface niet hoekig maar rondingen moest krijgen. Ook wilde ik het ontwerp innovativiteit laten uitstralen. Ik wilde het anders laten voelen dan wat in 2011 de trend was. Ik heb rood en blauw, de huiskleuren van de dochterondernemingen, bij elkaar gebracht omdat dat de ontwikkelde producten ook met elkaar zijn verbonden.

ontwerp website CustomerConnect; homepage
ontwerp website CustomerConnect; blogpagina
ontwerp website; contactpagina

Reserveringsysteem Opel Nederland

Input

“Raymond, we moeten een product neerzetten dat de concurrent uit het veld slaat.” Na het bekijken van de webapplicatie van de concurrent was ik er snel uit dat dat niet zo moeilijk zou worden. Het was louter een verzameling van inputs, checkboxes en een kalender. Mijn voorstel was om focus in te brengen en duidelijke rangschikking van items.

Output

Luke Wroblewski's boek 'Web Form Design: Filling in the Blanks' diende als fundering voor dit lange webformulier. Stappen geven aan hoever de gebruiker in het gehele proces is. Content die wellicht niet van toepassing is, wordt in eerste instantie weggefilterd om de gebruiker zo min mogelijk te intimideren.

Reserveringsysteem webapplicatie opel Nederland, flat design

Het puzzelwerk om het voor de gebruiker zo laagdrempelig mogelijk te maken, vond ik een erg leuk en uitdagend proces. Graag had ik willen zien hoe dit webformulier, wat het oneerbiedig voor mezelf toch is, uit een gebruikerstest zou komen. User Centered Design is iets waar ik echt in geloof.

Webshop & webapplicatie Brezan

Input

“Mannen! We zijn gevraagd om met de klant mee te denken over nieuwe oplossingen.” Widgets, gadgets, mobile, webapp en apps paseerde de revue. Uiteindelijk bleef een lijst met een klein dozijn aan ideeën over. “Raymond, maak hier even wat uitwerkingen van!”

Output

Nou ja, dat 'even' is natuurlijk nooit 'even'. In een kort tijdsbestek heb ik over functionaliteit, uiterlijk, interactie en flow nagedacht en het vervolgens uitgewerkt. Ik heb gekozen om specifieke 'states' uit te werken. Voor de webshop is onder andere gebruikerswaardering in verwerkt. Het is idee om de webshop responsive te maken: de content schaalt dus van desktop naar tablet.

Webshop desktop browser, lijstpagina
Webshop browser, detailpagina
Webshop iPad in Safari
locator webapp voor smartphone en tablet

Concept homepage TomTom

Input

“Geef jouw interpretatie voor Tom Tom's homepage en onderbouw deze.”

Output

Ik ben voor een oplossing gegaan waar de navigatie-systemen prominent aanwezig zijn. Pijlen zetten de producten visueel bij en de achtergrond versterkt het gebruik van de navigatiesystemen.

Concept homepage TomTom

Website CustomerConnect

Input

De toenmalige corporate website moest echt nodig op de schop. Deze werkte alleen nog fatsoenlijk in IE6...OMG! Marketing en de directeur zagen mijn flat design-idee wel zitten. Stiekem wilde ik ook eens met flat design experimenteren.

Output

Eerder had ik al het nieuwe logo ontworpen. Het kleurenpalet stond al vast. Een cyaan-achtige kleur heb ik toegevoegd om het wat frisser / hipper te maken. Het ontwerp moest clean en focussed worden. Iconen heb ik in Illustrator ontworpen, bandenspoor als knipoog naar de sector en genoeg witruimte. I love whitespace! Onderwater is, met behulp van LESS, een gemodificeerde versie van Twitter Bootstrap gebruikt.

Website CustomerConnect, homepage, flat-design, Respsonsive Webdesign
Website CustomerConnect, detailpagina, flat-design, Respsonsive Webdesign
Website CustomerConnect op iPhone m.b.v. media queries

Re-design website iPROFS

Input

“Mannen (3 designers), ontwerp een nieuwe look 'n feel voor iPROFS.nl waar duidelijk wordt wat wij doen, oplossingen die wij aanbieden, dat het om mensen gaat en er moeten verwijzingen naar cases in zitten. Full-service en/of beste Java-huis moet naar voren komen(?). Het moet wat meer schwung hebben!”

Output

Eerst zijn wij designers samen gaan brainstormen over o.a. navigatie-structuur, toon en uitvoering. Ik heb de keuze gemaakt om op full-service te focussen met Java als kern. Één duidelijke focus naar buiten uitdragen vond ik erg belangrijk, anders wordt het vlees noch vis. Ik ben de richting van minder content, meer witruimte, grote fonts en contrastrijk ontwerp gegaan. Een diagram op de homepage visualiseert de activiteiten van iPROFS, die tevens als navigatie fungeert.

Re-design website, homepage
re-design website, landingspage front-end development
re-design website, landingspage CMS'en & Portals

Poster en flyer party Madplanet

Input

Via via kwam deze klus op mijn pad. Ik dacht “leuk, eens wat anders!” De opdrachtgever: “Ik wil graag een poster en flyer die de fifties uitstraalt en mag best wat sexy zijn.”

Output

Na wat research te hebben gedaan hoe fifties reclame eruit ziet, kwam ik tot volgende oplossing: veel tekst in hoofdletters, kalligrafie lettertypes, uitgebeten foto's, beige / geel en flets groen. Klant tevreden, mooi zo!

print, poster en flyer houseparty

Whoami

Raymond Uphoff aka myradon - Freelance Visual UI Designer

Sinds 2002 ben ik al met het web bezig. Het begon voor mij met Macromedia Dreamweaver en Photoshop. Hiermee maakte ik mijn eerste website. Dat was de tijd dat je nog zo'n 7 seconden moest wachten om een pagina via een snelle internetverbinding van 128KBps binnen te halen.

Zoals velen binnen dit vakgebied, ben ik autodidact. Visual / UI-design en Front-end heb ik met behulp van een boek, tutorial of grote vriend Google geleerd. Met de studie Communicatie en Multimedia Design heb ik vooral conceptueel leren denken. Toen waren het vooral nevenactiviteiten. Zo'n 6 jaar geleden heb ik een carrièreswitch gemaakt. En sinds kort ben ik als freelancer bezig.

Beschikbaarheid

Heeft u een idee voor een App op een iPhone of heeft uw webshop een nieuw jasje nodig? Ik ga graag voor u aan de slag! Het kost me wel een paar dagen om up and running te zijn.

Hoe en waar ben ik te vinden?

john.doe@bogus.nl