Monthly Archives: July 2016

Web Design trends in 2016

2 distinct and somewhat opposite web design trends we’ll be seeing more of in 2016 are the use of rich illustrations and animation.

Rich Illustrations

In the past web site designers have relied heavily on stock photography and image libraries to provide the visual elements of their designs. Something that has become more prevalent in 2015 and that will carry on into 2016 and beyond is the use of original art work either created using traditional or computer based art tools.

With consumers becoming immune to the stock photography that is often overused and repeated across web sites hand-drawn imagery offers warmth, authenticity and originality.

Some brands will soon be associated not just with their logo and colours but also with the art style that they contain. The integration of handmade artwork in web design may well become something of a branding calling card.

Richer Animations

The web went through a period of embracing animation with the use of Flash, however once this lost its appeal due to cross platform, seo and usability issues the web became increasingly static for a good few years. However we are now again embracing rich animations, the web has never been more dynamic with so much use of animated elements within design, and it’s only going to get better.

Animation if used well can engage the user and enhance storytelling. It can make a website feel more interactive and engage the user with an experience that is more than a basic portal to source information on a business, product or service.

As with any design tool it’s important not to go over the top  Overuse will distract the user and become irritating rather than enhancing. Animations should be kept simple and thematically consistent. By “thematically consistent” I just mean that the animations are used in a similar way throughout the website revealing important details and guiding users through a path. Animations should be used selectively within the site to illustrate important points or to indicate a required action.

how much Page Speed Matters in web design

The speed with which your website loads matters for two reasons. Firstly a fast loading website results in a better user experience and secondly it is one of the factors that Google measures when determining search engine rankings.

There are many factors that can contribute to a slower loading website. One of the first things to do if you’re worried that your site may not be quite up-to-speed is to use the Goole PageSpeed Insights tool.  This is an online tool which can measure your page load speed, provide an overall ranking for technical aspects and user experience, and provide help on how to improve the speed of your site. You can access this online tool by clicking here.

The first bottleneck of a site’s loading speed is the server itself. There isn’t necessarily a huge amount you can do here other than move to a different server. Shared hosting servers offered by the large hosting companies tend to be slower because the hosting companies put a lot of sites onto each server. On the other hand private servers (such as the server Webfuel use for their own clients) are usually faster.

The design and more importantly the HTML build of a site is the next factor to consider. There are many technical aspects to the setup of a site which can impact the page load speed. Below we look at a few of the more important aspects.

Top of the list is caching. Caching means that results from website requests are stored so that they can be served even faster the next time. This speeds up page load and reduces the overall demand on the server, again improving performance. There are two types of caching, client side and server side.

With client side caching the site tells visitors to not check back for updates to pages, images or documents for a certain length of time. As a visitor moves back and forth between pages their browser will not need to keep reloading content and so the overall experience will be much faster. Returning to a previously visited page should be more or less instant.

Server side caching happens, as you’d expect, on the server. With a content management system there is often a reasonable amount of work required to render a page. The CMS will use templates to generate pages, which combine aspects of the site design, the navigation and user input content. Once all this information is brought together into a finished page it’s important that the server stores the results so that the next time someone asks for the page it doesn’t have to be regenerated. Of course if you make changes to your site the cached results on the server are no longer valid so should be forgotten.

Another feature of the build that can impact performance is the way in which scripts are added to a page. This is quite a technical subject, but basically the order and location of scripts within a page can significantly delay a page load. If you commonly see your page start to load, freeze and then continue this may be due to the browser having to wait to load and run scripts which are too high up in the page content. Generally scripts should be loaded as late as possible as they always block any further processing of the page until they have loaded and run.

Finally the images of a page should always be optimised for the necessary resolution and quality. Far too often we see sites which are loading huge images only to then display them in a tiny size on the page. This slows down the page load dramatically. Images should whever possible be resized close to, if not exactly, the size they will be displayed on the site. Some content management systems (including our own) offer the feature to automatically resize the image on the server before delivering it to the client which can help reduce the burden on maintaining image sizes yourself.

 

Importance of Wireframing in Website Design

Designing and developing websites that work across multiple devices is an important part of the work we do on today’s web. Responsive design is forcing us to re-think about how we plan out our site designs and how our pages gracefully fit the device they are being viewed on. These days, we rarely ever start a design without going through some sort of wireframing process. Even if clients do not need to see a wireframe, I think it’s still important to create one internally so that designers and developers are all on the same page.

Changing the Way We Do Wireframes

