Download Report

a bright bold creative web design agency
People ignore design that ignores people.
- Frank Chimero
Design is not just what it looks like.
Design is how it works.
- Steve Jobs
JADU SPACECRAFT
AN INTRODUCTION
TO GOOD DESIGN
The moment a customer experiences your organisation, is the moment an
emotional connection is made. They need your help, your experience, your
products and services. They are your audience. Your users.
At Spacecraft, we know the value of brand and the value of user experience. We know
the value of messages and the journeys your users take and we work hard to learn the
value of your business.
Your customers deserve to see the right messages and tasks on a device of their choice.
So they can engage with you and start the conversation.
Spacecraft passionately design and develop accessible, dynamic and stylish websites
through good planning, hard work, honesty and experience.
WE LOVE WHAT WE DO. ENTHUSIASM AND
EXPERIENCE COUNT AND WE HAVE BAGS OF IT BUT
OUR APPROACH IS GOVERNED BY COMMON SENSE.
Your website should scale with you as technology and the web evolves over time. We ensure
websites scale with each release, through good planning, creativity and responsibility.
Whilst there is a surface similarity between print design and web design, Web design is
much closer to product or industrial design. Responsible web design means architecture,
accessibility, usability, scalability, functionality, content strategy and performance need to
be considered as we design and develop digital services.
We invest in the future through the technology, standards and design principles we use
ensuring your organisation’s web presence does too. We love what we do and strive to be
better everyday.
WHAT WE DO
Taking the guesswork out of design and making the process as informed
and intuitive as possible is our goal. We offer a proven, yet flexible process
that allows us to work collaboratively and efficiently whilst focusing on your
unique needs.
Every project is different and each working relationship unique but certain common
characteristics are found in all projects.
The essential elements to this process are good planning and research along with a
thorough design process. This includes getting the right look and feel for your website
and making sure the content hierarchy, key messages and calls to action are well
structured and clear. It has a job to do and we’re here to make sure it does it.
The elements listed below will give some insight in what to expect if you work with
Spacecraft. It’s our job to create the best process for you and your project.
Planning and research
Before we can start to design and develop your website, we need to understand your
organisational objectives, your potential audience and other factors that help establish
your vision. We can achieve this using the following techniques:
•
•
•
•
•
•
Design questionnaire and feedback.
Stakeholder workshops.
Scenario development.
Statistical analysis of site usage.
Design goals documentation.
Planning a strategy for content.
Getting the look and feel
To achieve the right look and feel for your new website, we’ll work with you to understand
your target audience more and work with your corporate branding and objectives to
determine the right path using the following tools:
•
•
•
•
The creation of style tiles, to help develop a design direction.
Reviewing established websites to inspire and inform a new look and feel.
HTML mock-ups, so you can interact with a design, before development begins.
Creating guides for making better landing pages.
Content hierarchy and layout
Separate to the look and feel, a good structure and layout is essential for a website. We need
to guide your users towards the goals and tasks they expect to complete, whilst organising
content to be as intuitive as possible. We can use the following techniques for achieving this:
•
•
•
•
•
•
The creation of wireframes, visual guides that represent layout and structure.
Establishing content hierarchy.
Wireframe prototypes, to test layout and content.
First click testing, getting quick user feedback on designs.
Sitemaps that display pages in a hierarchical tree.
Tree testing, to evaluate the success of a sitemap.
Putting it all together
The code behind your website is just as important as how it looks, as it needs to be
available to the largest possible audience using varying devices to access your content.
We do this using a sensible mixture of web standards, responsive design, HTML5 and
modern CSS along with a layer of Javascript to enhance experience.
With Jadu as a platform, the ways you deliver content, supply services and goods will
change and improve over time. The Spacecraft team are dedicated to designing and
developing the future with you through good planning, hard work and honesty. Solid
thinking and creativity leads to successs.
A BRIEF EXPLANATION
ON TECHNIQUE
It may help to briefly explain some of the processes we employ and what
they achieve for us. These are not limited to or set in stone, as we never
stop learning and will create a process and solution to suit your project.
The design questionnaire
To help capture your vision for the project, we’ve created a simple questionnaire.
The more information you can give us, the better we’ll be able to understand that vision.
We recommend you complete this questionnaire as a group so all stakeholders are able
to rationalise the vision together, making sure all opinions and ideas are considered. This
is key. The responses to this questionnaire will play a part in creating the brief.
Style tiles
Style tiles are all about the use of typefaces, colours and interface elements that
communicate the essence of a visual brand for the web. It’s the look-and-feel.
They help form a common visual language and provide a catalyst for discussions around
your vision for the website by removing the distraction of functionality, hierarchy and
layout. Like moodboards for interior design, but focused for the web.
Wireframes
A wireframe is a conceptual guide that represents the skeletal framework of a web page or
application, depicting layout of content, including interface elements and navigation systems.
Removing the design aesthetics or look and feel of the design allows us to concentrate
on content, key tasks and messages.
HTML Mock-ups
We’ve worked together to define the conceptual framework and look-and-feel, and
possibly a whole new brand. Now we dig into the details of the structure and interaction
of the website or application.
These are done in HTML and CSS, so you can see the designs in the context of a browser,
so you can hover over navigation and links to get a proper feel for how the final product
will work.
Scenario development
Scenarios or user journeys are a method for conceptualising and structuring a website’s
content and interface. These journeys allow us to shift away from thinking about structure
in terms of hierarchies and personalise the process by creating simple stories or
scenarios, so we can think about a user’s objective and design the journey to successfully
achieve it. Scenarios are helpful in planning a content strategy, wireframing, testing plus
measuring our success.
Stakeholder or design workshops
Workshops generally work best at the beginning of the design process, to either
collaborate in the wireframe process or sitemap and information hierarchy process. These
are creative workshops allowing the group to contribute ideas and solutions. Workshops
can be tailored to suit a project and your requirements plus increase true collaberation.
Wireframe prototypes
Just like wireframes these are visual guides that represent the skeletal framework and
layout of a web page and its content with the addition of them being interactive, so
we can move from one wireframe to the next. These work well with user scenarios, in
designing journeys to a specific task or goal.
First click testing
First click testing of wireframes or designs allows us to get quick feedback on the success
of the design early in the project to help inform our choices, allowing us to test the goal or
task oriented objectives we set early on and making sure we’re on the right track.
Sitemaps and content hierarchy
We can help by either reviewing or helping to create your websites hierarchy or sitemap,
which will inform how content is organised and define site structure and navigation paths.
We can use a process called card sorting for this, which gives us the insight needed to
make informed information architecture decisions.
Tree testing
Tree testing is to evaluate the success of a sitemap or content hierarchy by evaluating the
findability of topics in a website before we begin any interface design.
Responsive design
Responsive web design is an approach that suggests content and design should
respond to a user’s environment based on screen size, platform and orientation. As a
user switches from laptop to smartphone, the website should automatically switch to
accommodate for screen resolution and image size.
This is not one additional process to plug-in, but needs factoring into the project from
the very beginning. We design and build with responsive in mind as standard, but there
is always the option to dedicate more time and development to creating a remarkable
responsive experience.
AN INSIGHT INTO THE
MANCHESTER CITY
COUNCIL PROJECT
A responsive and user centred design, beautifully presented and utilising
the Jadu platform like never before.
Crafted mobile first and with data driven decisions, Spacecraft worked closely with
Manchester to produce something truly unique and that’s destined to change the face of
local government websites.
www.manchester.gov.uk
Powered by Jadu, handmade by Spacecraft.
1. ANALYSIS & STRATEGY
2. WIREFRAMES & PROTOTYPES
A great deal of consideration
went into the planning stage of
this project, with an emphasis on
analytics and content strategy.
Once we had a solid strategy in
place, wireframes were produced
to look at a consitant site structure
and hierarchy.
A full analytics review of Manchester’s old
site revealed where it was performing well
and where it was under-performing. We
helped the client decide upon clear site
goals and set out to meet them.
From countless initial, rough sketches we
set about creating responsive, interactive
wireframes that the communicated our ideas
for the layout, interactions and structure of
the site.
SOME KEY FEATURES
Fully responsive layouts
and interactions
Task-oriented
iconography and
interaction design
A ‘Mobile First’
approach to design
and content
3. VISUAL DESIGN
4. CMS IMPLEMENTATION
After wireframing and prototyping,
we worked closely with
Manchester’s in-house design
studio to design the fundamentals
of the site’s visuals.
Finally we moved on to
implementing these mockups
as templates for Manchester’s
implementation of the Jadu CMS.
Taking cues from ‘Style Tiles’ produced
by the studio, we turned our rough
prototypes into finalised responsive HTML
mockups.
The technical development produced
the completed, content-managed
implementation of the new Manchester
City Council website.
Create a collaborative environment by changing the
client/vendor relationship into one of true collaboration
- for the duration of a project there are no separate
camps, a great website is a product of symbiosis not
one of secular, almost arbitrary, decision making.
- Scott Riley, The lead User Experience Designer on the Manchester project
Making the design process as informed and as
thorough as possible creates great websites and great
user experience, which is just good business.
And that’s what we are all about. Passionate about
design, innovation and building a new, bolder and
brighter digital experience for you and your customers.
So, hire us.
Jadu Limited, Universe House, 1 Merus Court, Leicester LE19 1RJ
Call: 0116 222 7242
Mail: [email protected]
www.jadu.net/spacecraft