Web design – Karsten Rowe • Director of Product Design

Words 158

Designers love subtle cues, because subtlety is one of the traits of sophisticated design. But web users are in a hurry and don’t care too much for subtlety.

Previously we were able to design and hand over wireframes, but now with heightened interactivity in the mix, that’s no longer effective. Wireframing is dying – Prototyping is the way forward. Handing off design specs as a wireframe just isn’t enough anymore.

Pictures 115

My first ever appearance on a podcast, Code Optional – the trials and tribulations of building software. Hugely embarrassing but a lot of fun. Episode 7: Our first ever guest, designing remotely – Oct 27, 2014.

Workflow 28

We’ve recently discovered two new design prototyping tools – Marvel and Invision. Both offer similar functionality and make it super simple to create interactive prototypes, ready to share and gather feedback.

Workflow 24

Doing my best to Learn Sketch 3. We created Sketch specifically for designing interfaces, websites, icons …

Resource 06

A bootstrapped WordPress project framework. The aim was to create a simple, re-useable WordPress theme. Bootstrapped LESS integrated stylesheets – commented, variables, mixins, retina ready, minified. Typekit fonts. Mobile friendly design. View on GitHub Please feel free to download and use in your own projects.

Words 137

The first time experience with an interface is crucial. The state in which nothing yet has occurred should not be a blank canvas, it should provide the user with direction and guidance to get up to speed. http://emptystat.es/

Project 14: Rochen Hosting

Archiving another super old project that never really saw the light of day.

Project 13: Flagship Housing

Archiving another very old project. View Dribbble project

Resource 05

A simple, tiled wallboard framework. A basic one-page tiled wallboard framework, ideal for showcasing thumbnail images with underbar menu. View live website View on GitHub

Project 12: CPD Store

Archiving another very old project.

Project 10: ChapterOne

An old branding and web project that I wanted to share before archiving forever.

Pictures 93

Continuing my New year tidy up. Archive all old projects before the end of January – job done.

Project 09: karstenrowe.com logo wallboard

The brief was to create a scaleable, responsive platform to showcase recent branding projects. A bootstrapped solution can be found here: https://karstenrowe.com/projects/logo-wallboard/. Visit the website

Pictures 92

Working hard archiving old projects.

Pictures 91

Improving www.nutshell.com experience – a fixed header on a longer page makes sense.

Pictures 89

Trying to get organised – found some very old work.

Pictures 88

It’s a little rough round the edges, but I’ve posted some new logo design work. https://karstenrowe.com/projects/logo-wallboard/

Pictures 87

Continuously striving for improvement – check out @Nutshell progress: www.dribbble.com/karstenrowe/projects/nutshell.

Pictures 86

Why we’re currently implementing a more responsive design at Nutshell. Poor use of space on a large monitor: The content is hidden on a small monitor Tiny text size, zooming, panning on a mobile device: View a one minute demo on YouTube.

Workflow 20

Three blogs that I regularly visit: Creative Review Advertising, design and visual culture. Little Big Details Your daily dose of design inspiration. Signal vs. Noise A publication about the web by 37signals.

Pictures 81

Fine-tuning the mobile layout for www.karstenrowe.com.

Resource 04

A one-page web project framework. A simple aim; create a one page web project template – an easily customisable, flexible platform to showcase your latest work. Bootstrapped LESS integrated stylesheets – commented, variables, mixins, retina ready, minified. jQuery & Google Web fonts ready. Mobile friendly design. View live website View on GitHub Please feel free to download and use in yourContinue reading “Resource 04”

Pictures 71

Gmail is renowned for its minimal UI. An example of removing surplus pixels, where possible.

Workflow 10

A simple website to showcase new design work. View work sample By no means a ground-breaking or innovative design and very much a work in progress, but having a point of reference is important.

Pictures 67

Square Space on dribbble. I’m not sure what else to say but a showcase of inspiring work.

Words 115

Do you label a button Submit or Save or Update or New or Create? That’s copywriting. Do you write three sentences or five? Do you explain with general examples or with details? Do you label content New or Updated or Recently Updated or Modified? All of this matters.

Project 07: karstenrowe.com

A brief insight into karstenrowe.com re-branding and website project. Browse the design project

Workflow 05

GitHub – making intelligent version control less painful for design folk like me.

Pictures 62

[youtube=http://www.youtube.com/watch?v=1A9AoCJTuVU&w=480&h=360] An incremental improvement – a quick demonstration of keyboard navigation and tab :focus on www.karstenrowe.com.

Words 110

Think about your customers and think about what those buttons and words mean to them. Don’t use acronyms or words that most people don’t understand. Don’t use internal lingo. Don’t sound like an engineer talking to another engineer. Keep it short and sweet. Say what you need to and no more.

Words 109

Build predictable websites. Design what the user expects. Do not try to build the next big web feature unless its absolutely a better, more intuitive way to complete an old task.

Words 108

Always anticipate that a user may not use your website the way you intend. Predict how they might misuse the website, and don’t let the consequences of misuse be undesirable.

Words 105

Good writing is good design. It’s a rare exception where words don’t accompany design. Icons with names, form fields with examples, buttons with labels, step by step instructions in a process, a clear explanation of your refund policy. These are all interface design.

Pictures 59

Adding a few snaps to the NJS Equine Therapy logo & web design project.

Project 06: NJS Equine Therapy

A brief insight into the NJS Equine Therapy branding and website project. Visit the website Browse the design project

Words 97

Users should never have to guess if something is clickable or not.

Resource 03

A multi-page skeleton web project framework. A simple aim; create a basic, yet expansive web project template that you can download, use and deploy quickly. Bootstrapped LESS integrated stylesheets – commented, variables, mixins, retina ready, minified. jQuery & Google Web fonts ready. Mobile friendly design. View live website View on GitHub Please feel free to download and use in yourContinue reading “Resource 03”

Workflow 03

At Nutshell we use HipChat daily, resulting in CloudApp becoming a fundamental tool. The Auto-upload screenshot preference which I initially found frustrating has become a convenient way to quickly share content – visuals & text. It also serves as a running history of UI inspiration.