Let's Make it Unique.
Let's create somthing NEW, somthing POETIC, somthing CHARMING, let's make it UNIQUE.
CLOUD - a journey of creation.
Interactive experimental website that explore the process of crafting a unique design experience.
I would like to share with you my creative process and my insights on the ways to design a unique web experience. The tools that are available today offer us the freedom to express, visualize and bring our stories to life.
My goal here is to inspire other creators and UX designers to create unique staff and explore the ways to build inspirational web experiences.
While sharing with you my ideas and UX design perceptions, I will also offer you examples of the tools I use and add links to various websites that encourage and inspire creative design thinking.
Enjoy your journey :)
I'm
Eyal Gershon
UX Explorer
Our Journey starts with a BLANK page and plenty of IDEAS in mind, but first let's define the brief.
The Brief
Create an interactive story
Build an online web page that tell a story and interact with your users with a design that they can relate to. Tell your story using interactive elements text and sound, create experience that will deliver your story in a unique new way.
Once you know which message you want to deliver, you can start your creative journey.
Brainstorming
Let's start by blowing away design ideas that correlate with your message. Start with creating a folder with plantey of references and sketches of visuals, fonts, colors and different examples of UX languge.
Than, arrange the content from the folder on a big blank page, this is your inspiration board. The inspration board can be arranged with different sections like: Colors, Visuals, Fonts, Meessaging, UX languuge, Behaviour, Structre etc..
You can build your inspartion board by brainstorming with other people, brainwrite and sketching. It's very important to stretch all boundaries, defer judgment or criticism, encourage weird, eccentric and wild terms of concepts.
I also encourage you to be visual and try to sketch very fast while jumping from one idea to another.
Once good design ideas are formed and listed, it’s time to research and understand the different concepts that correlates with your story. It is necessary to prioritize them to reach the best experience, give each idea a score and measure its weaknesses and advantages, you cut down into the best, most practical and innovative ones.
Know your users
Who are your users? let's give them some love and draw some user persona for all the kind of users that would want to interact with your story. Check your ideas from the eyes of your users, try to match ideas to users and see if it works.
I use different products and tools to uplift the brainstorming process:
Thesaurus - helps you dive into your concept. Make a list of words associated with your main concept, type them and search for the different semantic fields. you will be amaze how much this is usefull.
There also a lot of online brainstorming tools such as MindMap, Bubbl.us, Popplet, Cogle, IdeaBoardz.
However, I think simplest and most efficient tool to use is a Power Point presentation or a shared Google Slide presentation
full with slides containing different screenshots, Written ideas, photos of sketches, and even voice recorded ideas.
For creating a User Persona, you can simply use a template from
justinmind or use online tools like Craft and Akoonu.
Starting from
Scratch
Adding creativity
to your concept
Once we have the first draft of the concept, it's time to travel away with it to different disciplines and search for the WOW efect that will bring your concept to a new level of creation.
Now, It's the time to evolve your concept and connect it better with your story, while searching for the WOW effect that will catch your users attention.
What is the 'WOW effect'?
In one word WOW effect is MAGIC, it could be anything that will uplift your story and will exite your users, it also should be in harmony with your concept and story, for example if your story is dealing with humer your WOW effect should be funny.
Use design, interaction, motion and sound to create the appropiate WOW efect.
Travelling away with your concept
Finding the appropiate WOW efect could be hard. One way that I can share with you that hopefully will help you find the right WOW efect is to travell away with your story to different fields of intrest, different styles, different design languges, different interactions, and than dress your stroy with a different 'castum' untill you find a match!
Start with exploring the closest fields to your story and slowly slowly start moving to more distance fields. Search for the something extra, that go beyond pure functionality - a unique, fun and cool experience that correlates with your stroy concept.
The idea is to rethink common practice. For example, is vertical scrolling is the best way to tell your story? How can the user interact and be part of his experience? How and where can we add gamification elements? How can we express the product unique personality? How to express that personality through UX writing? and enhance the experience using animation and sound effects?
Ask yourself questions ragarding the website behavior, value, structre and meaning.
Back to your value
Once a posible match is found, a uniqe interaction that can fit, a design languge that can tell your story, start dress your story with the WOW efect and figure out how to rich an HARMONY with your story.
Below you can find some example for website that WOW me:
...
There also a lot of online visual Inspiration tools I use such as: Pinterest, Dribbble, Muzli, theFWA, Behance, Awwwards, FFFFound (not exist anymore, but you can just add ‘FFFFound’ to your Google search).
Telling the Story
While telling your story EVERYTHING in your website should be a part of it, usefull way is to break your story to Chapters, this will help you build your website structre, 'Chapter in your story' = 'Section in your website'.
An Online Story-boarding is different from writing a script for a play or a book, the main difference is that in an online story there are more possibilities of navigation, more senarios the user can navigate throw the story,
That means that while creating our online story we need to decide how flexible we want our story to be. Usefull way is to breake your story to chapters and than decide how to present your chapters, one after another or to allow the user deside how to navigate between the different chapthers.
Sections are the building blocks of a website and chapters are the building blocks of a story, now you can eseily decide that each chapter will be a section in your wesite.
The Intro
Your wesite introdction should reflect your website massage and to catch the attantion of the wanted users, the users that you want to tell your story to.
Storyboarding
Tell your story again and again untill it accurate, every time you tell it focus on diferent angel of your story, and improve the harmony. Start with the skelaton of your story and than move to the content than to the motion of your elements than to interaction than to sound and than back again.
User Journey
Now let's tell your story again, but this time you are your user. you are exploring your story from the user point of view.
Here some website that will help you story board your story and mockup your flow:
Mocking up & wireframing tools: Balsamic, ...
Know your way arround
There are a lot of website builders and tools out there that will help you build a website,
each tool have it's own unique capabilities. Explore the tools out there to find the wanted behaviour and to KNOW your way arround.
The thing is that once you figure out what is the wanted behavior for your website it's not always easy to achive it with the exiting tools. sometimes you will need to combine different tools or even to use a frontend developer to build your online story.
For example this website was buit throw a combination of Wix template containing an iFrame elements. The iFrame content is an HTML5 canvas that was created using Adobe Animate CC, and allow you to create animations and interaction.
The Low- Budget Approch
The common approch when you want to build an interactive story is to plan it than mock it up and than excute it using outsource company that will build it for you.
The approch that presented in this section is aimimg for low budget projects that can't appored to outsource the project to frontend development company, so for all the UX out there that want to express them selves this is for you.
So instead of out source the project, do it yourself, learn the places that you can add magic using the exiting tools, learn to combine them and create somthing Unique all by yourself.
That means that somtimes you will need to change a bit the original plan for your website so it can fit your knowledge in the diffrent tools.
Show it.
Do staff, Get Feedback, Do more Staff
Do it expermental, do it MVP, it's better to do it smaller and to lunch it faster, that way you let your benchmark be your users feedback, get out, show it!
Once it's good, and you are happy with your work, it's time to present it to the world, start promotte it in social media and UX groups, send it to competition and t 'site of the day' websites like the FWA(favorite world awards), awwwrds...
and don't forget to send me also a link:) I will try to help.