“Engaging” could easily be called “the word of 2016” in the digital world!
Everything you did, as a website owner, a website developer or a web designer in Toronto has been oriented towards (and will continue to be in 2017, too) getting your audience engaged, right?
Which have been your most efficient “tools” for keeping with your own audience “engaged”?
“Video” and “Visual storytelling!” Bravo! Correct answer!
It's been a while since Adobe allowed you to combine these two powers and to boost all your content marketing plans with the power of video-storytelling.
It brought you Spark Video: the app that helped you engage with your users, inspire them and motivate them through customized animated videos. They used to “tell” your story and therefore to pull your users into the world you created for them and to get your message conveyed to them far more easily.
Such powerful visual aimed at adding meaning and triggering emotions!
Now Adobe strikes again!
It announced on their blog a major update to Spark Video: enabling users to craft beautiful, powerful video clips (that will gradually replace the now “old” animated videos).
Say “Hello!” to a new era of video-storytelling!
Say “Hello!” to a new wave of traffic on your website and not just any type of traffic, but one made of loyal users, “seduced” by and committed to your brand thanks to "the power of video clips”.
Before we go on with the step-by-step guide on how you get to create video-clips in Spark Video, let's sum up, very briefly, what you've been able to create and to share with this app up to now (when it got seriously upgraded):
Animated videos featuring:
icons
text
narration
In a nutshell: you've been able to breathe life into your animated videos by adding all the features specific to immersive, interactive visual storytelling.
Now here's how you can flesh out stunning video-clips that will help you “lure” new users, bond with your users, engage them and keep them engaged to your brand, using Spark Video:
1. Add Your Video Clips Faster Than You Say “Spark”
Adding a new video clip is nothing but a sequence of two quick steps:
1. you first add a slide to your Spark Video projects
2. you browse through the video collection on your device and pick your target one
A way too tempting feature: as compared to “standard” video editors, using Spark Video you get to cut your video into a series of slides varying in duration times.
2. Make a New Point Over The Same Video Clip
How? Nice and easy: you simply click on the “continue” button and select a new slide, then you coat it with your visually-pleasing icon, with your compelling text and with narration and it's now that you can adjust the volume, too.
3. Trim It To Your Liking
Get the most out of Spark Video's one-touch trimming feature for customizing precisely those points where your video clip starts and ends.
4. Breathe Life Into Your Video Clip With Narration
It's now easier than ever to add voices to your video project: just tap on the record button and start telling your story to your audience. Next, with another quick tap you get to align the narration's length to the video's length.
Can you already predict your brighter future as Toronto web designer who's been “slaving away” to constantly come up with interactive and engaging web design? A type of design that should “tell” a meaningful story, one that should trigger emotions in the audience?
5. Craft The Desired Mood Through Music
“What possibly could be so engaging about a video clip with no music?” your users might ask themselves.
Therefore, add the background music, too, the one that will help you craft the right mood for your video's watchers.
How? Quick and easy: add either your preferred track saved on your device or pick one of the app's suggestions!
If you really want to go deeper with your video clip's customization through music, get this whole process even more refined: use Spark Video's mini-feature which allows you to highlight and therefore to draw your audience's attention to key moments of sound from your video clip.
Therefore, instead of getting overwhelmed by data forecasting VIDEO-s “dictatorship” in the digital world, you'd better embrace the future of the video: video clips!
Here's how this video-related data looks like now, at the end of 2016:
it's been proven that if you “upgrade” your landing page with a video your conversion rate will increase by 80%
by 2019 video will represent up to 80% of global Internet traffic
data proves that in just one month over 3 million small businesses shared a video on their Facebook accounts
So, how about taking the new Spark Video for a “test drive”?
Have some fun, try out all its new features and put together some sample videos clips so that you'll learn to master the upgraded Spark Video and to get the most out of its improved features by the time it becomes a huge trend in web design and development in 2017.
Adrian Ababei / Dec 22'2016
Will you be a superhero or a villain? What are you going to do with all those superpowers that UX invests you with?
Will you be a superhero willing to build trust and to nourish long term relationships with his/her users or a manipulative villain driven by his urge to get his numbers up at all costs?
UX invests you with so much power! It practically reveals to you all the valuable cognitive psychological biases, all the mechanisms to use for triggering certain emotions in your customers (pride, greed, anger, envy etc.) and for manipulating them to act in certain ways.
It's this power that can either help you gain success or ruin you (you sooner or letter)!
A solid understanding of user psychology, when used the right way, will help you "perfect" your visitor's journey on your website. It gives you the ideal resources for making this journey as logical, intuitive, pleasant and meaningful as possible. Good UX leads to happy customers first, then to loyal customers!
A solid understanding of user psychology, when used the “bad” way will help you deceive your visitors, through certain tricks applied to your interface. It will help you influence them to carry out certain actions that are beneficial exclusively for your business: purchasing, subscribing, installing your software on their devices, revealing the details of their credit cards etc.
In this respect, here are some of the most “popular” manipulative design practices that have taken over the internet (being widely used even by some of the most influential brands, too) and that we advise you to stay away from (“Better safe than sorry!”):
1. The Disguised Ads
You click on what looks like “genuine” copy and "Boom!": a commercial pops up on your screen or (and this is the really bad scenario) a software starts to download on your device!
Does this sound familiar to you? Have you been there already? Have you visited that website since the “incident”?
Well, if you've already been a “victim” yourself, then you (should) have even more reasons to empathize with your own customers: don't use disguised ads on your website! It will only grant you (really) short term gains, but you'll lose a potentially loyal customer (which is gold) and credibility.
2. The Roach Motel
Here is another tricky web design practice that's widely used by web/apps owners, accepted and “perceived” as “an innocent little scam” (pick a web developer at random and he/she will deny that the "roach motel" might be considered as a “truly” deceiving practice). When it fact it's nothing but a skillfully crafted means to trick and to retain users.
You convince them to subscribe to your newsletter or to sign up for your your software free trial, then you turn the whole process of unsubscribing into a discouraging “ordeal”.
By deceiving your users and hiding away from them the information on how they can close their accounts, you will get them hooked on your product for a long, long, long time!
Step into the light! Use your UX superpowers the right way:
inform your users, from the very beginning, that they'll actually need to call you or to write to you if they decide to unsubscribe
make your unsubscribing method(s) visible on your website
Turn UX into a force for good!
3. The Forced Continuity
This UX design practice is so ingrained into the digital world that you might even not perceive it as “dark”, but simply as “common”.
How does it work? Picture this scenario: you “lure” your online customers to sign up to your free trial and it's at this point, as well, that you ask them for their credit card details. You're also cunning enough to let them know that they have total control over their accounts, meaning that they get to cancel their memberships any time after the trial period if they're not satisfied with your product (or due to any other reason).
What you (let's assume that it's you who is using this “devilish” UX technique) rely on is that in many cases users forget to unsubscribe after the trial period and that you get to keep charging them, since you have their credit card details.
In those rare cases when they do remember to close their accounts, you'll make it as discouragingly hard for them to do that as possible.
Tricky isn't it? We, at OPTASY, our web design company in Toronto, think it's just “lame” to “glue” customers to your products against their will instead of making them desire your product!
Step into the light and use your UX superpowers the right way:
notify your customers once the end trail ends and give them the possibility to choose whether they cancel or continue to use your product/service
make your cancellation method/policy visible on your website
4. The Sneak Into Basket
Now this is one annoying UX design practice (from the online shopper's perspective), that way too many e-commerce websites continue to use!
How does it work? Let's assume you're the next “victim”: you add an item to your shopping cart and you then realize that the website has automatically added another product or service (such as insurance), that you don't want to purchase. Or at least you would have preferred to be asked if you wanted to purchase it before instead of having it “sneaked into” your basket.
OK, so you might “trick” some clients and increase your gains, but just imagine all the negative publicity that all those frustrated customers will create around your brand!
Not only that you'll lose those specific customers, but by spreading the news about the bad experience they will have had on your site, they'll discourage your potential customers, as well, from ever accessing your site.
5. The Misdirection/ The Bait and Switch
A more than suggestive short description of this deceiving practice would be: changing the patterns that you've set up on your website and that your user will have got accustomed to, without warning him/her!
Therefore, you take him/her by surprise and “trick” him into performing a certain action.
In most cases it's about clicking a link/button which, till then, used to lead to a certain page, with no exception: your visitor will click on it without knowing that he/she has just bitten your “bait”.
Now try to imagine the long-term consequences, especially if you're using this deceiving technique for tricking your customers to spend their money on certain items on your website!
Step into the light! Use your UX superpowers the right way:
make all the options of same size and equally visible
ask for your user's confirmation: give him the choice to either continue or to cancel
6. The Scarcity Inflation
Admit it it! How many times a day does your inbox get “loaded” with newsletters striving to catch your attention and to make you react immediately to expressions such as: “Only 1 hour left till”, “Hurry Up! The sales end today”, “Only a few left!” etc.?
This deceiving pattern, too, is “exploited” to such extent in the highly competitive digital world (where competition for customers is truly fierce), that you may even not even perceive it as “sinister” and manipulative.
But it sure is! Our advice for you is not to go there: don't “exploit” your users' emotional biases towards scarcity and limited availability. Building trust should be one of UX design's most honorable goals!
Unless, of course, you do have limited availability to certain products/services that you promote on your website.
7. The Trick Questions
Resist the temptation to “exploit” users' tendency to (just) scan through the written content on a website and to use deceiving copy for disguising opt-in buttons as opt-out buttons!
Be better than that! Be future-oriented instead of (just) “hunting” only short-term gains!
Put these 7 UX patterns on your “Not To-Do List” and decide to put on your superhero “costume” instead of your villain mask!
Adrian Ababei / Dec 21'2016
Visual hierarchy, especially on an e-commerce website, is a way too powerful “weapon” for you to underestimate it or to ignore it!
When used right it empowers you to steer your visitors' attention on key elements on your website and, moreover it eases their “job” as visitors (possible future shoppers), too. We all need guidance so that's precisely what you'll be offering your visitors: guidance. You'll build “bridges” between different types of content on your website so that they can navigate through, smoothly, without getting disoriented or discouraged by a rigid, monotonous block of content.
By joggling with different sizes, with contrasting colors, with spacing and with overall layout, you determine what gets noticed first and which elements on your website carry more “value”.
Therefore, you discreetly guide your visitors towards “key” components doing them a favor: making their journey time-efficient. They get from point A to point B (your shopping cart page) as quickly and intuitively as they hoped when they landed on your website.
Your make your website “usable”, you upgrade it with “usability”, which is the to foundation stone of user experience.
Enough beating around the bush now: here are 6 “way too powerful for you to ignore” methods that you could use for crafting efficient visual hierarchy on your e -commerce website, 6 techniques that any Toronto web designer should add to his/her own "toolbox":
1. Be Generous With Your Negative Space
Remember that we've “talked about” the white space's importance when we pointed out how the human brain reacts to differently to different colors (in our post on user psychology and web design)? It's there that we mentioned that white space “helps you put together a clean, pure design, one showcasing certain elements of your work“?
Well, well, well! It's time to start perceiving this “empty space, “white space” or “negative space”, however you wish to call it, as a distinctive “element”, one claiming its real importance, and not just as a “absennce of elements”.
Once you've started perceiving it as an element on its own, you should consider it the card up your sleeve that you could use for grabbing your users' attention and for steering it towards elements of high importance on your website.
How? Here are just a few examples:
be generous with spacing between paragraphs and with the margins framing your blocks of text so that your shoppers can perceive your written content as “important” (we talked about “adding value” through visual hierarchy: well this is an example of “how it's done”) and “digest” it more easily
put your call to action button into the spotlight by simply adding more negative space around it. It's that white space that will set it apart from the rest of the elements on your website and make it instantly pop out!
dare “derailing” from the so very “trendy” and overly used web deign practice where you place a large image on your front page to draw attention to and you “suffocate” it by other elements crowded around it. Give this central, visually-arresting image a bit (jut a bit more, no need to exaggerate now) more space, white space, and you'll instantly balance out the whole layout and, moreover: your attention-grabbing central image will grab even more attention now with that “barrier” of negative space framing it!
2. Juggle With Different Sizes
Get playful, get daring, but mind you don' forget that: balance makes it efficient after all!
Therefore, enjoy the power of “manipulating” that size invests you with, make sure you don't “sabotage” yourself!
Neighboring elements of different sizes, where some are a lot bigger than others, will draw attention to the oversized one, that's true, but it might as well cast an unwanted veil of shadow on still quite important sections on your website. And you don't want that!
So, make use of this technique while remaining conscious of its counter-effects, of the importance to keep a certain balance in everything.
When it comes to e-commerce web design, we recommend you to play with sizes on your homepage, on the key imagery and text that you have there!
3. Think Contrast When Choosing Your Color Palette
As we already mentioned in the introductory paragraph: you need to adopt a more refined color contrasting technique than the now rudimentary ones like: “paint it all in red” or “set it against a background in a muted color”.
You need to start thinking through how you actually pair those colors, how you group them on your site.
Go for wining “combos” of red-and-green, yellow-and-purple, orange-and-blue and variations of these combinations of complementary colors.
Think through the selection of your call-to-action and sales announcing elements. Challenge your skills at pulling off the most efficient eye-catching color contrasts: go for a black background and neon colors or simply make sure the elements on your website (images, texts) neighboring thoae key elements that you want to draw your visitors' attention to, are in contrasting colors.
So, you've got our point: bid on color contrast and start viewing the colors on your website as parts of a whole “ecosystem” where each color can outshine/be outshone by or highlight/be highlighted by its neighboring colors.
4. Grab Attention Through The “Static vs In Motion” Effect
It's a scientifically proven fact: our attention gets instantly caught by things/persons in motion. The question that arises now is: how are you going to use this information for determining, in advance, what your shoppers should notice first once on your website?
You have three options for getting the most out of “motion's power”:
you add one or two discreet animations here and there, on key places on your website. And here we need to stress this idea of “discreetness”: your animations should be subtle; it's highly important that you don't go too far. It's quite easy to overdo it, you know, and instead of “cunningly” driving your visitors' attention towards the elements of major importance to you, to annoy them instead, to drive them off your website due to your too flashy, bling-bling animations. Not only that these “overly flashy” animations will annoy your shoppers, but they'll steal even the minimal attention away from the other elements on your website. And you don't want that!
you add an auto-playing video. Again, be very cautious not to go for a too absorbing video that leads to nothing (no subscription, no purchase). One of the best practices in this case it to design pages around your video, that your visitors should be discreetly “tempted” to access.
you go for a photo-video hybrid. They're such a popular trend in e-commerce web design these days! No wonder, for they put together the visual power of an image with the one of a motion, the latter being so discreet and idealy subtle. Therefore, it comes with the advantage of not outshining the neighboring elements. It's a type of motion-implying (visual hierarchy providing) technique which works wonders especially when applied on a visual that's already stealing the spotlight on your website (e.g. the large central image on your front page).
5. Set Up a Scanning Pattern
No need to strive to reinvent the wheel, when you can just as well use it to your own benefit!
This is the case with the ways users usually scan through the content of a website: there are two main human behavior-determined, already tested patterns: no need to invent a third one. All you have to do is pick one or another.
So, which one will it be? The F pattern or the Z pattern? Even the web design forums in Toronto are divided in 2 groups, depending on the scanning pattern they prefer.
Let us detail each one a bit before you can make a decision:
they both start in the upper left of the website (where usually logos are placed), go all the way to the upper-right corner (so this explains why upper page horizontal navigation bars still rock) and it's from there that they go on separate ways
in the F pattern the user's eye returns to the left side of the screen sort of mimicking the left-right-left-right eye movement specific to the act of reading (this is why this pattern is used predominantly on blogs). How is it useful on your e-commerce website? It enables you to nicely structure and display rows of images that shoppers can easily scan through. A “trick” you could use when adopting this pattern is to display secondary promotions on the right side of your website. It's there that the user pauses for a second or two before going back to the left side of the web page. So, “exploit” that short pause, so to say!
the Z pattern is already an “emblematic” one for front pages. Here you have the upper row, then the attention-grabbing image in the center of the page, presenting the site's man features or showcasing its products/services, then the bottom row. It's an ideal pattern for pages centered around one single action: such as landing pages or one page presentation websites, but it can be effectively adapted to the specific needs of an e-commerce website.
6. Set Up a Rhythm Only To Break It In The Name of Visual Hierarchy
Crafting a truly effective visual hierarchy is all about mastering the “establishing vs breaking up” patterns technique!
By simply derailing from a repetitive construction on your website you'll instantly draw attention, you'll break up the routine and “make them wonder” while they pause on that disruptive element.
Therefore, dare breaking up the repetition you will have set up in your layout organization, in the whole structure of rows on your website, for drawing attention.
Then, feel free to “exploit” the empty space you will have created there, in that section on your website “different” from the rest, for placing the key element(s) that you want to draw shoppers' attention to.
Maybe “manipulating” is a too strong word, but it describes perfectly the power that a strategically constructed visually hierarchy places in your hands. Give it a try! Pick one of our suggested techniques and see how it works for influencing your users' behaviors on your e-commerce website!
Adrian Ababei / Dec 20'2016
“My team of content writers “bursts” creativity, so why should I waste any more priceless hours/days planning content? They're all talented, they're adaptive, they'll figure out what type of content to craft and to deliver on-the-fly!”
Let's assume that it is you who's uttered/thought the above question (or at least one differently formulated, but conveying pretty much the same idea)!
Our answer to it would be: “ then you should be even more motivated not to waste your team's outstanding load of creativity and remarkable talent by sending them out on the “battlefield” with no type of “ammunition” whatsoever, backed up by no strategy.”
They might just end up wasting all their talent and creativity doing “urgent fixes”, responding to unexpected content challenges, joggling between the time they would spend on writing and the time needed for planning future topics.
And here you can easily add all the frustration issuing from the fact that your competition will have taken the necessary time needed to understand what the users in your shared market need and, therefore, what they search for when they go online.
Now, wouldn't that be such a shame? Such a waste of talent and resources!
So, think about taking some valuable time to sketch your content outline as a “gift” (that's right!) you're making both to your team and to your visitors:
for your team (although it might seem such a dread to spend a few days sketching, drafting, debating upon, brainstorming and coming up with a V1, V2, V3... Vn structure) it's a guarantee that their workflow will unroll as smoothly and as organically as they hope. Once the supporting structure of your website is set up, your information architect and your content writers will just have to comb through the existing material and “populate” those pre-established pages with high quality content
for your visitors, it's also a guarantee that once they land on your website their own journeys will be as intuitively as possible. Everything will, by then, have been properly tested and ideally structured: where the homepage links to, how each page opens up a different sub-page, how all those sub-pages interact with one another etc.
And now that we've tackled the “why”, let's detail the “hows”, too!
Here are the main steps that we take whenever we design our own content outlines for the web development projects (whether they imply building brand new websites or revamping old ones) that we work on here, at our digital agency in Toronto:
1. Draft Your Website's Architecture
This is the very foundation stone of every successful website in the online landscape!
Although the process might vary to some extent from website to website (depending on whether it's a corporate presentation website, an e-commerce website or maybe a blog instead), you can easily boil it down to 2 main stages:
you put together a structure with all the pages and sub-pages that will form your website
you set up a content strategy before you stat writing any piece of content for your new (or your newly revamped) website
I bet you've sort of guessed these 2 steps already, haven't you? Just that probably you haven't yet labeled them as “must-follow” and included them in a whole content strategy, right?
It's during this preliminary stage that you set up and organize all your pages, including your navigation structure.
While putting together this structure you're actually trying to sketch your visitors' journeys/behaviors on your website, as well. Where will they be more likely to head to after visiting your homepage? Which are the pages on your website that he/she'll visit more frequently?
It's also the step where there's a lot of research to be done (nobody said it would be all just brainstorming and “bursting” innovative ideas; there a lot of “dirty work” involved here, as well): study your competition's content, “ask Google” what your target audience is usually looking for online, which are their points of interest, their needs etc.
The good news (for there is also a bright side to it, it's not just researching and putting together intricate structures) is that you get to be as loose as you want to at this point of the content outlining process!
Write down everything that crosses your mind, scribble notes, doodle, dare to come up with different visions of your website's final structure, feel free to revise and to constantly improve your draft! This is the step where you're allowed and even encouraged to do all that.
Later on, once you have all your content strategy and content structure set up, it will be far more difficult to apply changes without risking to affect your website's whole information architecture.
Therefore: feel free to express all your bold and daring ideas. Now it's the perfect time for that!
2. Jot Down Your Content Ideas
OK, so now that you have the whole “skeleton” of your website put together, now that you can easily visualize what role each page plays in the big “puzzle”, how about starting to liven it up with some content?
Take baby steps, don't rush in to write long descriptions of all the future posts! Instead, start with a brainstorming session where you put together the topics and headlines.
So, topics and headlines! By now, after all your research that you've "enjoyed" doing during the previous step of your content strategy planning, you must already know which are the many points of interest of your future visitors. Rely on your findings for jotting down your future topics and, from there, try coming up with some possible headlines, too.
It will be a good idea to try and put down some possible keywords, too, and even maybe to write down some short descriptive sentences about each topic that you will have settled for (we guarantee you: these sentences will be “gold” later on, when you start to actually write content for your website).
Note: try remaining as “flexible” as you've been during the previous step. “Populate” each page and sub-page with possible topics and headlines, but take them as “hypothetical”, don't be afraid to revise and to replace them with more suitable ones if the context demands it.
3. Plan The Content That Will “Populate” Each Web Page
Now it's time to go deeper into your website's “skeleton” and, after you've jotted down ideas of topics and headlines, to actually outline what type of content will populate each page.
Will there be image galleries, tables of contents, slideshows, embedded videos? And if so, how will they be distributed on your website? Feel free to write down a few words about your possible future posts, headings and sub-headings, everything content-related that crosses your mind at this point.
Plan all the types of content and their place on your website and you'll thank yourself (or at least your team will definitely be more than grateful to you) later: once you can see the big picture, it will be so much easier to just get down to work and to actually create the content itself.
Let's sum up these three major steps that any “healthy” content outlining process should include:
setting up your website's architecture
writing down ideas for each one of your web pages
conceiving and structuring the specific content that will populate each one of the pages
And this is how we do it! This is how we structure the content that's “scheduled” to breathe life in the websites that we build here, at OPTASY.
Adrian Ababei / Dec 19'2016
We're back with 5 more (priceless) storytelling design principles for you, as promised in our previous post! 5 other means for crafting an engaging story around your brand/products/services and for telling it on your website as compared to “just” presenting/showing stuff on your site.
And before we break them down, let's recap, very briefly, some main points from Part 1:
your story is already unique, but you need to make it interesting as well
your story should focus on interactivity and it MUST engage
your story should put together a whole experience (an authentic one, one that users can enjoy only on your website
6. Make Them Interact With Your Story
Remember those really good stories from your childhood? And by “good” we mean those that had the power (or maybe it was just the talent of the storyteller himself/herself?) to get you in the story itself. How they managed to stir your imagination to the point that you were the main character yourself, you were in the story, fighting bad guys, rescuing princesses or being a rescued princess yourself?
Well, that's (more or less) the same effect that your visual storytelling should have on your users! The effect that your web design and development efforts should focus on. Your users should be subtly “dragged” in the story and turned into its lead characters.
Besides engagement, interaction in visual storytelling means discreet guidance, too.
Your visitor should feel, as if he's getting deeper into your story while he's navigating on your website; as if he's turning over the pages of a book.
Make sure you insert all the right directional cues, so that your user's journey, from the “once upon a time” on your homepage, all the way through the “intrigue” (your products pages) and up to the last “happily ever after” (your shopping cart page/subscription page) is as fluid as going from one chapter to another.
7. Let Your Mascot Tell It For You
Mascots make some great alternatives to “client testimonials” taking the role of storytellers, to a rather invisible storyteller or to the team itself telling your company's/brand story.
It can be either the storyteller himself or a character within the story and it adds that overdose of personality and uniqueness to your visual storytelling (there can't be two identical mascots, therefore yours is as authentic as the story itself).
So, think it through: what if a mascot personalizes a character within your story? Don't you think it would breath life in your products/items and help the customer relate to your story far more easily?
Homework: try thinking about 3 iconic mascots of worldwide brands and how you'd perceive those companies' products/services if there had been no emblematic mascots in the first place!
8. Let Your Background Image Tell It
From silent “story whisperers”, in the background, to secondary characters, to lead characters, large background images can take any role you'd like them to play in your story.
When used right, background images can instantly get your visitor in the story from the very front page. So, what role would you invest your background image with:
will it be a subtle background image, discreetly setting up the right mood of your story?
will it be strategically blurred in some parts and focused in others, thus conferring a felling of depth to your website's design and steering your users' attention towards certain elements of your story?
will it be clear and meaning-conveying, telling the story all by itself?
9. Go For Parallax Scrolling and Turn Your User Into a Narrator
Here's another great visual storytelling technique that's used more and more frequently in web development and that helps you turn your visitors into your story's narrators.
How does parallax scrolling work and help you create that sense of “authorship” in your users? Easy: you get to show different layers of a design on your website and, depending on your users' scrolling behaviors, these layers respond differently.
Therefore, there you have it: your visitors get that highly engaging feeling that they're actually the ones putting together the story that's being told on your site.
10. Tell It on Social Media
Remember when we mentioned, in Part 1, that visual storytelling is aimed at helping you build your own community, your own loyal audience?
Well, social media platforms are an amazing resource for achieving this particular goal. They are, by nature, far more “personal” and thus you get to create that emotional bond with your visitors far more quickly.
So, rely on social media for telling/sharing your story. “Write” it with brand-related images that are impressive enough to be shared and commented upon, with events and discussions around your products/services.
“Write” it and “tell” just like a traditional storyteller would, by getting the most out of the newest resources of web design.
This is it! This is how our list of 10 design principles that are great for helping you design and tell your visual story looks like. How about yours?
Adrian Ababei / Dec 17'2016
“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton).
This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website!
What does it mean actually?
It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible.
Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user.
Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike.
OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message?
First, you answer to this 3 major questions:
Who is your audience?
What goals have you set up for your brand?
Which is the message you want to convey?
Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling:
CONTENT IMPACTFUL IMAGERY INTERACTIVITY
Then, you take a close look at our 10 design principles for incorporating storytelling into your web design:
1. Let the Images Tell Your Story
Face it: people would always “assimilate” images way better than long, text-stuffed content!
Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that.
After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand.
It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds.
In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship.
2. Tell It Through Words, Powerful Words
And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book).
Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself.
Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right).
It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance.
Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power!
Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product.
3. Put a Face on Your Storyteller(s)
In other words “breath” some personality and authenticity into your website! Breath some “life” into its design.
It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”.
In other words: let your team tell your company's story. They're the ones that know it better!
Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness).
4. Instead of “Telling” Your Story, How About “Illustrating” It?
Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images!
The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images.
Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used).
They're far more dynamic than images, so consider them turning into your storytellers!
5. Tell It Through a Video
Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think?
Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile.
You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video).
And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website.
To be continued, with our other 5 tips in our next post!
Adrian Ababei / Dec 16'2016
Here's some food for thought: If you don't know where you are, you can't figure out where to head to!
What does this mean in the context of a website content auditing?
It means that if you're clueless about the content existing on a website (or you have some sort of collected data, but you haven't gone deeper with your content analysis) you can't possibly set up any business goals for the given website. Or you might just draft them based on some superficial insights.
How are you supposed to migrate from Joomla to Drupal, for instance, or to apply any improvement-oriented change on a website if you don't know know enough about its whole intricate network of content layers and about how these can affect your whole performance-boosting strategy?
So, you got our point: it is vital for you to closely evaluate the content on a website before you rush in to put together any sort of content strategy, before you set up any daring business goals.
And Still: Why Is It Crucial To Run a Content Audit?
More often than not even your client doesn't have an in-depth knowledge of how the whole content “mosaic” on his website looks like.
Therefore, you could see the content audit as the base of the "pyramid” that your whole project is (whether this project implies a redesign, integrating a totally new CMS, migrating the website from an older to a newer version of an CMS, coming up with an SEO strategy etc.).
It's the “diagnosis” that you can put on this website and depending on which you can, later on, come up with the suitable “treatment” (aka business development strategy).
Here's what you get to “dig up” during this content evaluation process:
valuable information about the workflows and content life-cycle
certain content patterns
“gaps” within the content, that need to be filled up with strategic content
you get to identify the “weak” pages on a website, those with low performance
How Do You Actually Evaluate Content on a Website?
Now that we've pointed out why it is vital for you not to underestimate or, even worse, to skip this preliminary step of every web project, here comes the next legitimate question: how it's done?
Well, you practically set up 2 main “barometers” for evaluating each web page:
performance per page (analyze HTML tags and keywords)
specific business goals
And here we need to stress out this last idea: let your specific business goals guide all your insights throughout this auditing process!
Note: you should start moving your imaginary magnifying glass across those particular pages of “critical importance” for the given website first! They could be the ones including products/services or the “About Us” page, but it depends greatly on each site's particularities and goals.
But What Does This Audit Include More Precisely?
1. Personas
If your (or your client's) website's content doesn't “talk the language of” or doesn't meet the needs of its persona, then it's as useful as a beach umbrella for an Eskimo.
Therefore, first of all:
you need to check whether that persona's profile has already been sketched
you need to check whether the already existing content on the website “speaks his/her language”
you need to establish, at this point, what content stays as such, what content needs improvements and what content goes, based on whether it's efficiently adapted to that persona's specific profile
2. Content Inventory
At this step you “just” pile up all the content on the website. So, no need to “examine” it yet (take baby steps; “patience is a virtue!”, you know), just make sure you collect all the existing content and put it together in an inventory.
3. Stakeholders Meetings
They are the ones that have been “pumping up” content on the website, so they should be the ones holding the most valuable information regarding the site's target audience.
Therefore, make your your “investigation” includes chit-chats with these key “content handlers”, too!
4. Content Gaps Evaluation
Compare how the existing content is performing to how it should have or you would like it to perform in the future.
Identify the “weakest links”: on which pages content is less effective than on the rest of the website.
Next, after you've identified the causes, come up with solutions, too! How can you fill in those gaps with proper, strategically crafted content, aimed at meeting your visitors/customers needs?
5. Your Competition's Content Evaluation
Your competitors' content is “pure gold” for you!
“Spy” on them, examine their own content, their whole content strategies, try to identity their own “weakest links”, too.
Collect as many valuable data as you can regarding their own personas, how much content, what type of content (whether it's high quality or low quality content) they have on their websites etc.
Keeping an eye on competition is a method that will never “grow out of trends”! At least not in matters of content auditing!
6. SEO audit
A content audit without an in-depth SEO audit is pretty much like a diet based on exercise, but not completed by healthy foods, too. Only half efficient!
So, grab on your imaginary magnifying glass and scrutinize the depths of the website from an SEO perspective: examine the meta descriptions, keywords, URL structure, 404 errors, title tags.
Do a little “dirty work”, so to say, which will help you figure out how all mighty Google perceives this website!
What Type of “Content” More Precisely?
By “content” we do refer to both on-site and off-site content, you know.
On-site types of content that you should analyze:
homepage
category pages
product descriptions
landing pages
blog
etc.
Of-site types of content that you should analyze:
social media
ebooks
emails
whitepapers
etc.
This macro-evaluation will allow you to identify whether the brand message is consistent through all these various types of content.
How Do You “Wrap Up” and Present Your Final Insights?
And here you are now, with an impressive “pile” of valuable findings that you've collected during your content audit process.
How do you present your conclusions to your client now?
Let us give you a few helpful tips:
put them all together in a compelling story (never underestimate the power of storytelling)
put together a strategy: clear goals+ clear means for meeting these goals
select the “key” findings to present
start your presentation with good news and continue with “issues” that you've identified during the audit
And here is how you run a content audit! At least this is how we run it here at our web design company in Toronto!
Adrian Ababei / Dec 15'2016
Drupal or Wordpress definitely make the most popular CMSs of the moment and considering that they do share quite a lot of similarities, too, making a straight choice between them can get quite energy and time-consuming.
How should you know for sure which one is THE one that will respond better to your web project's specific needs?
Before you dive into our in-depth comparative review of the two famous CMSs, (that we hope it will manage to steer you in the right direction), we need to put this straight right from the start: there is no such thing as “one is better or worse than the other”.
Both Drupal and Wordpress work wonderfully when it comes to suit specific needs, therefore, there' no question of hierarchy here, only a matter of “suitability” so to say.
Each one of the two is designed for a specific type of website (and, thereby, comes with a specific set of expectations from its future owner), that's all!
Drupal or WordPress: Which One Is More Advanced in Terms of Functionality?
Here's something to reflect on: Drupal's far more advanced functionality (compared to Wordpress's) is, at the same time its strength and its “Achille's heel”.
How come?
It all depends on the level of technical knowledge of the one deciding to “unleash” and handle its functionality. It can lure and be an “irresistible' challenge for some, but it can discourage others!
Drupal requires someone with more than “some” technical experience (or at least one who's well aware, from the start, that there is a steep learning curve involved) for handling all its various features- content types, taxonomies, blocks, views- and livening it up to its full potential. Once handled by “technical savvy hands”, it can handle all types of refineries that Wordpress can't: it can handle heavy content and multiple website stakeholders (website admins, content editors, publishers you name it).
As for Wordpress, it will definitely manage to cast a spell upon you if have basic technical skills. Designed as a blogging platform, Wordpress's performance can be affected to a great extent if it's “forced” to carry away a too heavy load of plugins and content “on its shoulders”. Otherwise, if you keep your Wordpress website light, it can reach pretty much the same level of performance as a content-stuffed, large-scale Drupal website.
See? Told you!
It all revolves around the type of website that you need to build (and also around your level of technical knowledge).
Drupal is more robust, but it's quite “picky” when it comes to “revealing its true power” to the one handling it: it's a CMS built by developers for developers, after all.
Wordpress keeps its performance within good parameters as long as you don't overload it (and it requires zero technical skills, too)!
Drupal or WordPress: Which One Is More Flexible?
HIGH PERFORMANCE and FLEXIBILITY sure are the 2 pillions of any great website on the online landscape, wouldn't you agree?
"Flexibility" is another word for “Drupal”. The CMS practically “overwhelms” you with a wide collection of free themes, modules and tempting customizing options, which you can pick, tweak and use for constantly editing and boosting your website's looks and performance.
And yet, it's a “gift with a twist” that Drupal makes you! There's no point in hiding it (and even we, as Drupal developers in Toronto aren't going to conceal this detail): you need to be a developer for efficiently handling all its modules. They require customization and therefore technical skills.
But once you've learned how to install, costume and update modules in Drupal, how to “unleash” all that extra functionality that these modules “encapsulate”: oh boy, it's such a confidence-booster! You'll get to build a website capable of handling thousands of users and thousands of content-stuffed pages!
Wordpress isn't a cheapskate, either, when it comes to “spoiling” its users with no less than “millions” of plugins and themes. Moreover, it definitely has a strong advantage for the non-tech savvy ones: you don't need to be that technical for successfully integrating all those plugins and perform all the needed editing yourself: on colours, font, layout, you name it. Ease peasy!
But you get to do all that only as regards small size websites, you should definitely keep that “tiny” detail in mind!
Drupal or WordPress: Which One Ranks Higher in Search Engines?
When comparing Drupal to Wordpress in matters of SEO-related features, what you should know is that there is no matter of “better” or “worse”! It's just a matter of “two different, yet equally efficient approaches”!
Let's dig into more details!
With “tantalizing” plugins, such as Yoast's SEO, Wordpress helps you ideally optimize your website for search engines in no time (and with no great technical skills required either, remember?). It “spoils” you with a quick and easy way of optimizing your site.
As for Drupal, it comes with a certain “edge” given by the fact that it can handle way larger websites. Loads of content and truckloads of daily visitors to handle, you can just figure it out yourself, come with a different approach to SEO, with totally different SEO needs and strategies. Moreover, you need to know what you're doing, when handling Drupal, if you want to efficiently optimize your site.
Here's another “detail” for you to reflect on: when it comes to page load times (and you're well aware of Google's “weakness” for websites that load fast) Drupal comes equipped with robust and (most important) out-of-the-box catching features, as compared to Wordpress, where you have caching plugins that you get to use for speeding up your website!
Drupal or WordPress: Which One Handles Security Better?
Whitehouse.gov is built on Drupal!
Need I say more? Drupal takes security to a higher level, that's for sure, and no wonder since it's been designed to suit the specific security needs of enterprise-level websites!
Wordpress, since it's been designed as a blogging platform, is more vulnerable. It takes just a hacked plugin for hundreds (or more) of Wordpress websites to get “infected”, so just reflect on this for a minute or two before you make your final choice.
Size does matter! The size of the website that you develop determines its future security needs, as well (so, you can't compare a blog to a governmental website, right?).
There's more! Choosing the right platform specific hosting application is decisive when it comes to managing security risks:
you have Acquia and Pantheon if you go for Drupal
you have WP Engine and since recently Media Temple, too, if you go for Wordpress
We, here, at our web development company in Toronto, manage to “sleep well at night” since we are Acquia partners!
Drupal or WordPress: Which One Is Easier to Use?
This is the aspect that Wordpress excels at! Anyone can use it!
You get to set up your Wordpress site and make it look sharp and functional in no time without having to be a programming languages guru! With its simple user interface, it turns building a website into a matter of minutes and even its customization doesn't pose great problems or causes severe headaches.
Things get a bit trickier with Drupal! It's not hard to use it, it's just a bit more challenging to learn how to use it in the first place!
Once “armed” with enough technical skill, the sky is the limit with Drupal: you can develop far more advanced (and therefore confidence-boosting) websites. Its interface, too, is easy to use, so that won't be a problem. It just requires a bit more time (and will) to learn how to mix and match its core features and how to edit anything in the back-end, too.
And, the good news is that it looks like Drupal 8 paves the way to turning its CMS more accessible for non-developers (such as content editors, for instance), too. So, there are chances that Drupal steals the “crown of easiness to use” away from Wordpress in the future to come! Stay tuned!
Also, you can relax: they both get your back covered!
That's right, both CMSs are supported by active user communities, so you can easily get the answers to your questions or the needed documentation!
Another highly important “detail” is that both Drupal or Wordpress reward you with freedom in terms of design! You get to design your templates to your liking, no matter which one of the CMSs you'll go for!
We'll end our comparative review with 3 last questions that you should ask yourself before you go for one CMS or another:
1. Does your future website have to handle multiple user permissions?
2. Will it feature multiple content types (and page templates)?
3. Does it require enterprise level security?
Adrian Ababei / Dec 14'2016
You are aware, aren't you, that there's a lot at stake when choosing the “right” CMS, the one that meets your particular web project's needs? So, you definitely need to think it through and to consider all the main aspects!
Still, no need to panic now! To get stressed out that you risk to make the wrong choice, for you can't tell which one is the perfect fit for your particular work scenario.
The best way to find your answer if by asking yourself the right questions!
As simple as that!
What's your level of knowledge of the main programming languages (CSS, HTML, PHP)?
What type of website will you be developing (a corporate website, an e-commerce website, a social network etc.)?
What future do you anticipate for this website? Are there any chances that it should grow significantly? Will it require new functionality and is it likely to face the challenge of traffic overloads later on?
And so on...
Are You Joomla's or Drupal's “Target” User?
Are you're a “tech savvy” developer, with a consistent coding experience in the basic programming languages? Then you're the type of target user that the community developing Drupal envisioned for this platform!
Are you confident that the site you're about to build will grow and, therefore, get more and more “greedy” when it comes to new features and constant customization (and you have a certain “weakness” for the after-launch “polishing” and constantly upgrading processes? Then you should definitely go for Drupal.
Do you have basic technical skills instead? Are you looking for a super easy to use CMS that doesn't require certain language programming skills? Then Joomla is the platform that you'll find be comfortable with! It will allow you to have your e-commece or social networking site up, running and looking attractive in no time!
Is It A Joomla-Specific or a Drupal-Specific Website That You'll Build?
What type of website are you planning to develop?
And (after you've discovered whether you're Drupal or Joomla “material” answering to the question in the previous paragraph) this might just be the question that will help you make a choice between the two popular CMSs!
Is it an ecommerce website that you'd like to set up quick and easy, with no customization implied or maybe a fully functional social networking website and you have basic technical skills? Then you've got yourself a winner: Joomla!
Are you facing an a lot more challenging project, where you need to rely on your technical expertise and deep experience as a web developer for building large scale websites? Then it's Drupal that will help you meet and exceed your client's daring business goals. For instance here, in our web design company in Toronto, we often face the challenge of developing content-packed websites. So, we know that we can rely on Drupal: its been designed for handling truckloads of users and large amounts of data, you know.
And where do you add that, due to its catching features, Dupal loads faster, too? And it requires less server resources than Joomla, as well?
Checked and double checked! If you're planning to start a daring (even a multisite) website project, one that's sure to grow steadily in traffic and content in the future to come, then go for Drupal!
How Do Drupal and Joomla Respond to Your Need of Customization?
FLEXIBILITY and CUSTOMIZATION are Drupal's “little name” and respectively “middle name”!
So, you bring in your passion for “getting your hands dirty” up to your elbows in lines of code and it will spoil you with an overwhelming array of themes, plug-ins and all sorts of other configurable options!
Select the ones that respond to your website's ever growing needs, mix and match them and then skillfully integrate them, boosting both its looks and functionality!
It's true, Drupal “expects” you to be more of a technical savvy (compared to Joomla), but it also gives you unlimited freedom: feel free to come up with any needed improvements to your site, to create custom modules, to play with themes, to upgrade its out-of-the-box features to your (or your client's) liking. Sky it the limit!
Oh, and I almost forgot: they're all free! It's a “detail” that you should take into account if you consider that some of Joomla modules and plug-ins are not free of charge!
So, yes, when it comes to flexibility and customization, it depends a lot on your own needs:
Do you actually want to be able to constantly customize the look and feel of your website? Drupal enables you to do that painlessly.
Do you just want to set up a functional site as quickly as possible, without investing to much time and skills into its customization? Then Joomla, with its already famous easy to use interface, will help you set up your social network or online shop as quickly and stress-free as you say: “Joomla”!
What About Security? Which One Makes A More “Secured” Choice?
It would have to be Drupal!
And I'm not saying it because it's Drupal that we're building wesites on here, in our digital agency in Toronto! Just think about it (for it's pretty obvious): how many hacked Drupal websites have you heard of compared to Joomla or Wordpress sites?
It's true that those who've “pledge to remain 100% faithful” to these two CMSs will come to “counterattack” stating that this is only because there aren't as many websites built in Drupal as there are in Joomla or Wordpress.
And yet, it's a proven fact: Drupal takes security to another level, compared Joomla. Its worldwide community of developers is constantly “hunting” down threats and is always on the lookout for any weaknesses showing up in the system. Moreover, whenever they spot security vulnerabilities, they patch them up and “expose” then on the website.
Still, even if with its not that strong approach to the security factor, Joomla, too, responds to security vulnerabilities and it gives you the chance to strengthen your site's level of security, to upgrade it with new extensions. Yet, it is important to keep in mind that you'll need to constantly run the necessary updates for keeping it properly shielded!
Which Are Joomla's and Drupal's SEO Capabilities?
If you're concerned about the SEO aspect (and you should be, especially if it's the challenge of a large scale, multilingual website project that you need to respond to), then there's no “better option”, there's just ONE option: Drupal!
It “beats” Joomla in terms of SEO capacities, being equipped with far more advanced SEO features.
Still, it's true that you can optimize your Joomla website for the search engines, too. The main difference is that you'll need to actually create those custom SEO-related features yourself (and since this CMS “boasts” to be “a dream come” true for the non technical savvy ones, this aspect might just be an unpleasant surprise for you).
How Do They Handle Technical Support?
When it comes to their help portals, if you're a beginner you'll find Joomla's technical support far more accessible.
You can find the answers to all you Joomla-related “dilemmas” and you'll be able to get all the guidance you'll need as compared to Drupal's support options, which are more “from developers to developers”: a lot more technical.
So, there's no "better" or "worse" help portal! It's just a matter of responding to their own target users and “speaking their language”.
What other strong and weak points of these two popular content management systemshave you “dug up” yourself ? What other similarities and major differences? We're looking forward to reading about them in the comments below!
Adrian Ababei / Dec 13'2016