SlideShare a Scribd company logo
1 of 36
Nancy N. Adams

Wireframe and Mockup Examples
This wireframe is a view of the page layout.
                                                                                           Heald Street Horse
                                                                                           Farm
                                                                                          1.0     Amy Gage owns this farm and gives the riding
                                                                                                  lessons. This section includes important contact
                                                                                                  information as well as close up photos of two of
                                                                                                  the horses on the farm.

                                                                                                  I put the title/Welcome here, but, if the site was
                                                                                           1.1    going to have more pages, or to add more
                                                                                                  pages later, a menu could go here.


                                                                                                  Each tab represents a separate page and is the
                                                                                           1.2
                                                                                                  only menu area on the site with links to the
                                                                                                  following pages:
          Amy Gage: Life-long Equestrian
                                                                                                    About Us
 Amy got her first pony at age 6 and participated                                                   Riding Lessons
 in both                                                                                            Boarding
 4-H and Pony Club as a child. She rode western                                                     Camp
 as a kid but switched to English riding when her                                                   Find Us (Map)
 family moved to England in 1975. In 1983, she
                                                                                                  Three slideshows are listed here, though more
                                                                                           1.3
                                                                                                  could be added as more pictures are taken of
                                                                                                  riding lessons and other Horse Farm
                                                                                                  occasions.

                                                                                                  Flash slideshows are shown here. Of the
                                                                                           1.4
                                                                                                  slideshows included so far, two are collections
                                                                                                  of students during riding lessons. Another is of
                                                                                                  a painting paryt at the Farm in 2010.


                                                                                            1.5    This section is one scrolling page of text and photos,
                                                                                                   an introduction to the horses on the farm.
          Contact Amy Gage at 978-302-8024 (mobile).
          Or send an inquiry to Amy at amy@healdstreetfarm.com and she will get back to
          you.                                                                                    You’ll find this site at:
                                                                                                  http://www.healdstreethorsefarm.com
Heald Street Horse
                                 Farm
                                 1.0   Amy Gage owns this farm
                                 and gives the riding lessons.
                                 This section includes important
                                 contact information as well as
                                 close up photos of two of the
                                 horses on the farm.

Amy Gage: Life-long Equestrian
Heald Street Horse Farm
Nov –Dec 2010

                          Web UI Designer

                          Designed marketing
                          website for Horse Farm –
                          emphasizing riding lessons
                          and boarding of horses,
                          instructor credentials and
                          testimonials.

                          Created UI design
                          (content, photographs,
                          slideshow) and Front End
                          development (HTML, CSS,
                          Javascript).

                          This is a screenshot of the
                          web page. Included on
                          this page are tabs and
                          Flash slideshows.
GENEVA Group, Inc.
April - June 2010
Information Architect/Web Designer
 Designed functional transaction additions (registration, login, order placement
and history, size charts, etc.) for eCommerce site catalog in the fashion industry.
 Creatred Information Architecture, Wireframes, Mockups for use with NAV and
Sana.
GENEVA Group, Inc.                               April
- June 2010
Information Architect/Web Designer

                                     Catalogue
                                     Request
GENEVA Group, Inc.                                       April -
June 2010
Information Architect/Web Designer


                                      Designing functional
                                     transaction additions
                                     (registration, login, order
                                     placement and history, size
                                     charts, etc.) for eCommerce
                                     site catalog in the fashion
                                     industry.

                                      Creating Information
                                     Architecture, Wireframes,
                                     Mockups for use with NAV
                                     and Sana.
GENEVA Group, Inc.                      April - June
2010
Information Architect/Web Designer
                                     General Sales
                                     Order
GENEVA Group, Inc.                   April - June
2010
Information Architect/Web Designer


                                      Order Form
GENEVA Group, Inc.                    April - June
2010
Information Architect/Web Designer


                                     Shopping Basket
READBIND, Inc.     Nov,
2008 – May, 2009
READBIND, Inc.          Nov,
2008 – May, 2009
                   Wireframes
READBIND, Inc.     Nov,
2008 – May, 2009
Readbind, Inc. –             Nov,
2008 – May, 2009
                   Mockups – Ideas
Hill Holliday                                                                      July

2008 – August, 2008
Information Architect Consultant
 Reviewing, researching and redesigning IA for a New England telephone company FairPoint
website.
Hill Holliday         July

2008 – August, 2008
Hill Holliday
August – October, 2007

                         FairPoint Mockups
Hill Holliday
August – October, 2007

                         FairPoint Mockups
BACKCHANNELMEDIA   August – October, 2007
UI Designer




                     • Redesigned
                     company website,
                     portal and product
                     interfaces for Start-Up.

                     • Created wireframes/
                     use cases.
BackChannelMedia   August – October,
2007

                            Mockups
