KDE-Apps.org Applications for the KDE-Desktop 
 GTK-Apps.org Applications using the GTK Toolkit 
 GnomeFiles.org Applications for GNOME 
 MeeGo-Central.org Applications for MeeGo 
 CLI-Apps.org Command Line Applications 
 Qt-Apps.org Free Qt Applications 
 Qt-Prop.org Proprietary Qt Applications 
 Maemo-Apps.org Applications for the Maemo Plattform 
 Java-Apps.org Free Java Applications 
 eyeOS-Apps.org Free eyeOS Applications 
 Wine-Apps.org Wine Applications 
 Server-Apps.org Server Applications 
 apps.ownCloud.com ownCloud Applications 
 KDE-Look.org Artwork for the KDE-Desktop 
 GNOME-Look.org Artwork for the GNOME-Desktop 
 Xfce-Look.org Artwork for the Xfce-Desktop 
 Box-Look.org Artwork for your Windowmanager 
 E17-Stuff.org Artwork for Enlightenment 
 Beryl-Themes.org Artwork for the Beryl Windowmanager 
 Compiz-Themes.org Artwork for the Compiz Windowmanager 
 EDE-Look.org Themes for your EDE Desktop 
 Debian-Art.org Stuff for Debian 
 Gentoo-Art.org Artwork for Gentoo Linux 
 SUSE-Art.org Artwork for openSUSE 
 Ubuntu-Art.org Artwork for Ubuntu 
 Kubuntu-Art.org Artwork for Kubuntu 
 LinuxMint-Art.org Artwork for Linux Mint 
 Frugalware-Art.org Artwork for Frugalware Linux 
 Arch-Stuff.org Artwork and Stuff for Arch Linux 
 Fedora-Art.org Artwork for Fedora Linux 
 Mandriva-Art.org Artwork for Mandriva Linux 
 KDE-Files.org Files for KDE Applications 
 OpenTemplate.org Documents for OpenOffice.org
 GIMPStuff.org Files for GIMP
 InkscapeStuff.org Files for Inkscape
 ScribusStuff.org Files for Scribus
 BlenderStuff.org Textures and Objects for Blender
 VLC-Addons.org Themes and Extensions for VLC
 KDE-Help.org Support for your KDE Desktop 
 GNOME-Help.org Support for your GNOME Desktop 
 Xfce-Help.org Support for your Xfce Desktop 
openDesktop.orgopenDesktop.org:   Applications   Artwork   Linux Distributions   Documents    LinuxDaily.com    Linux42.org    OpenSkillz.com   
Monday Oct 5 2015, The Internet
- News . 
click to vote up

Jono Bacon: Web Design Help Needed

Published Mar 12 2012 via RSS

As part of Ubuntu Accomplishments you can read information about each accomplishment to find out more about how to participate. This is an important piece of the system: being able to provide useful, discoverable information to our community.

It looks a little like this:

The goal is to create in-depth help and guidance for a variety of ways of participating in the community and elsewhere.

As you can see, with my feeble CSS skills, I have tried to make this use the Ubuntu brand guidelines, but I think there is a lot more opportunity for improvement.

As many others do, I believe that the attention to detail and small refinements help deliver really enjoyable experiences, so I am keen to ensure that the presentation of this content is comfortable, informative, and pleasurable to read.

This information is presented in the application in an embedded webkit widget, and I wanted to reach out and ask the web designers among you if you can help provide a stylesheet (and any recommended HTML changes) to make this look better, more attractive and closer to the look of ubuntu.com. I really want the information includes to look truly native on Ubuntu.

Some thoughts on areas of improvement:

  • My current design doesn’t really use any of the assets such as the dot patterns, pictograms etc (as an example, I think showing the dot pattern in the background would look better, and it would be cool if some pictograms were used next to the tops/pitfalls sections and possibly as bullet-points).
  • I am sure the font sizes and colors could use some adjustment.
  • The Tips and Tricks and Pitfalls table doesn’t have brand adherance whatsoever, so that definitely needs some work.
  • The structure of the page could be improved; if you want to propose a better means of laying out the content, feel free to experiment!

If you are a bit of a CSS guru and can make this look better and more like the Ubuntu brand guidelines you can download the zip file with an example HTML file and the CSS so you can play with it.

Some things to bear in mind while doing this:

  • Don’t assume that all sections are always there. As an example the Steps, Tips/Pitfalls, Help, and Links sections are all optional in the accomplishments, so they may not be present.
  • Assume that the page is going to be narrow and long (around 700px wide).
  • Feel free to include additional pictograms and imagery where appropriate (e.g. such as the dot patterns for the background, pictogram icons for the tips/pitfalls sections etc).
  • The rendering widget this is all displayed in is Webkit GTK, so feel free to use webkit-specific CSS extensions.

If you create something and would like to propose it for inclusion, just drop me an email to jono AT ubuntu DOT com with a zip file with your improvements.

Also feel free to join the Ubuntu Accomplishments community mailing list and aks questions!


BackRead original postSend to a friend

Add comment

Add comment
Show all posts


Copyright 2010-2015 LinuxDaily.com Team  Legal Notice
All rights reserved. LinuxDaily.com is not liable for any content or goods on this site.
You can find our FAQ here.
All contributors are responsible for the lawfulness of their uploads.
Please send us a notice if you spot an ABUSE of the website.
Information about advertising in LinuxDaily.com.
Developers can use our public webservice interface. More information here: public api
For further information or comments on this site, please send us a message