Tag Archives: Website design

Web Design & Software

Web Design & Software

Did you know….. we don’t just create innovative web designs that help your business grow…. we also do software development?

Over the years Webfuel have helped many clients with advanced software development projects including:

  • An online clinical database that is currently tracking over 300,000 clinical episodes for over 60,000 patients
  • A project management database used by a university research departments to track grant applications
  • An order delivery and dispatch system for a national confectionary retailer that schedules the production and dispatch of hundreds of orders a day
  • A bespoke event tracking and booking system for a national training company

These are just a few examples of the kind of software projects we’ve worked on.

Our software is web based, meaning it can be accessed from any web browser. We bring the same level of expertise in usability to our software design as we do to our web design.

We make use of a range of core technologies when developing web based software applications including:

  • C#
  • Microsoft ASP.NET Core
  • Microsoft SQL Server
  • Angular
  • TypeScript

We can host your software application in Microsoft Azure data centres giving you unrivaled levels of security and scalablity.

Do you need a bespoke software application? Is there an area of your business process that would benefit from a system that is custom made to work the way you work, and that can be adapted and developed as your needs change?

Many business could make substantial savings and increases in productivity if some area of their process was moved into an online custom software application. If you think there may be some way we could help you with online bespoke software then please give us a call.

We’re always happy to talk though ideas with no obligation or hard sell.

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.

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.

website-content

why we need of good website content

High quality content is crucial to the success of any website in order to retain visitors and have a high ranking on search engines. Of course the design of the website is essential in making a good first impression on your visitors, but the content of the website is what will keep them coming back.

Leading search engines like Google are very particular when it comes to the content of a website. If your website does not have enough quality content then it simply will not rank highly within search results.  Google doesn’t see how your website ‘looks’ to visitors, so all it cares about is content, content, and content.

Original and Varied Content

It’s important to remember that internet users need a reason to keep visiting your site. Everyone has a limited amount of time to spend on-line and you need to offer your visitors something that will tempt them away from Facebook for 10 minutes, to see what your site has to offer.

It’s important therefore not just to have original content, but also to vary the content regularly in order to entice visitors to return to your site again and again.  The question of how often content should be added to a site is one we are asked a lot.  The answer of course is as often as possible!

In truth the answer depends on the type of site concerned.  Obviously a news / information site needs new content on almost a daily basis in order to remain relevant and attract a regular flow of visitors.  For other sites perhaps adding just a couple of new pages a month is sufficient to keep the site looking active.

Google will penalise sites which simply do not change their content at all for months on end, so whatever kind of site you have you must try to add some new content on a regular basis.

Titles and Meta Data

In the past websites have tended to rely on using page titles and meta data such as the common keyword and description tags to encourage Google to rank their sites highly for certain keywords or phrases.  To some extent search engines relied on the content within these special tags because it was much quicker and easier for them to process pages this way.

However with improvements in computing power search engines now have algorithms to properly analyse the entire content of a page, and most therefore ignore meta tags entirely when it comes to page ranking.  The exception is the title tag of a page which is still considered an important indicator of the page contents.

Keywords

Keywords are the king of the SEO world, and if you want to have a higher ranking on the search engines you need to understand what keywords your potential customers are searching on.  Search engines look for keywords within your website content to determine what a page is about.

Using the right keywords on a site can push it up the search engine rankings, but be careful!  If you overuse a keyword search engines can penalise your site, this is known as ‘keyword stuffing’ and is a common problem with older sites and content.

Content Generation

This all leaves one important question.  How do I get content for my site?  Clearly one option is to write the content yourself, and if this is something you feel comfortable doing then it’s also the cheapest option.

On the other hand many business owners simply do not have enough time to spend on developing high quality and original content for their website.  In these situations a professional copywriter may be your best option.  A good copywriter will take a brief which outlines the main themes to be discussed, and produce a high quality, well written article covering this theme and incorporating any necessary keywords. we can create a blog post of 500 words on a topic of your choosing .

Finally, it’s important to remember that any content on your site is primarily there for one reason; to generate revenue for you and your business.  Content generation is a form of marketing and like any form of marketing you get out what you put in.  A website should be a living breathing document that grows with time and reflects the dynamic nature of your business…. so get writing.