A wireframe is the skeleton of the page, usually drawn with basic shapes and lines with limited colors and styling. The point is to focus on figuring out layout and content placement, and solving navigation and functionality problems in a format that is easy to adjust. When planning for a responsive website design, we cannot continue to think through the wireframing process from a desktop only perspective. However, I understand that changing the way we think about these layouts and choosing a new direction can be a little challenging. For years we have spent our time designing fixed width layouts or maximum 960px width in our designs. Wireframing for mobile devices first (or from narrow widths outwards) helps us prioritize site elements while putting us in a good mindset for thinking about what content is most relevant to the site visitor and how your content becomes available to work with on wider screens.

Your Wireframing Tools

The first step of any good design is to sketch out your ideas and determine the placement of all the different elements on a page. If you’re trying to decide which type of wireframing tool to use, there are a wide variety of wireframing tools and apps out there that make wireframing quick and easy. Tools such as Balsamiq Mockups, Omnigraffle, and Axure are widely used for creating wireframes and have very extensive toolsets and features. I used Adobe Illustrator for many years but ever since Sketch came out, it has been a designer’s dream tool and our team fell in love with it right away. Sketch is very intuitive and you can create multiple artboards and view what you’re designing all at once — perfect for designing responsive sites!

At the end of the day, pen, paper or even markers can make excellent wireframing tools. I still find that sketching and drawing out your wireframes on paper is always a great way to get ideas flowing, to quickly illustrate those ideas to colleagues and to get things straight in your own head. When collaborating with our team here at Segue, I still start with paper and a pencil, roughly sketching things out and I probably always will.

wireframes with pencil and marker

What to Avoid

Wireframing is both a process for thinking through problems and specifying interfaces. Like other aspects of your development process, wireframing can have its pitfalls if not done properly.Here are some things to avoid when you are creating your responsive wireframes.

1. Emphasizing color and design: Wireframing is for deciding the layout and location of elements. Working in grayscale helps maintain focus on the primary function of the process, which is to finalize the layout, not the design. Starting with simple, low-fidelity wireframes is probably better and easier to work with if you decide to change and move things around.

2. Too much detail: You can always add more detail to show to your team and clients later in the process. But including too much in the beginning may add confusion. Drawing on paper is always a great place to start and rough sketches allow you to come up with new, more interesting solutions. Keep the fidelity low and focus on making something that others will collaborate around.

3. Wireframing every single page: Creating wireframes doesn’t usually require that you lay out every single page view. It’s always good to know your website’s content ahead of time and what your user is trying to achieve. All of that gathered information from stakeholder interviews, content audit, and research are all important pieces of your site that will help prioritize elements on your page. Doing what’s necessary to move the project forward and get consensus before building is what I think wireframes are being useful for.

wireframe

Benefits of Wireframing

Wireframing is an important communication tool in any web or app project. It gives the client, developer, and designer an opportunity to walk through the structure of the website without getting sidetracked by design elements such as colors and images. For me, I believe that building a simple wireframe will save time in the long run and ease the development process for the designer, developer, and client. The following is a list of some of the great benefits of wireframes:

1. Wireframes bring clarity to your projects, allowing you to work through all the interactions and layout needs.

2. Wireframes gets your client thinking about what their needs really are and helps them define their project goals and what their primary focus should be.

3. Having your wireframes handy can make it easier for you to communicate your ideas to your team and how your design would work with responsiveness in mind.

4. Wireframes can also help deliver the core message of your website more effectively and gather feedback at an early stage.

5. Wireframes gives the developer a clear picture of the elements that they will need to code. How should the layout adjust for smaller-sized devices? What is the hierarchy of the content? How does the navigation respond to smaller screens?

6. Wireframes helps designers layout many sections of the website, resulting in a more fluid creative process.

Responsive thinking challenges our design options and certain approaches will not be easy to implement as others. Frequent collaboration among team members and the client is a must in your design workflow, not the exception. While it is common to go through several wireframe revisions with your colleagues and client(s), at the end of the day, our main goal as a team is to review and collaborate regularly at every stage in the creation process until the site is live.

Animation: CSS vs. Javascript

animation-css_versus_javascript

Animation is a design tool which does not directly impact content but instead is used for visual cues and transitions from one UI element to another. For web design, animation is used to polish an already completed product. CSS and Javascript are two animation tools and both have pros and cons when it comes to functionality, overhead, and performance.

Functionality

In terms of functionality, CSS and Javascript are fairly similar. Both are able to do very impressive animations but it becomes more of a question of what exactly the animation needs to do. Animating using CSS is known as a declarative approach while Javascript is imperative. What this means is in CSS you must specify specifically what has to happen, while in Javascript you are able to programmatically define the animation.This means you have more control over an animation when using Javascript. For example, playing a complicated animation in reverse would be difficult in CSS as you would need to specify additional transition properties on every piece of the animation.

Overhead

