Simple Web Design Case Study (Website Design Process Walkthrough)

  • 3,281 views
Uploaded on

Walk through the simple web design process our web strategy agency used when creating the custom web design for Hemingways Expeditions of East Africa. …

Walk through the simple web design process our web strategy agency used when creating the custom web design for Hemingways Expeditions of East Africa.

This slideshow is a (*VERY*) abbreviated overview of the complete, thorough web design process case study we published in our blog here: http://www.timeforcake.com/blog/post/website-design-case-study-part-1-of-6/

-------------------------------------------
Quick Overview:
-------------------------------------------
Intro & Meet the Client
Wireframes
Design Document
Moodboard
Completing the Design

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,281
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
67
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. STEPS IN A SIMPLE WEBSITEDESIGN PROCESSWebsite Design Case StudyHemingways Expeditions
  • 2. THIS 6-PART CASE STUDY COVERS: #1 Intro and Meet the Client #2 Wireframes #3 The Design Document #4 The Moodboard #5 Completing the Design #6 Wrapping it All Up
  • 3. #1 INTRO AND MEET THE CLIENTMEET THE CLIENT: Hemingways Expeditions For decades, Hemingways Expeditions has been one of East Africas premier safari and tour operators. They specialize in crafting custom itineraries for adventures seekers from around the the globe who are looking to experience the wonders of Tanzania, Kenya, Rwanda, or Uganda. View the live Hemingways site here: www.hemingways-expeditions.com
  • 4. #1 INTRO AND MEET THE CLIENTMEET THE CLIENT: Hemingways Expeditions Homepage: Before Homepage: After
  • 5. #1 INTRO AND MEET THE CLIENTPRE-DESIGN STAGE: The essential first stepPre-design work sets the stage for effective websites. During our pre-design stage with Hemingways, we: ➤ gained a deep understanding of their company’s services, values, target customers, and vision ➤ conducted a thorough review of their available assets (literature, photography, promotional materials, etc.) ➤ began to consider the new site’s architecture/structure
  • 6. #1 INTRO AND MEET THE CLIENTPRE-DESIGN STAGE: The essential first stepThe information we collected in the pre-design stage helped us makeobjective, smart decisions and plan: ➤ the websites primary goals ➤ what story we wanted the site to tell ➤ how the site would be organized ➤ what type of information visitors would be most interested in ➤ what we wanted to encourage website visitors to do upon arriving at the new website
  • 7. #2 WIREFRAMESWIREFRAMES: Skeleton page layoutsWhat do wireframes do? ➤ Wireframes allow clients to understand the relative importance and placement of the different pieces and parts that will make up individual web pages.What don’t wireframes do? ➤ Address color, fonts, textures, or design styling ➤ Show the exact sizing or placement of the various pieces and parts that will go into a page* We typically use Balsamiq to design and generate our wireframes.
  • 8. #2 WIREFRAMESWIREFRAMES: Skeleton page layoutsCompare the Hemingways approved homepage wireframe to the finalapproved homepage design:
  • 9. #2 WIREFRAMESWIREFRAMES: Skeleton page layoutsWireframe complexity varies. Sometimes additional specifications, detailsand notes are incorporated. Here are samples from other projects:
  • 10. #3 THE DESIGN DOCUMENTDESIGN DOCUMENT: Clear site guidelinesOur design documents are four to eight-page reports that serve as design-direction agreements between ourselves and our clients. They discussdetails such as color palettes, textures, requirements and photography.Design documents are a mixture of the following four key elements: ➤ site goals ➤ the vision and story the client wants to tell ➤ client requirements ➤ our expertise
  • 11. #3 THE DESIGN DOCUMENTDESIGN DOCUMENT: Clear site guidelines After continuing to collect additional information, we developed a five-page document which detailed: ➤ Potential color palettes ➤ Focus points and guidelines for the site’s design ➤ Details on the site’s overall look and feel ➤ A recap of Hemingway’s feedback competitor websites’ designs
  • 12. #4 THE MOODBOARDMOODBOARDS: Translate the design document Moodboards provide clients with their first visual sense of what their design will look and feel like. Think of it like this: Moodboards are the fancy clothing “skin” that sit over the naked wireframe skeletons. If you’ve done your upfront planning well, the moodboard should always delight, never unpleasantly surprise, the client.
  • 13. #5 COMPLETING THE DESIGNDESIGN WORK: Putting it all togetherWhere to begin? ➤ Some designers prefer to start working on the design of any page that’s not the homepage first ➤ We prefer to start designing the homepage first as it typically makes the most sense to clients and sets the tone for the rest of the site
  • 14. #5 COMPLETING THE DESIGNDESIGN WORK: Putting it all together Upon completing and receiving approval from Hemingways for the homepage design, we designed 2 other pages within the site for approval before moving forward. The thorough pre-planning we completed upfront with Hemingways ensured everyone was on the same page every step of the way.
  • 15. #5 COMPLETING THE DESIGNDESIGN WORK: Putting it all togetherTo recap, this simple website design process case study moved throughthese steps: #1 Intro and Meet the Client #2 Wireframes #3 The Design Document #4 The Moodboard #5 Completing the Design
  • 16. #6 WRAPPING IT ALL UPFINAL STEPS: Moving forward after design After Hemingways approved and signed off on the homepage and internal pages, the development stage began. The development stage included coding and integration of Content Management System (CMS) that allows Hemingways to manage site updates in-house.
  • 17. #6 WRAPPING IT ALL UPFINAL STEPS: Moving forward after designRemember:Effective, goal-oriented design takes planning, teamwork, extensivecommunications, and a clear process.
  • 18. GET THE FULL STORY:Read the full Hemingways Expeditions case study:www.timeforcake.com/blog/post/website-design-case-study-part-1-of-6/Learn more about timeforcake:www.timeforcake.com