This document appears to be a presentation about responsive web design and the web design process. It begins by introducing the speaker and provides some background information. It then outlines the key steps in a responsive web design process, including discovery, information architecture, wireframing, visual design, development, testing, content migration, launch, and ongoing support. Interactive examples and references are provided throughout to illustrate concepts. The overall message is about having a well-structured, iterative process to create responsive websites that meet user needs across devices.
Atomic Design - An Event Apart San DiegoBrad Frost
Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
Atomic Design - An Event Apart San DiegoBrad Frost
Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
The web is not a fixed width. So if the medium is fluid, should the process be fixed? Open source evangelist Steve Fisher prefers designing within the browser, especially when responsive design is a requirement since Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow.
Learn how to develop a fluid process to match the fluidity of interactive design as Steve shows you why a responsive process is a responsible process. He’ll explore some of his recent work helping clients transform their processes to fit a responsive workflow and share some of the tips, techniques and processes he’s developed. One web to rule them all!
How well are you delivering your experience?Andrew Fisher
The web has always had fragmentation, though not on the scale we're seeing now with new devices - and that's before we consider hybrid-touch laptops, microscreen smart watches, gesture interfaces or displays the size of a wall. Testing all the user permutations of your application is becoming almost impossible, so how do you go about working out whether you're delivering a good experience or not?
In this session, we'll look at the use of responsive design oriented analytics coupled with a few statistical methods that will help determine how well you're delivering your experiences and highlighting the areas you need to focus on next in order to maintain a decent level of coverage.
Brad Frost
Web designer
Style Guide Best Practices
We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.
HTML5 is here and we should use it right now. It is fun and interesting to look at cool CSS3, Canvas and Video demos but our main goal should be to make our day-to-day life easier by using the cool things browsers offer us right now. Learn about local storage, simplifying interfaces and using HTML5 right now!
Wait what? How to Enhance your Responsive Process with Content QuestionsEileen Webb
Many of the challenges that come from building a responsive site are based not in the technical implementation, but in the content. All your copy is now readable on a small screen, but is it useful there? Is it still serving the site and business goals? Who's actually going to write those blog posts?
We’ll talk about some approaches that content strategists use to figure out how (and if!) content should be displayed on your site, whether you’re dealing with a heavy archive of articles or a nimble webapp. We’ll explore common techniques and questions you can integrate into your workflow that will help you and your client think through the long-term content needs and goals of a new site.
Full text transcript at http://webmeadow.com/blog/archives/201405/wait-what-how-enhance-your-responsive-process-with-content-questions
Web Design for Literary Theorists I: Introduction to HTMLPatrick Mooney
First in a series of workshops for graduate students in the Department of English at UC Santa Barbara.
More information: http://patrickbrianmooney.nfshost.com/~patrick/ta/lead-ta/web-design/2013-2014/
YouTube screencast with audio: http://youtu.be/7Sv0LLGgi9A
Responsive design has landed in lots of places and is becoming business as usual. Time to reflect: are we doing the right things in the right ways? How do we gracefully move away from desktop-first designs? And how do you approach a responsive design with your complete team in your agile workflow? Let's take a look at the current status of responsive design and figure out how to incorporate a mobile-first workflow in your business.
My closing talk for this year's Fronteers conference in Amsterdam, the Netherlands about just how cool it is to be someone who builds things for the web.
Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning TalkSteve Fisher
It's time to kick all of the elephants out of the room.
Letting go of preconceived notions is a requisite skill for creating whole-hearted user experiences. In his talk, Steve will help you look at your current projects through a vulnerable lense to see imperfections, pre-empt design oversights, and let go of personal defense mechanisms that interfere with the creative process. This session will give you the tools to free project teams to express true creativity, to bond, and to connect at a deeper level with each other and the people using our products and designs.
Conflict is the key to great experiencesSteve Fisher
It’s time to kick all of the elephants out of the room. Letting go of preconceived notions is a requisite skill for creating whole-hearted user experiences. In his talk, Steve will help you look at your current projects through a vulnerable lens to see imperfections, pre-empt design oversights, and let go of personal defence mechanisms that interfere with the creative process. This session will give you the tools to free project teams to express true creativity, to bond and to connect at a deeper level with each other and the people using our products and designs. What is the best makeup of any given project team? Why should you mine for conflict and how does it enable you to produce better designs? Find out the answers to all these questions and more!
The web is not a fixed width. So if the medium is fluid, should the process be fixed? Open source evangelist Steve Fisher prefers designing within the browser, especially when responsive design is a requirement since Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow.
Learn how to develop a fluid process to match the fluidity of interactive design as Steve shows you why a responsive process is a responsible process. He’ll explore some of his recent work helping clients transform their processes to fit a responsive workflow and share some of the tips, techniques and processes he’s developed. One web to rule them all!
How well are you delivering your experience?Andrew Fisher
The web has always had fragmentation, though not on the scale we're seeing now with new devices - and that's before we consider hybrid-touch laptops, microscreen smart watches, gesture interfaces or displays the size of a wall. Testing all the user permutations of your application is becoming almost impossible, so how do you go about working out whether you're delivering a good experience or not?
In this session, we'll look at the use of responsive design oriented analytics coupled with a few statistical methods that will help determine how well you're delivering your experiences and highlighting the areas you need to focus on next in order to maintain a decent level of coverage.
Brad Frost
Web designer
Style Guide Best Practices
We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.
HTML5 is here and we should use it right now. It is fun and interesting to look at cool CSS3, Canvas and Video demos but our main goal should be to make our day-to-day life easier by using the cool things browsers offer us right now. Learn about local storage, simplifying interfaces and using HTML5 right now!
Wait what? How to Enhance your Responsive Process with Content QuestionsEileen Webb
Many of the challenges that come from building a responsive site are based not in the technical implementation, but in the content. All your copy is now readable on a small screen, but is it useful there? Is it still serving the site and business goals? Who's actually going to write those blog posts?
We’ll talk about some approaches that content strategists use to figure out how (and if!) content should be displayed on your site, whether you’re dealing with a heavy archive of articles or a nimble webapp. We’ll explore common techniques and questions you can integrate into your workflow that will help you and your client think through the long-term content needs and goals of a new site.
Full text transcript at http://webmeadow.com/blog/archives/201405/wait-what-how-enhance-your-responsive-process-with-content-questions
Web Design for Literary Theorists I: Introduction to HTMLPatrick Mooney
First in a series of workshops for graduate students in the Department of English at UC Santa Barbara.
More information: http://patrickbrianmooney.nfshost.com/~patrick/ta/lead-ta/web-design/2013-2014/
YouTube screencast with audio: http://youtu.be/7Sv0LLGgi9A
Responsive design has landed in lots of places and is becoming business as usual. Time to reflect: are we doing the right things in the right ways? How do we gracefully move away from desktop-first designs? And how do you approach a responsive design with your complete team in your agile workflow? Let's take a look at the current status of responsive design and figure out how to incorporate a mobile-first workflow in your business.
My closing talk for this year's Fronteers conference in Amsterdam, the Netherlands about just how cool it is to be someone who builds things for the web.
Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning TalkSteve Fisher
It's time to kick all of the elephants out of the room.
Letting go of preconceived notions is a requisite skill for creating whole-hearted user experiences. In his talk, Steve will help you look at your current projects through a vulnerable lense to see imperfections, pre-empt design oversights, and let go of personal defense mechanisms that interfere with the creative process. This session will give you the tools to free project teams to express true creativity, to bond, and to connect at a deeper level with each other and the people using our products and designs.
Conflict is the key to great experiencesSteve Fisher
It’s time to kick all of the elephants out of the room. Letting go of preconceived notions is a requisite skill for creating whole-hearted user experiences. In his talk, Steve will help you look at your current projects through a vulnerable lens to see imperfections, pre-empt design oversights, and let go of personal defence mechanisms that interfere with the creative process. This session will give you the tools to free project teams to express true creativity, to bond and to connect at a deeper level with each other and the people using our products and designs. What is the best makeup of any given project team? Why should you mine for conflict and how does it enable you to produce better designs? Find out the answers to all these questions and more!
Stories of Discovery: A responsive journeySteve Fisher
Transforming a government website with 200 content authors, tens of thousands of pages, and close to 100 different content templates into a responsive design system is tricky business. In 2013, we led a project to update and future-proof one of Canada’s fastest-growing municipalities’ main communication channel: Surrey.ca.
The responsive redesign achieved unanimous support from city staff, business stakeholders, council, and the mayor. Mobile traffic has increased by 300% since launch. The improved governance and content workflow processes have facilitated new collaborations between silo’d City departments. The Surrey Web Team described this as one of the most positive changes in recent history for the City’s external and internal communication. Most importantly, it created a sense of cohesion through a wholehearted responsive design process.
This project required a new approach. We needed the ability to connect deeply with everyone on our project team: client, vendor, and audience. We needed to get comfortable with imperfection, and fight through difficult moments as a team. We let go of our usual need to protect ourselves and maintain control, and worked together to solve our responsive design and adaptive content problems. Our collaborative creativity was a catalyst for changing the way the City communicates.
What you’ll take away from this talk:
- Understand how a responsive design process impacts team dynamics and workflow
- Learn how to encourage collaboration across departments and conquer organizational silos
- Hear how a responsive discovery can change a project (and why that’s okay)
- Get cozy with your customers, stakeholders, and content authors – we’re all allies in the fight to make the web a better place
Responsive Discovery: The underpants of a great web project Steve Fisher
Responsive design and content can be daunting, especially within big systems. But don’t be afraid! This is your chance to find the humanity in your project: the emotional, political, cultural, and functional issues that make the difference.
Your discovery process can make or break your responsive project. Learn from our great successes—and horrible ideas that didn’t go quite as planned. Practical examples will show you what makes a discovery process work:
Understand how a responsive design process impacts team dynamics and workflow.
Learn how to encourage collaboration across departments and silos.
Find out how a responsive discovery can change a project (and why that’s okay).
Get cozy with your customers, stakeholders, and content authors. We are all allies in the fight to make the web a better place.
Responsive Process Joomla World Conference 2012Steve Fisher
An update on this session for the Joomla World Conference in San Jose.
The web is not a fixed width. So if the medium is fluid, should the process be fixed? Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow. Diving into responsive design projects can be daunting. Old design practices are cumbersome when thinking in terms of web systems that will span a wide variety of devices and dimensions.
Steve will delve into how he handles the responsive process or how he doesn't. A fluid process to match the fluidity of responsive design. Bam! We’ll also explore some of recent successes and failures while establishing why a responsive process is a responsible process.
One web to rule them all?
The web will never be the same! Each year the web feels like it hits critical mass and then it does it all over again. This session will dig into how to best engage with an ever changing web and how to connect with the new web. From responsive web design to changing our process.
It doesn’t really matter how great you think your website is if your intended user thinks it’s a loser. There are some very easy methods to getting your website headed down the right track and creating a positive user experience (UX) for your target audience.
In this presentation I discuss the steps that lead up to a the launch or re-launch of your website from a down-to-earth UX perspective. Each site is different, so while there are fundamentals there is also a strong need for critical thinking and creative solutions.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
21. 28 Days Later http://youtu.be/eunaclr-WgU - Zombie movie trailer (getting to know the
baseline story)
22. First things first: let’s meet up and get to know each other. From our early meetings and research, we'll establish communication protocols,
milestones and timelines, deliverables and scope, roles and expectations.
23. You want to know who you are working with...
Project planner
24. We will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’ll
analyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about your
industry. Our project analysis will guide us in understanding where your organization has been, what it is currently doing, and where it
wants to go in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time getting to really
understand your brand by analyzing past and present marketing materials, discussing future marketing strategies, and aligning them with
your web project.
26. Using the knowledge gained from our discovery conversations, we will audit existing content both quantitatively and
qualitatively. What exists on your current site? And, more importantly, is it doing what you need it to do? We'll create a
site map for your project and show where everything belongs. This process will inform what and how we
communicate, and establish the features your users need. Well-planned, well-structured content will help us create
both the interaction and visual design systems.
27. www.gathercontent.com
• Quantitative audit
• Qualitative audit
• Card sort
• High level site map
• Gap analysis
• User stories
28. All of the information found during the discovery phase will be complied into a concise document that outlines the search, content,
technical, and creative strategies. This document will act as the project map, keeping all team members in line with a focused strategy.
29.
30. From sketching to in-browser designs to documentation and everything in between.
32. UX sketch or paper prototype! http://www.commoncraft.com/video/zombies
33. We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish the
design system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsive
design.
35. One of our main goals is to keep content independent from design or presentation. Your content should never be dependent on a layout to
work properly. So, along with wireframes, you will receive a set of page tables for key content pages. Page tables identify each content area
in priority order, and identify the most important messages to communicate in each area.
36.
37. Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities established by the
page tables and feature list. Each and every view scenario will be documented to visualize all the content and features we’ve planned. Along
with that we’ll create rough greybox HTML prototypes to demonstrate responsive interaction patterns.
38.
39. With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typography that give each
site its unique look and feel. Through an iterative process between our team and yours, we’ll make all the big decisions about typographic
hierarchy, vertical rhythm, and interface details. We can create static visual mockups, browser-based prototypes, or both.
41. Next, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the grid
to hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking and
personality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.
44. The developers zombie movie http://www.sonypictures.com/previews/movies/
residentevilretribution/clips/4301/
45. Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested, HTML pages ready for testing.
We’ll make sure all content is governed by CSS and meets W3C standards. We’ll use JavaScript for interactive elements, rather than Flash or
Silverlight. We’ll also help you adhere to best practices for online readability, and include a print CSS for readers that want to print out your
content.
46.
47. At this stage, the technical architecture will be built out on a system like Open Text Web Site Management or Drupal 7, depending on your
organization’s needs. We’ll build out all of the site’s modular elements and e-commerce components, and set up a workflow process that
will help you maintain your content over the long term. This process goes hand-in-hand with the CMS Template Implementation, which will
integrate the HTML templates into the design or theme layer. By the time we’re done, everything will be looking good and working great!
48. Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone,
Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due
to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.
49. Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone,
Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due
to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.
50.
51.
52. At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helping our clients
create and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help you
define the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!
53. User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early in the project.
It's like moving into a new house – you need time to discover how everything works and get comfortable with living there. You’ll need time
to come to terms with how your content fits into the design and workflow, and make any adjustments and edits you need.
54. Sometimes things don’t turn out how you think they will. http://youtu.be/yfDUv3ZjH2k (that’s
not exactly like 28 Days Later)
56. We will prepare text and video documentation on to help you understand and use your new CMS and site. We will generally provide a
period of user acceptance testing following the official “handoff” of the website, to make absolutely sure that everything meets your needs.
We’ll also provide additional support and training where necessary, and take care of any bug fixes to make sure that your website is ready
for launch.
57.
58. So close! Next up, our team will create a launch plan to archive the current website (if needed) and release the new website to the public, as
well as a quality checklist to ensure that all project requirements are met. We’ll make sure that the new website is submitted to the
appropriate search engines, and that web analytics are installed and configured. We'll also work with our smarty-pants friend at the Status
Bureau to make sure you understand how to access and act on web analytics reports.
59. A website is a living thing that continues to grow and change throughout its lifecycle. So in some ways, your work is never done (sorry), but
achieving a milestone like this definitely deserves a party! Even though this is just the beginning of the real life of the website, it’s good to
celebrate after all this hard work. Nice work team. Now back to work!
68. Move from the inside out. Extrinsic vs intrinsic motivation. I want the world to be able to publish
their knowledge freely. I’ll create a distributed code base that anyone can use. It will be a CMS
called Drupal.
69. Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0
thing?
People don’t believe in what you do, they believe in why you do it.
These were just some examples. What will your aha! moment be?
This is what I think about what I do! I mean come on! I make the web a better place!\n
This is what almost everyone else thinks. You’re a what?\n
Well how about this...\n
Crossing the border, etc.\n
Ah ha! It all makes sense now!\n
Poor Steve\n
\n
\n
\n
\n
\n
First things first: let’s meet up and get to know each other. From our early meetings and research, we'll establish communication protocols, milestones and timelines, deliverables and scope, roles and expectations.\n
You want to know who you are working with...\nProject planner\n
We will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about your industry. Our project analysis will guide us in understanding where your organization has been, what it is currently doing, and where it wants to go in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time getting to really understand your brand by analyzing past and present marketing materials, discussing future marketing strategies, and aligning them with your web project.\n
Personas, audience profiles\n\n
Using the knowledge gained from our discovery conversations, we will audit existing content both quantitatively and qualitatively. What exists on your current site? And, more importantly, is it doing what you need it to do? We'll create a site map for your project and show where everything belongs. This process will inform what and how we communicate, and establish the features your users need. Well-planned, well-structured content will help us create both the interaction and visual design systems.\n\n\n
Quantitative audit\nQualitative audit\nCard sort\nHigh level site map\nGap analysis\nUser stories\n
All of the information found during the discovery phase will be complied into a concise document that outlines the search, content, technical, and creative strategies. This document will act as the project map, keeping all team members in line with a focused strategy.\n
\n
From sketching to in-browser designs to documentation and everything in between.\n
High fidelity prototype or in-browser design!\n
UX sketch or paper prototype!\n
We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish the design system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsive design.\n
One of our main goals is to keep content independent from design or presentation. Your content should never be dependent on a layout to work properly. So, along with wireframes, you will receive a set of page tables for key content pages. Page tables identify each content area in priority order, and identify the most important messages to communicate in each area.\n
\n
Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities established by the page tables and feature list. Each and every view scenario will be documented to visualize all the content and features we’ve planned. Along with that we’ll create rough greybox HTML prototypes to demonstrate responsive interaction patterns.\n
\n
With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typography that give each site its unique look and feel. Through an iterative process between our team and yours, we’ll make all the big decisions about typographic hierarchy, vertical rhythm, and interface details. We can create static visual mockups, browser-based prototypes, or both.\n
Get it in the browser!\n
Next, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the grid to hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking and personality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.\n
Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested, HTML pages ready for testing. We’ll make sure all content is governed by CSS and meets W3C standards. We’ll use JavaScript for interactive elements, rather than Flash or Silverlight. We’ll also help you adhere to best practices for online readability, and include a print CSS for readers that want to print out your content.\n
\n
At this stage, the technical architecture will be built out on a system like Open Text Web Site Management or Drupal 7, depending on your organization’s needs. We’ll build out all of the site’s modular elements and e‐commerce components, and set up a workflow process that will help you maintain your content over the long term. This process goes hand-in-hand with the CMS Template Implementation, which will integrate the HTML templates into the design or theme layer. By the time we’re done, everything will be looking good and working great!\n
Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.\n
Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.\n
\n
\n
At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helping our clients create and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help you define the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!\n
User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early in the project. It's like moving into a new house – you need time to discover how everything works and get comfortable with living there. You’ll need time to come to terms with how your content fits into the design and workflow, and make any adjustments and edits you need.\n
\n
Wasn’t this supposed to look like a normal zombie movie...\n
We will prepare text and video documentation on to help you understand and use your new CMS and site. We will generally provide a period of user acceptance testing following the official “handoff” of the website, to make absolutely sure that everything meets your needs. We’ll also provide additional support and training where necessary, and take care of any bug fixes to make sure that your website is ready for launch.\n
\n
So close! Next up, our team will create a launch plan to archive the current website (if needed) and release the new website to the public, as well as a quality checklist to ensure that all project requirements are met. We’ll make sure that the new website is submitted to the appropriate search engines, and that web analytics are installed and configured. We'll also work with our smarty-pants friend at the Status Bureau to make sure you understand how to access and act on web analytics reports.\n
A website is a living thing that continues to grow and change throughout its lifecycle. So in some ways, your work is never done (sorry), but achieving a milestone like this definitely deserves a party! Even though this is just the beginning of the real life of the website, it’s good to celebrate after all this hard work. Nice work team. Now back to work!\n
It’s a celebration of life!\n
\n
This is what happens when you skip ahead and don’t follow the process.\n
\n
\n
One web concepts really tie things together. Rather than multiple sites there is just one.\n
\n
\n
Move from the inside out. Extrinsic vs intrinsic motivation. I want the world to be able to publish their knowledge freely. I’ll create a distributed code base that anyone can use. It will be a CMS called Drupal.\n
Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0 thing?\nPeople don’t believe in what you do, they believe in why you do it.\n\nThese were just some examples. What will your aha! moment be?\n