best practice web design - athlone 22.04.10
DESCRIPTION
Presentation given by Ed Field, MD of Digino at the Enterprise Ireland "Using the Internet to Compete in International Markets" event in Athlone - 22nd April 2010TRANSCRIPT
Best Practice Web Design
Enterprise Ireland
22nd April 2010
By which we mean.....best practice website research,
strategy, planning, functional design, user testing, graphic
design, copywriting, seo, image selection, build and
snagging!!!
Digino: The direct digital marketing experts
Maximise online sales. Minimise costs.
Discover online opportunities, set strategy
Full team to implement and manage
Continuous development and optimisation
Who we work with
We deliver the most value for clients where: Digital marketing and especially search marketing are
a crucial part of their business There is a need to generate a high volume of online
sales or online leads
5 steps to create an effective website
1. Research, Strategy & Plan: including 3C’s
2. Content: text, images, graphics & video
3. Functional design: wireframes, functional spec, user testing
4. Graphic design: concepts, templates, graphics
5. Build: 3rd parties, code, snagging
Tactics without
strategy is the noise
before defeat
Sun Tzu
The right strategy makes any tactic work better. The right strategy puts less pressure on executing your tactics perfectly.
Seth Godin
1. Research, Strategy & The PlanThe most important step
1. Research, Strategy & PlanCompany• How well do you present yourself – remember : garbage in, garbage out, • Audit our current online presence – website, analytics, search engine visibility
Customers• Ask our customers how they use the net• What does our market need online? What is the market searching for online?
Use Google’s keyword tool.• Where are our customers online? What sites are used?• Understand online trends in our sector
Competitors• Audit our competitors online presence• Examine our sector in others markets e.g. UK & US• Examine related industries that are strong online.
2. Content• Text, images, graphics & video• Major element of the project
Tips:• Short, clear, digestible, keyword rich,
benefit laden, call to action• Pyramid structure: headline, intro, more
detail, additional information • Who is the copywriter?
3. Design functional
• Personas - user centered design• User journeys - information architecture• User testing• Wireframes
Can be represented by journey maps, wireframes, functional specification document, prototype.....
3. Design functional – persona’s
Independent Colleges Site Flow1: Overview
Homepage
About UsContact UsApply Online CareersCurrentStudents
Sitemap
Generic Pages
DirectoryMain Page
Student Type(eg Undergrad)
x4 avg
Course Directory
Course ListA-Z
CourseSuggestion
Tool (Proposed)
The Campus
CampusMain Page
Why ChooseIC?
Location
Facilities
Accommodation
Student Life
FacultyMain Page
Staff Profiles
Course Index(Student type
eg Undergrad)x4 avg
Course Page(eg LL.B Law)
x10 avg
Faculty (x5)
Faculty Media
Career Advisor(Proposed)
Faculty News
Testimonials
Study Type(eg full or part time)
x2
News
New Courses
3. Design functional – user journey
Independent Colleges Site Flow
Homepage
About UsContact UsApply Online CareersCurrentStudents
Sitemap
Generic Pages
DirectoryMain Page
Student Type(eg Undergrad)
x4 avg
Course Directory
Course ListA-Z
CourseSuggestion
Tool (Proposed)
The Campus
CampusMain Page
Why ChooseIC?
Location
Facilities
Accommodation
Student Life
FacultyMain Page
Staff Profiles
Course Index(Student type
eg Undergrad)x4 avg
Course Page(eg LL.B Law)
x10 avg
Faculty (x5)
Faculty Media
Career Advisor(Proposed)
Faculty News
Testimonials
Study Type(eg full or part time)
x2
News
2: User Journeys. Student (a) Knows What Student Type They Are
New Courses
3. Design functional – user journey
Independent Colleges Site Flow
Homepage
About UsContact UsApply Online CareersCurrentStudents
Sitemap
Generic Pages
DirectoryMain Page
Student Type(eg Undergrad)
x4 avg
Course Directory
Course ListA-Z
CourseSuggestion
Tool (Proposed)
The Campus
CampusMain Page
Why ChooseIC?
Location
Facilities
Accommodation
Student Life
FacultyMain Page
Staff Profiles
Course Index(Student type
eg Undergrad)x4 avg
Course Page(eg LL.B Law)
x10 avg
Faculty (x5)
Faculty Media
Career Advisor(Proposed)
Faculty News
Testimonials
Study Type(eg full or part time)
x2
News
2: User Journeys. Student (b) Knows What Faculty They Are Looking For
New Courses
3. Design functional – user journey
Independent Colleges Site Flow
Homepage
About UsContact UsApply Online CareersCurrentStudents
Sitemap
Generic Pages
DirectoryMain Page
Student Type(eg Undergrad)
x4 avg
Course Directory
Course ListA-Z
CourseSuggestion
Tool (Proposed)
The Campus
CampusMain Page
Why ChooseIC?
Location
Facilities
Accommodation
Student Life
FacultyMain Page
Staff Profiles
Course Index(Student type
eg Undergrad)x4 avg
Course Page(eg LL.B Law)
x10 avg
Faculty (x5)
Faculty Media
Career Advisor(Proposed)
Faculty News
Testimonials
Study Type(eg full or part time)
x2
News
2: User Journeys. Student (c) Doesn’t Know What They Want To Do
New Courses
3. Design functional – user journey
3. Design functional – wireframe
3. Design functional – wireframe
3. Design functional – wireframe
3. Design functional – wireframe
3. Design functional – wireframe
4. Graphic design
1. Moodboards – rough ideas
2. Concept templates – design applied to wireframes
3. Final templates – from which all pages are based
4. Additional graphics elements – to style and enrich all key pages
Moodboard
Moodboard
Design concept
5. Build
• Use 3rd party applications where possible – enormous arrays of free and low cost solutions available
• Code – ensure best practice coding is used
• CMS – if needed, we recommend WordPress
• Snagging – site to be fully snagged by provider before client completes their detailed review
Avoid getting a shell where you add the content and images!!
5 steps – review
1. Research, Strategy & Plan: including 3C’s
2. Content: text, images, graphics & video
3. Functional design: wireframes, functional spec, user testing
4. Graphic design: concepts, templates, graphics
5. Build: 3rd parties, code, snagging
Strategy, Plan20%
Content10%
Functional Design
20%
Graphic Design
20%
Build30%
The 5 step process How your service provider might invest their
timeWill vary with each project
A few quick points....
The people: responsibility/resources/skills/ Timeframe: from 3 months The budget: planning from €3K, design &
build from €7K..... but good to budget as a complete marketing program
Budgets – the full picture
Sample breakdown by resources required
Websites – Some before and afters to show what can be achieved
New site – Preview: http://www.diginomarketing.com/clients/irishferries/site/index-ie-uk.asp
5 steps to create an effective website
1. Research, Strategy & Plan: including 3C’s
2. Content: text, images, graphics & video
3. Functional design: wireframes, functional spec, user testing
4. Graphic design: concepts, templates, graphics
5. Build: 3rd parties, code, snagging