Javascript and CSS have a key difference, which is overhead. CSS is the same in every development environment and it is simple to learn and fairly straightforward. Javascript, on the other hand, is almost the opposite. Although basic Javascript has animation functionality, most animation is done through an additional library such as GSAP or velocity.js. Developers who are familiar with one library may not be familiar with another, meaning much development time must be spent on training. Additionally, many development environments may be using another Javascript library such as JQuery for non-animation development, which will lead to conflicts as many Javascript libraries are not compatible. Therefore, when developing it is important to consider the overhead cost of Javascript libraries.

Performance

Performance is another important consideration, especially if developing on mobile platforms. CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS. Javascript performance depends on the library used and puts the burden on the developer to optimize. For example, JQuery is a commonly used library but is notorious for slow animation performance because it is not designed with animation in mind. Also, adding Javascript libraries creates more overhead and can increase page load times especially for mobile devices. There are lightweight libraries out there specifically for this issue, but lightweight libraries also have less functionality. As mentioned before, you may have to optimize performance which is completely dependent on the library being used. Using CSS or Javascript for animation is highly dependent on what you are trying to do. Javascript can be very powerful but is completely unnecessary if all you are doing is something like fading in a pop up window. Most of the time just using CSS is enough, but complicated animations can be difficult to do without using Javascript. If you decide to use Javascript, make sure to pick a suitable library which does not conflict with other libraries you may already be using.

8 things for website redesign

With all the experience and knowledge gained from your previous websites a website redesign should be an opportunity to turn your web presence into a success. However due to a lack of proper thought and planning many redesigns can still fail to meet a business’s needs. Things to consider and discuss with your web team prior to any redesign work commencing include the following:

1. Identify the purpose of the website

Decide what the website is actually required to do. This may have been something that you looked at when you first had your website built, but has your business changed?

  • Is the website there to provide basic information?
  • Are you looking to get sales or enquiries?
  • Does the website need to support existing clients or employees?
  • Do you want to build a full community around the brand and encourage reviews making the website more social?

Knowing what you want to accomplish through the website will help to determine its design, structure and the platform/software that the website will be built in.

2. Analyze your existing website’s metrics

If search engine positions are important for your website then you should have a full review of your website metrics prior to planning your redesign. Evaluate your current site’s performance to help analyze your current positioning and attainment. Metrics to consider include –

  • number of visitors,
  • click-thru-rate,
  • bounce rate,
  • time on site,
  • and current SEO rankings.

Come armed with this information to your first meeting with your web designer (or at least with access to your analytics so you can review it together) to ensure weak points are addressedand strong areas are not lost in the redesign, which could then negatively impact your seo or user experience.

3. What’s working on your current website and what isn’t

With your marketing team make a list of everything that you like about your current website. It could be the navigation, certain pages or functionality, or parts of the design. Identify what is currently “working” so that you know what you want to keep with the next iteration. Then do the reverse, working through the areas of the website which you want to change, which customers have problems with or search engines don’t pick up on.

It may also be worth asking a loyal customer or someone not directly associated with your website what they like (or don’t like). Giving you an unbiased view. It could be that an area of the website of which you are fond, such as a Flash navigation, actually annoys your customers and acts as a deterrent in getting people through your website.

4. Can the new website save you time and money?

When looking at a website redesign it is worth having a quick review of your business and it’s day to day processes. Is there a particular question clients are always asking or a process you spend lots of time on, which could be automated. Talk to your website designer about ‘painful’ or time consuming areas of your business to see whether the website can be used to better support your client base or even automate some of your internal processes.

5. What’s the most important part of the website?

Every website has a focal point, an area you want to draw people to, to promote your business or a call to action. For some it’s the contact form, for others it’s a blog or an ebook, maybe it’s your case studies or services section, or it could be your client testimonials. Your new design should emphasize these areas and help them to get more attention. Put teasers on the home page with a call-to-action drawing them in. Make sure they’re accessible from every page on your website. Provide incentives for visitors who make it to these pages and take a desired action. Your website should be set up to funnel people to these pages so that you’re sure they’re seeing them.

6. Look at the competition

While it isn’t wise to obsess about what your competitors are doing, it can be very helpful to understand where they may be out selling and out foxing you. Look at how they are marketing themselves and their services. Don’t copy your competition but instead use it as an opportunity to learn where you can improve your website.

7. Develop your USP

Before you begin developing content for your new website, be sure you identify what makes you unique and be sure that this messaging is consistent across your entire website. It’s important you immediately answer why someone should contact you or otherwise stay on your website rather than look at your competitors.

8. Have an ongoing content development strategy

A consistent stream of valuable, informative content not only supports your customers and ensures you look knowledgeable and experienced in your industry, but it also helps you gain good positions in the search engines. Develop a strategy for building this content on the new website, assigning roles and specifying targets for ongoing content production.