Competitive Analysis Example –
                           Classification
                                    Competitive Analysis Example –
                                    Customer Care
                                             Competitive Analysis Example –
                                             Packages, Products & Services
                                                     Competitive Analysis Example –
                                                     Web Technology

                                                     The Competitive Analysis is the
                                                     means to Identifying competitors and
                                                     evaluating their strategies to determine
                                                     their strengths and weaknesses
                                                     relative to those of your own product
                                                     or service.

                                                     It is a critical part of the company’s
                                                     marketing plan, evaluating competitors
                                                     by placing them in strategic groups
                                                     according to how directly they
                                                     compete for a share of the customer's
                                                     dollar.

BACK                                                 For each competitor or strategic group,
                                                     their product or service, its profitability,
CHANNEL                                              growth pattern, marketing objectives
                                                     and assumptions, current and past
MEDIA                                                strategies are listed, as well as
                                                     organizational and cost structure,
                                                     strengths and weaknesses, and size
                                                     (in sales) of the competitor's business.
        Aug, 2007 – Oct,
2007
Knights of Columbus                    Nov, 2006 – Feb, 2007
Catholic Information Services (CIS)-
     Site Map
Knights of Columbus               Nov, 2006 –

  Feb, 2007
    Catholic Information Services
Wireframes & Mockups
Knights of Columbus              Nov,

2006 – Feb, 2007
    Catholic Information Services
Knights of Columbus                    Nov,

2006 – Feb, 2007

                                      Intro
                      Web Designer:

                       Redesigned the
                      User Experience for a
                      micro site, including
                      site maps and
                      navigation. for the
                      KofC 125tth
                      Anniversary.

                       Reviewed web
                      financial application
                      prototypes for
                      design/usability issues
                      for local KofC
                      treasurers and made
                      recommendations for
                      more “findable” content
                      and more user friendly
                      navigation.
Knights of Columbus                       Nov, 2006 – Feb, 2007

Member Billing & Accounting Information                Search
Knights of Columbus                       Nov, 2006 – Feb, 2007

Member Billing & Accounting Information         Billing Address
Knights of Columbus                       Nov, 2006 – Feb, 2007

Member Billing & Accounting Information      Billing Information
Hewlett Packard
    2007
UI Consultant:
 As a member of a global web team, designed the next iteration of a dynamic, interactive
Global Customer Agent site through functional specs, leading the information and user
experience design process, designing customization mockups, including Web 2.0 screen
design mockups and winning the approval of the developers to add social networking that
would allow the users to help each other..
 Performed heuristic evaluation and contextual inquiry, creating prototypes, suggesting
Web 2.0 social networking solutions for large internal portal for worldwide group(s) of
18,000 service agents.
Hewlett Packard
    2007
BCBSMA (Blue Cross/ Blue Shield of MA)
    2004
Creative Director
 Managed and mentored an offshore team of UI Developers generating a new, very large, Java-based Provider Portal for
people working in Doctor’s offices, making creative recommendations regarding usability and design.
 Collaborated with client, design firm, project managers, and business analysts to create wireframes, mockups and
templates.
General Motors Mockups   2003
Iron Mountain
        2001
Search Criteria
Iron Mountain
        2001
Send a Message
Iron Mountain
        2001
Login & Change Password

More Related Content

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 

