View source for Wikipedia:Teahouse/Design guidelines

<!-- header-->__NOTOC__
<div style="font-family: Helvetica Neue, Helvetica, arial, sans-serif; background-color:#f4f3f0; color: #525563; min-width: 730px; padding-bottom:68px">
<div style="background-color:#e7e9b3; height: 70px">
<div style="width: 730px; text-align:center; margin:auto">
<div style="text-align:left">
[[Wikipedia:Teahouse/Questions|<span style="color: #525563; position:relative; top: 5px; left:40px;"><span style="border-bottom:1px dotted">Question forum</span> {{TH guillemet}}</span>]][[Wikipedia:Teahouse/Hosts|<span style="position:relative; color: #525563; top: 5px; left:62px;"><span style="border-bottom:1px dotted">Host profiles</span> {{TH guillemet}}</span>]][[Wikipedia:Teahouse/Guests|<span style="color: #525563; position:relative; top: 5px; left:84px;"><span style="border-bottom:1px dotted">Guest profiles</span> {{TH guillemet}}</span>]]
<span style="float:right; position:relative; top: 9px; width:230px; text-align:left">Teahouse is built on some intentional guiding principles to give visitors a great experience.</span>
{{clear}}
</div>
</div>
</div>
<!-- mid section-->
<div style="width: 730px; text-align:center; margin:auto">
<div style="float: left; text-align:left">
<div style="margin: -39px 0 0 30px">
[[File:WP teahouse logo.png|140px|link=| alt=This is the teahouse]]</div>
<div style="margin: -121px 0 0 170px">

[[File:WP teahouse text logo.svg|link=Wikipedia:Teahouse|200px| alt=This is the teahouse]]
[[meta:Research:Teahouse|<span style="position: absolute; font-size: 10px; color: #3fb6ff;">•<span style="color: #7d7b75"> Learn more</span></span>]]
</div>
</div>
<div style="float: right; text-align:left; width: 230px; margin-top: 0px">
<div style="height: 130px; border-left: 1px dotted #7D7B75; border-bottom: 1px dotted #7D7B75; border-right: 1px dotted #7D7B75; background-color:#f4f3f0">{{Random subpage|page=Wikipedia:Teahouse/Host/Featured|start=1|end=12|seed=3}}
</div>
<div style="position: absolute; width:96px; margin: -105px 0 0 -114px; background-color: #7D7B75; color:#ffffff; font-size: 10px; border-top: 2px solid #3fb6ff; border-left: 2px solid #3fb6ff; border-bottom: 2px solid #3fb6ff; border-radius:7px 0 0 7px; padding: 0 8px;">
[[Wikipedia:Teahouse/Host start|<span style="color:#ffffff">Experienced editor?<br/>Become a host...</span>]]
</div>
<div style="height: 48px; border-left: 1px dotted #7D7B75; border-bottom: 1px dotted #7D7B75; border-right: 1px dotted #7D7B75; background-color:#ffffff">
<span style="position:relative; left: 10px; top: 20px; font-size: 11px">[[meta:Research:Teahouse|<span style="color: #7d7b75"><span style="border-bottom:1px dotted">Teahouse research</span> {{TH guillemet}}</span>]]</span></div>
</div>
{{clear}}
</div>
<!-- bottom section-->
<div style="width: 730px; text-align:center; margin: auto; padding-bottom: 68px">
<div id="TH-Wishlist-container" style="float:left; width: 500px;">

<div id="TH-Wishlist" style="float:left; text-align:left; width: 498px; color: #525563; background-color:#FFFFFF; border: 1px dotted #7D7B75">
<div style="margin: 10px 40px">
==Design/Build Guidelines==

Everyone is welcome to contribute to improving Teahouse! 

Here are some principles to keep in mind to make sure your creations enhance the user experience with the spirit of the project.

===Build for new editors===
* Everyone is welcome in Teahouse, but new editors are the target audience. Consider how your new creation will affect new editors first.
* If it is better for experienced editors but makes things worse for new editors, it probably doesn't belong in Teahouse.

===Keep it simple===
* Teahouse works because it is simple, uncluttered and easy to use.  
* User interaction should aim to match people's expectations of the internet today.
* Features which are more complex should only be host-facing.

===Invite interaction===
* Present clear, inviting calls to action. Each page should have a clear prompt like "Ask a question" or "Introduce yourself."
* Concise and friendly instructions work best.

===Surface people and community===
* To show visitors the human side of Wikipedia, highlight real people whenever possible.
* Guests and hosts have profiles, and every page features an active member of our community.
* Encourage participation by making it easy to tell someone when they did something well in a visible and fun way.

===Show recent activity===
* Teahouse shows guests a lively, active space that encourages them to join in.  
* Display new things up front - we showcase active hosts and recent guests, and new questions appear at the top of the Q&A board.
* Make sure the space above the fold includes dynamic content, not just static text.

===Play with the theme===
* Teahouse’s design is inspired by the theme of a Japanese tea garden.
* We tend to use soft, warm colors and a natural theme to set a welcoming tone.
* Be playful.  Teahouse is a place of asymmetry and whimsy, and riffing on the theme is welcome.

===Make data-driven decisions===
* Teahouse is based on research and experimentation to see what works best.  If you have an idea, make it into an experiment.
* Start by asking questions like "what problem am I trying to solve?" and "what has past research shown works or doesn't work?"
* Test your hunches. Measure outcomes to learn if your change had a positive impact, and make decisions based on the results.

==See also==
* [[Wikipedia:Help Project/Guidelines]]  

</div>
</div>
</div>
</div>
{{clear}}

</div>
</div>

<div id="teahouseNavbar" style="display:none">
{{Wikipedia:Teahouse/Host navigation}}
</div>
[[Category:Wikipedia Teahouse]]