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.

Flash was originally a game changer for content creation and needed some knowledge of how to action script and code, so this didn’t really help us out here that much. It became quite a specialist tool and has now evolved into Animate focussing on character animation and games. Although it provided interactivity and animation, it only worked in fixed viewports. It did open up our eyes to the possibilities of interactive animated content. It also created sites with flash for the sake of flash and this weakened its impact and appeal (Why wait for or chase the logo to bounce around when it could just fade in better?). Flash as it was is no more for many reasons. Its main role to tell stories on sites has now often been discontinued and superseded by the possibilities of improved bandwidth and effective streaming of video components such as Cloudflare. With video there are a wealth of production and tools like Premiere and Adobe After Effects best covered in another article. But in the more complex web focussed area of responsive viewport views, interactivity and timeline-based storytelling, the evolution of combinations of JavaScript based animation, CSS and html5 code have become the norm.

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.

HTML5 is not a single piece of technology to get your product / design / animation / anything up and running. You need at least these three - HTML5, CSS and JavaScript.

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.

So to summarise... there really are only a few robust all in one applications that offer a rich visual editor where the code is kept in the background. I feel that Ceros and Foleon are probably the most intuitive to use. I can see these platforms growing in popularity with content producers and marketers and designers as they evolve. We are currently working on many projects with these offerings and each has its own advantages and disadvantages. It must be said though that be truly able to design and create the best experience possible there’s still is no one magic quick fix solution and the power and flexibility that coding and designing the best solution. Effective resolution of the design process with the latest and cleanest most efficient use of html/CSS/JavaScript and other libraries still can’t be beaten for flexibility longevity and scalability.

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.

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"

http://www.boop.org/jan/justso/elephant.htm