Update 26 Jan 2015:

  • We have a volunteer developer working on adding social media buttons to the Vector skin.
  • It's possible we'll want to implement VisualEditor in the near future. This currently only works with Vector and Monobook (out of the 4 skins available to Wikipedia users).
  • There is a skin called Readable/ used on this MW+SMW site. It is very light and clean, very easy to read, and good for people not used to wikis. However it presumably doesn't work with VisualEditor.


The rest of this page is out of date.

MediaWiki skin

Mockup of a proposed skin (Dec 2007?)
Draft of new skin - top links not staying in place

This page is for discussion and collaboration on improving the user experience (UX) on Appropedia. This includes look and feel, and navigability.

Appropedia is working on a new skin. See:

  • Drafts of what the new skins might look like - see image on right, and the Photoshop file (you'll have to close the casino ads - please pardon these, and let us know on the talk page if you know a better free file host for large files).
  • Main Page tests

Resources

  • mw:Manual:Skinning - instructions on how to create a skin for MediaWiki.
  • Curt has bought a copy of MediaWiki Skins Design by Richard Carter.
  • Who in the Appropedia community understands skins and can spare a few hours to help? Or even less, to help with specific questions.
  • Contrast checker

Picking colors

  • Help us pick our site colors - Appropedia community blog.
  • Why Programmers suck at Picking Colors - suggests:
    • that a "better way to model color is the HSV color space (sometimes called HSB: hue, saturation and brightness): most color-picking dialogs of graphic programs have an HSV mode and it’s clearly much better than RBG because it allows you to easily go back to the ‘linear contrast’ strategy by just changing the brightness and keeping hue and saturation fixed."
    • the NASA color picking approach - although this is more for functional interfaces rather than attractive skins. Could be useful for aspects of Appropedia's development in future.

Examples of nice MediaWiki skins

Comments and suggestions

  • Think about which links we want to make prominent. E.g. making "edit" very prominent may help emphasize the reader's ability to edit and escourage people to take that step. (Note how prominent it is at AboutUs.)--Chriswaterguy · talk 04:the 02, 13 March 2008 (PDT)
  • Green is a very common color, esp on sustainability-oriented sites. Could we use a textured brown, something like the current background? For narrow strips of color, we could experiment with a finer texture. --Chriswaterguy (talk) 20:53, 29 March 2008 (PDT)
    • Then again, Tressie's new logos are very nice, with a blue-green thing happening that could give us a good choice of colors. --Chriswaterguy 20:31, 3 June 2008 (PDT)
  • Serif fonts? --Chriswaterguy 20:31, 3 June 2008 (PDT)
  • GrassrootsWiki looks nice, but simple. --Chriswaterguy 17:10, 5 December 2009 (UTC)Reply[reply]
  • I quite like the inverted headers at http://www.developmentcommons.org - a green bar with white text. --Chriswaterguy 18:33, 6 January 2011 (PST)


Priorities

I'd like to suggest these aims and priorities in developing a skin. Feel free to edit them. --Chriswaterguy 19:21, 24 March 2009 (UTC)Reply[reply]

  • Simplicity (e.g. see WikiGender)
  • Easy navigation
  • Clear, easy to read, with an elegant choice of colors.
  • searchbox at top? (Maybe start with new Wikipedia skin...)
    • size = ... 160% of present size?
  • profile page links visible without scrolling down (e.g. User contributions)

Rotating image-links

Near the top right of the fan wiki en.battlestarwiki.org is an image (usually of a character) which links to the relevant wiki article. The image changes periodically (and the link and link text along with it), or when following a link or doing a hard refresh. This could be good for us - rotating through featured projects and other featured pages. --Chriswaterguy 07:42, 17 April 2008 (PDT)

I notice they don't have a logo at the top left the way most MediaWiki sites do, so this is probably the site logo, moved and somehow made to alternate. --Chriswaterguy 20:38, 3 June 2008 (PDT)

Starting from a skin other than Monobook

Nice clean skins:

Tests on the dev wiki

Skin developers can be given admin privileges on the Appropedia dev wiki.

The skins are found at on the dev wiki at:

(Question: the files are at 2 places, e.g. for Wikipedia they are at http://en.wikipedia.org/style/monobook/main.css and en:MediaWiki:Monobook.css but for other skins, they are not necessarily in the MediaWiki space. How does this work, and which one(s) need to be changed, to change the skin?

To allow someone to display a skin without selecting it in preferences, add the appropriate suffix to the end of the url, &useskin=skinname where skinname is the skin name in lower case with no spaces. E.g.:

http://whatissustainability.org/Welcome_to_Appropedia&useskin=cologneblue

See more by editing your preferences file and clicking "Preview".

Wordpress themes for the blog

The Appropedia blog is using a lean code, loband theme: Appropedia's 13 theme for WordPress. Suggestions are welcome on how to make it better looking and leaner.

Wordpress theme resources

Themes:

How-tos:

Tools

The Firebug extension lets you edit and debug HTML, CSS, and JavaScript from within Firefox.

Colors

Finding matching colors (based on uploaded image, e.g. logo):

Viewing colors:

Color schemes

THe colors of the clear-blue-green logo (from Tressie) are:

  • blue: 86aed5 and
  • green: 54b680

Using these didn't seem to work well.

Color schemes suggested by the above tools are: suggestion and the color hunter (no link to results) suggests #000000 #3A3335 #707878 #F9FFFF #45C99A.

The actual colors used in the first draft of the Wordpress blog ("Appropedia's 13") are the following. I can't remember which set I based it on, but nn a couple of cases I halved the intensity, by dividing the RGB values, 2 digits each in the hex codes, by 2. Otherwise they were too pale for easy reading:

  • unvisited links #1E674E - bright green-blue but half as intense. RGB values were halved (so 1E674E)
  • visited links: #727A7A grey - half as dark
  • background - white

For more details see Appropedia:User experience/New skin/Appropedia's 13 for WordPress style.css

Retrieved from "https://www.appropedia.org/w/index.php?title=Appropedia:User_experience/Archive&oldid=291713"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.