Life isn’t static and neither should your site be. But how can you add that wow and you’re your site to the next level, without having to learn to code?
It’s one of the biggest questions of recent years. Just how can designers, marketeers and content editors embrace and harness this power without the need for complicated coding and time-consuming development?
Well the answer is, we’re not fully there yet… but we are getting there. Since the world of Flash based plugin animations came to an end, animation and timeline-based movement has become more integrated in the way a site is coded. So, the opportunities to explore outside certain parameters and frameworks are less.
It’s worth noting though that HTML5 is not a tool for developing content, designs, video or animations as most would believe. It’s rather a full-fledged platform that lets you do various things which may contain any of the above.
This is all very well, but it takes the content /marketeer/designer deeper into the world of coding and away from the more intuitive visual world of the content creation tools we are more familiar with. I find learning about coding and how solutions are coded exciting but it’s not where I excel. My time is best spent designing and solving clients creative and visual digital problems. Leaving the heavy lifting and HTML5 world to the true code professionals in our team.
So you need to create a responsive site that looks great, animates and is easy to update, but don’t want to get dirty with code?
Yes please, is there yet a solution? Surely there must now be a tool that allows creatives and marketeers create engaging and dynamic responsive, interactive animated content without the need get too deep into code?
Sorry but no there is no one stop magic program with a publish to all viewports type capacity. Most content needs to co-exist with page code, frameworks (as mentioned above) and CMS entry, to be fully integrated and responsive. There are theme builders for platforms such as WordPress and open source CMS’s like Umbraco which open up opportunities for less code savvy creators, but these still have a steep learning curve and a general knowledge of code is still needed. Standalone offering offerings such as Foleon, Webflow, Ceros, Infogram and Creatopy show that we are on the right road, though it’s still early days for these, I can only see this growing as our needs as creators becomes more focussed and evolved. Creatropy is great for basic timeline based banner creation in multiple sizes and animating simple content blocks. For end to end microsites and interactive publications Foleon stands out as it does have an very intuitive responsive automated approach to different viewport sizes but has other limitations that the others don’t. To get some quick and easy animation Ceros and Creatopy are effective. Infogram great for data driven reports and interactive charts. Webflow is best approached with some coding know how and is more like an all in one theme builder.
If you’d like to get in touch to find out more about working with us on existing or forthcoming projects our team would love to hear from you.
We have the power
It’s great that in this connected day and age, we increasingly have the option and the ability to work from home. Over the 25 years that I have worked in the creative industry, developments in communication technology and changing attitudes towards working culture mean that for creatives, the concept of connecting remotely with work systems and colleagues has become much more widely accepted and we can now work from almost anywhere we choose.
However, the current global crisis brought about by the coronavirus (COVID-19) pandemic means that working from home is now the only option for many, and some may be adjusting to working from home for the first time. Although the current lockdown means that it can feel at times as though we’re working almost in isolation, it is becoming more apparent just how important it is that we strike the right balance between working independently and staying connected in
As creatives, we need inspiration, and for me, this typically comes from sights, sounds and experiences that are out of the ordinary. Interest in the arts, music, film, literature, and activities such as walking, exploring the local area, travelling and interacting with colleagues are often considered to stimulate the creative mind. But are we missing out on all of this when we work from home?
Being able to fully immerse yourself in your creative thought process without distraction is a key reason that working from home is so popular amongst us all. However, working from home means not needing to leave your home environment – the place where you spend most of your waking hours. There is no need to commute, and so there are no external stimuli; no clever outdoor advertising to make you think, no unfamiliar people to observe and consider, and no need to spend time waiting for a train or bus. So, how can we stay motivated, inspired and stimulated?
Personally, I like to create a calm, ordered environment for myself away from my usual home surroundings. I have the luxury of a studio set up that is independent from the house. This helps me to stick to a structured routine and allows me to maintain a clear delineation between work and home, along with the following key factors:
- Regular exercise breaks help to keep the creative juices flowing and reenergise the mind. Physical exercise is often the first casualty of working from home, so it should be factored into your daily routine.
- Creative stimulus from music is very important to me and so I listen to music and aim to take a break to play the guitar for 15 minutes at least once a day to help to exercise that side of my creativity as well.
- Ensuring that I have regular, concise online design research periods that can motivate and inspire me also helps to keeps the creative juices flowing.
- Short breaks away from the studio and house are also important, although at the moment, these breaks are limited due to the current restrictions.
The importance of collaboration
One of the achievements of my career that I am most proud of is being involved in the creation and development of the expert and multi-skilled creative team that we have at Konstructive. Face to face conversations can be a great source of inspiration and thanks to digital solutions such as Zoom, Skype, Microsoft Teams and Jira, they are still possible when working from home. The ability to interact with other members of the team is essential for me. Being secure within your team does more than improve the quality of your work life; it can also make you feel more at ease when sharing ideas, concepts and thoughts with your colleagues.
This collaborative process is essential for creativity and is reflected in the partnerships that we develop with our clients, encouraging ideas to develop and grow. Listening to our clients, enabling them to adapt to the challenges they may be facing and empowering them to achieve their goals is incredibly rewarding and ultimately, is what keeps me motivated.
So, to summarise
While working from home can be liberating and productive, the evolution of a careful work-life balance and the ability to interact regularly with colleagues and clients helps to keep the creative mind stimulated and focussed, enabling us become happier and more in control.
One thing is for certain; the way that many of us work post coronavirus may never be the same again. We have the power to work from home and we need to use it wisely.
Contact me to find out more
Rule 10 -
Good design is as little design as possible
Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Back to purity, back to simplicity.
Read more on Dieter Rams ten most important principles for what he considered was good design.
Website design is essentially a solution-based discipline - a rational, logical, sequential process that is intended to solve problems and satisfy a need.
The key then to successfully designing to maximise online engagement is to put the focus on the user, the human, the decision maker. A user centred design will focus and respond to the needs, wants, and limitations of that user, encouraging them to stay on your site and delve deeper.
Taking the first step towards implementing fundamental design strategies that improve engagement, requires you to research and understand your customer from a rational and emotional perspective. This will allow you to carry out a critical review of your site from your end user’s perspective and identify key areas for improvement.
As a good starting point here are a few basic common barriers to engagement that we typically see from a design and layout perspective.
No clear calls to action
A big issue on many sites is a lack of clear calls to action. ‘What do you want me to do? What’s in it for me? Your visitors don’t have much time so simplify things - don’t make them work!
Confusing customer journeys
Is it clear what a potential customer is supposed to do on arriving at your site? Your visitors are coming for a reason - they have a need and your site design should clearly direct them to where they can find the information that answers that need.
Positioning statement lost, branding poorly executed
On arrival at your site a visitor will make an incredibly quick decision about whether you offer what they want and if you are better than your competitors. If they can’t decipher who you are or what you do, they’ll quickly lose patience and confidence in your brand - be upfront and clear.
No real animation or interaction
Does your site inspire and encourage interaction? This is incredibly important for customer engagement because the more it does, the longer a user will spend on your site interacting with your product and brand… and the more they do this, the more likely they are to fulfill your call to actions and come back.
Typography needs to work harder
Typography can play a critical role in signposting user journeys and scent trails throughout the site. Clear, well designed typography complements a user’s journey taking them deeper into the site, whereas confused, badly executed typography can actively confuse and discourage them to continue their journey.
Inconsistent and confusing use of colour
Colour doesn’t just make a site look good. Colours have particular emotional associations which help to draw the eye. It’s also a very important tool for categorising multiple products in multiple categories. Sites which don’t recognise these associations or use colour inconsistently create a confusing and off-putting user experience.
Site real estate needs to be better utilised.
Ever been faced with a webpage that is so jam packed full of information that you have no idea where to start? Having lots of content is great but too much in one place is overwhelming. Give your content space to breathe, create an information hierarchy that breaks it into manageable chunks and directs your visitor towards the bit that they need - if you make it logical and don’t waste their time, they’re far more likely to persevere, clicking through to other pages to find more detail.
They may sounds obvious but these mistakes are all too common. Getting the basics right can make a significant difference to your sites success or failure.
And as ever simplification and honesty are key...
“Any idiot can make things complicated, it takes a genius to make things simple”
Lean and agile... yes please. Just sounds right so it must be hey?
The Agile inspired approach to design, has its roots in the lean manufacturing process and Agile software development. There has been much discussed recently about how to apply these principles to the digital design process a great read with reference to this Eric Ries book the Lean Startup.
It inspired me up to see how streamlined we can get the process on design projects here at konstructive.
A lot of what Lean and Agile working is all about is good business and design sense.
We have set up teams that are purposely compact so that we can work in more agile way. With designers and coders working together with clients to design, build, test and measure early on. It's about empowering the project teams to make the right choices and to be able to respond and pivot quickly and efficiently where and when needed. Whether we produce a website, mobile, app or commerce tool they are all essentially products and as such we are manufacturers. I have long thought of what we do as design engineering. The leaner and more efficiently we can work the better the product and the more rewarding and successful our work and lives will be.
The exciting and breathtaking rate of change in the digital space means we are constantly reassessing and improving our process and this helps us stay lean, efficient and agile as a company.
Above all it's important to constantly adapt and evolve.
There is always a way to do better.
We all need barriers to push against. To define our lives. Our zones of comfort. Less gives you more. Too much choice and uncertainty leads to poor design choices. As designers we need limits so we create rules to define these limits.
Defining these is a key part of the creative process and something that is essential when designing in the commercial world, where time is the main constraint.
I see rules more as guides.
Guides we can voluntarily adhere to. They are more often than not are born out of real world solutions to real world problems generated in professional environments. Responsive Web Design (RWD) is a perfect example of this. In the wonderful constantly evolving world of web design today's rules are just guides as things are moving so fast we need to keep constantly reassign and defining. I believe there need to be rules and these rules guide us to create the best possible solutions and experiences. We need to consider many things in addition to creativity and communication we needs guides for our approach to HTML 4, HTML5, typography, interaction, view ports, browsers, standards, bandwidth and audience abilities.=
Let us be guided by the rules…
Our set of rules we call a Guide.
Lets us guide our clients to create beautifully effective sites that help define the rules…
I believe that effective use of colour is key to a successful and accessible website. Communication and brand recognition is greatly aided by the use of a simple, relevant and effective colour scheme throughout the site.
Optimising design for the screen based medium is something many print designers take a while to get to grips with as designing for websites involves dealing with backlit luminescence, which can vary from monitor to monitor and from platform to platform. Colours are RGB not CMYK. Therefore effective and use of limited colour with emphasis on contrast is very important. An understanding of how certain colours perform on screen compared to when they are printed helps avoid communication and branding mistakes. In general it's a good idea to restrict the number of colours used and isolating areas involving large amount of colour variation i.e. colour-coded section dividers, navigation elements and photography. Other points to note are that: large areas of text are more readable on black on white than white on black. Sites can involve movement as well as clever use of colour to emphasise important points and branding truths.
Colour tips and guidelines
- Understand your site's message and brand
- Choose colours that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colours such as blue, grey, and green. In this case, using warm, vibrant hues would undermine the site's brand.
Understand your audience
Cultural differences can lead to unexpected responses to colour. Additionally, demographic segments and age groups respond to colours differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.
Use contrast for readability
Colours similar in value do not provide enough contrast and hinder legibility and accessibility. Black text on white backgrounds provides the highest degree of contrast.
As ever its important to test and test early... here is a useful tool to use as a guideline/reference point:http://leaverou.github.com/contrast-ratio/
I’ve always liked the idea of distilling a theory down to a few compact stages and this take on the “who, what, why” or “who, what, where” type approach to problem-solving is rather interesting.
“Asking Why, What if, and How, in that order, can help one advance through three critical stages of problem-solving. “Why” questions are ideal for coming to grips with an existing challenge or problem—helping us understand why the problem exists, why it hasn’t been solved already, and why it might be worth tackling. “What if” questions can be used to explore fresh ideas for possible improvements or solutions to the problem, from a hypothetical standpoint. When it’s time to act on those ideas, the most effective types of questions are practical, action-oriented ones that focus on “how”: how to give form to ideas, how to test and refine them with the goal of transforming possibility into reality.”
— Warren Berger
You can read Warren Berger’s full article here >
Also interesting relating to this is the inspiration for the 5 ‘ws - What, Why, Where, When, Who & How
“I Keep six honest serving-men:
(They taught me all I knew)
Their names are What and Where and When
And How and Why and Who”
— "Rudyard Kipling - The Elephant's Child"