Wireframe and Mockup Examples

  • 1. Nancy N. Adams Wireframe and Mockup Examples
  • 2. This wireframe is a view of the page layout. Heald Street Horse Farm 1.0 Amy Gage owns this farm and gives the riding lessons. This section includes important contact information as well as close up photos of two of the horses on the farm. I put the title/Welcome here, but, if the site was 1.1 going to have more pages, or to add more pages later, a menu could go here. Each tab represents a separate page and is the 1.2 only menu area on the site with links to the following pages: Amy Gage: Life-long Equestrian About Us Amy got her first pony at age 6 and participated Riding Lessons in both Boarding 4-H and Pony Club as a child. She rode western Camp as a kid but switched to English riding when her Find Us (Map) family moved to England in 1975. In 1983, she Three slideshows are listed here, though more 1.3 could be added as more pictures are taken of riding lessons and other Horse Farm occasions. Flash slideshows are shown here. Of the 1.4 slideshows included so far, two are collections of students during riding lessons. Another is of a painting paryt at the Farm in 2010. 1.5 This section is one scrolling page of text and photos, an introduction to the horses on the farm. Contact Amy Gage at 978-302-8024 (mobile). Or send an inquiry to Amy at amy@healdstreetfarm.com and she will get back to you. You’ll find this site at: http://www.healdstreethorsefarm.com
  • 3. Heald Street Horse Farm 1.0 Amy Gage owns this farm and gives the riding lessons. This section includes important contact information as well as close up photos of two of the horses on the farm. Amy Gage: Life-long Equestrian
  • 4.
  • 5. Heald Street Horse Farm Nov –Dec 2010 Web UI Designer Designed marketing website for Horse Farm – emphasizing riding lessons and boarding of horses, instructor credentials and testimonials. Created UI design (content, photographs, slideshow) and Front End development (HTML, CSS, Javascript). This is a screenshot of the web page. Included on this page are tabs and Flash slideshows.
  • 6. GENEVA Group, Inc. April - June 2010 Information Architect/Web Designer  Designed functional transaction additions (registration, login, order placement and history, size charts, etc.) for eCommerce site catalog in the fashion industry.  Creatred Information Architecture, Wireframes, Mockups for use with NAV and Sana.
  • 7. GENEVA Group, Inc. April - June 2010 Information Architect/Web Designer Catalogue Request
  • 8. GENEVA Group, Inc. April - June 2010 Information Architect/Web Designer  Designing functional transaction additions (registration, login, order placement and history, size charts, etc.) for eCommerce site catalog in the fashion industry.  Creating Information Architecture, Wireframes, Mockups for use with NAV and Sana.
  • 9. GENEVA Group, Inc. April - June 2010 Information Architect/Web Designer General Sales Order
  • 10. GENEVA Group, Inc. April - June 2010 Information Architect/Web Designer Order Form
  • 11. GENEVA Group, Inc. April - June 2010 Information Architect/Web Designer Shopping Basket
  • 12. READBIND, Inc. Nov, 2008 – May, 2009
  • 13. READBIND, Inc. Nov, 2008 – May, 2009 Wireframes
  • 14. READBIND, Inc. Nov, 2008 – May, 2009
  • 15. Readbind, Inc. – Nov, 2008 – May, 2009 Mockups – Ideas
  • 16. Hill Holliday July 2008 – August, 2008 Information Architect Consultant  Reviewing, researching and redesigning IA for a New England telephone company FairPoint website.
  • 17. Hill Holliday July 2008 – August, 2008
  • 18. Hill Holliday August – October, 2007 FairPoint Mockups
  • 19. Hill Holliday August – October, 2007 FairPoint Mockups
  • 20. BACKCHANNELMEDIA August – October, 2007 UI Designer • Redesigned company website, portal and product interfaces for Start-Up. • Created wireframes/ use cases.
  • 21. BackChannelMedia August – October, 2007 Mockups
  • 22. Competitive Analysis Example – Classification Competitive Analysis Example – Customer Care Competitive Analysis Example – Packages, Products & Services Competitive Analysis Example – Web Technology The Competitive Analysis is the means to Identifying competitors and evaluating their strategies to determine their strengths and weaknesses relative to those of your own product or service. It is a critical part of the company’s marketing plan, evaluating competitors by placing them in strategic groups according to how directly they compete for a share of the customer's dollar. BACK For each competitor or strategic group, their product or service, its profitability, CHANNEL growth pattern, marketing objectives and assumptions, current and past MEDIA strategies are listed, as well as organizational and cost structure, strengths and weaknesses, and size (in sales) of the competitor's business. Aug, 2007 – Oct, 2007
  • 23. Knights of Columbus Nov, 2006 – Feb, 2007 Catholic Information Services (CIS)- Site Map
  • 24. Knights of Columbus Nov, 2006 – Feb, 2007 Catholic Information Services Wireframes & Mockups
  • 25. Knights of Columbus Nov, 2006 – Feb, 2007 Catholic Information Services
  • 26. Knights of Columbus Nov, 2006 – Feb, 2007 Intro Web Designer:  Redesigned the User Experience for a micro site, including site maps and navigation. for the KofC 125tth Anniversary.  Reviewed web financial application prototypes for design/usability issues for local KofC treasurers and made recommendations for more “findable” content and more user friendly navigation.
  • 27. Knights of Columbus Nov, 2006 – Feb, 2007 Member Billing & Accounting Information Search
  • 28. Knights of Columbus Nov, 2006 – Feb, 2007 Member Billing & Accounting Information Billing Address
  • 29. Knights of Columbus Nov, 2006 – Feb, 2007 Member Billing & Accounting Information Billing Information
  • 30. Hewlett Packard 2007 UI Consultant:  As a member of a global web team, designed the next iteration of a dynamic, interactive Global Customer Agent site through functional specs, leading the information and user experience design process, designing customization mockups, including Web 2.0 screen design mockups and winning the approval of the developers to add social networking that would allow the users to help each other..  Performed heuristic evaluation and contextual inquiry, creating prototypes, suggesting Web 2.0 social networking solutions for large internal portal for worldwide group(s) of 18,000 service agents.
  • 32. BCBSMA (Blue Cross/ Blue Shield of MA) 2004 Creative Director  Managed and mentored an offshore team of UI Developers generating a new, very large, Java-based Provider Portal for people working in Doctor’s offices, making creative recommendations regarding usability and design.  Collaborated with client, design firm, project managers, and business analysts to create wireframes, mockups and templates.
  • 34. Iron Mountain 2001 Search Criteria
  • 35. Iron Mountain 2001 Send a Message
  • 36. Iron Mountain 2001 Login & Change Password