Find Your Own Way To Design
Meet two designers and you’ll find two different points of view on how to design. There are so many books telling us the right way to design, how the process should look, but is there one perfect and timeless approach suited for everyone? I doubt it. In MING Shanghai we have designers from all over the world, we have different skin tones, we learned different cultures, we eat different foods, we listen to different kinds of music, we use different design tools. Does a standard design method really matter?
We recently completed a website project for Bloc, an agency representing photographers, stylists and illustrators here in China. We really enjoyed collaborating with them — building their site to best represent their collective of creative talent.
I want to share the stories behind this process. The tools, the process, decision making and design principles.
01 Design Tools
I asked 3 of our designers what’s kind of tools they usually use. See if you can spot the difference…Every designer has their own way to make things happen, and we love the diversity.
This is a Slack channel we use to share thoughts, inspirations, gossip. We ask people if they’ve seen their wallet and cellphone somewhere, we share if there is an interesting article talking about why wireframes are dead. We all have different points of views, but this is embraced and celebrated.
While working on Bloc, we sought inspiration and validation from our colleagues. We shared early concepts on Slack, got feedback, got critiqued, gave critique, argued, made up and sent a lot of stupid stickers.
02 Design Process
For BLOC, we did IxD (interaction design) at the beginning. This means we made Mi-Fi prototypes before wireframes — allowing us to explore without limitations.
Mi-fi prototyping is a stage between low-fi prototype (wireframes) and hi-fi prototype (final UI with user flows). It shows how UI components and contents connect with each other, which lowers the cost of failure and increase the speed of early stage communication. It’s also a quite important approach to let the clients better understand digital design, showing them how we work differently from traditional design agencies.
Then another round of IxD design after we finish UI, it’s more about micro interactions — such as hover status. These little details are what make things awesome.
The difference between traditional design and digital design is all about dynamic interactions and designs. We create an open space then we let people come and think about what they want to do instead of telling them what to do, because our role is to engage but not persuade and that’s the beauty of interaction design. So a mood board or storyboard may work for a branding project but not for a digital project because we need to let people try and feel the whole experience for themselves.
This is the first mi-fi prototype we did for Bloc, as you can see, the content is just sample text and images. What is important is that a fair overall impression is created, how the subtle movement curves match the visual tones. When you scroll up, the content blocks show up as a sequence with subtly different speeds, the sub-header tab sticks to the top when you stay in the feed, disappearing when you leave the section. The navigation on the left side tells you where you are right now and how many sections below.
Only through seeing design in motion can you truly understand digital design.
03 Decision Making
Who are we designing for? The client? Of course, but not only our client, we care about usability, performance, implementation difficulty, back-end efforts, we care about everything, and we strongly believe that sustainable design will show its value throughout the lifespan of the product.
We made a solution matrix, listed every detail that we prioritized and tried to compare them with a holistic perspective. We want to help our client has a clear view of everything, find out their priorities and make the best solution for them and their clients. In this project, we provided several layouts, listed the difficulty of implementation, the effort for editors, etc.
This approach helps us to make rational decisions with all different stakeholders considered for.
04 Design Principles
We use minimal not only for visual, for us, it’s more about a philosophy to deal with such a messy world. In this project, we needed to show hundreds of artists’ work, what’s the best way to keep a balance of it? — Minimal, using no style to support all the styles.
Minimal design is also good for performance and implement, we don’t want to design another fancy website which you need 5 minutes to load and make your computer scream. Imagine you are at a meetup, you want to show your website to some potential clients, and you open your website on your phone, the loading bar stops at 15%, you feel awkward then you drink another beer, your potential clients pretending nothing happened. If you’re lucky, they are nice and patient (so probably not then). Anyway, finally it’s loaded and it’s not responsive. : )
So, that’s our behind the scenes for this project. We faced lots of challenges, our client is from a strong creative background themselves. The vibes are quite different from our geeky digital style so you can imagine how difficult for us to find agreement on design decisions. But it happens all the time, and it’s our mission to build the digital bridge between art and technology. Digital is always evolving and so must we. We enjoy the process and strive to figure out how to adapt to rapid changes in the real world and design in a dynamic condition. We have strong skills, we think deeply, and we don’t want to just follow the trend and build something without its own personality. We find our own way to design, how about you?