Web Design Help Needed

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!

Thanks!

  • http://www.brandonholtsclaw.com/ Brandon Holtsclaw

    TABLES! Jono, shame on you :) /me opens up Espresso.app and gets to work …

  • http://windowsps3free.blogspot.com/ sumaila@ linux on ps3

    nice article, thank you these are very useful info.

  • http://www.brandonholtsclaw.com/ Brandon Holtsclaw

    How is this for a fist run at it Jono ? I’ve replaced all your tables with the proper divs , also put it into a grid system to make it easy to add/remove sections, as well as changed the css use of class and id’s to be correct.

    Then did a few touchups to make it more in line with the ubuntu branding like you said.

    http://bholtsclaw.github.com/ubuntu-accomplishments-design/index.html is the link for my current iteration.

  • http://spirit55555.dk Anders G. Jørgensen

    Are we allowed to use the background images on ubuntu.com ?

    Here are the brand guidelines for websites: http://design.ubuntu.com/web

  • https://launchpad.net/~odyx OdyX

    I find the chosen example as representative of my failure to understand the merits of the “Accomplishments” system. This particular trophy is currently obtained by 8 persons (which certainly don’t need the accomplishments incitative to power their involvment). How can this be motivating for the “wide” community ?

  • Anonymous

     That looks awesome, Brandon! Can you send me the code for this so I can apply it? Thanks!

  • http://www.jorgecastro.org/ Jorge Castro

    You could use bootstrap: http://bootswatch.com/united/

  • Anonymous

     I have merged it in, will blog about it later. Thanks!

  • Andrew

    Here is a mockup (no HTML/CSS yet!) of what I would like it to look like http://i.imgur.com/y3Txb.png

  • http://www.brandonholtsclaw.com/ Brandon Holtsclaw

    Very Welcome, glad I could contribute a little :)

  • Anonymous

     I think you are looking at it the wrong way – on one hand accomplishments are a means to find new things to do and achieve, but on the other hand they are also a way of representing someone’s existing contributions.

    In terms of the Community Council accomplish, I agree that it only applies to a small sub-set of people, but the built-in docs better set expectations and provide guidance around how to be a member of the Community Council for prospective future CC members too.

  • Anonymous

     I think you are looking at it the wrong way – on one hand accomplishments are a means to find new things to do and achieve, but on the other hand they are also a way of representing someone’s existing contributions.

    In terms of the Community Council accomplish, I agree that it only applies to a small sub-set of people, but the built-in docs better set expectations and provide guidance around how to be a member of the Community Council for prospective future CC members too.

  • Anonymous

     I like some of your ideas here, Andrew. Feel free to work from the design that Brandon created and suggest some improvements. :-)

  • http://www.facebook.com/FFEMTcJ Chris Johnston

    Brandon, the Community Web Team is looking for some help with both development and CSS on some of our sites. Would you be willing to help us?

  • http://www.facebook.com/FFEMTcJ Chris Johnston

    Andrew, we are looking with some design and development help on some of the community maintained websites.. Any chance you would be willing to help us out as well?

  • http://www.brandonholtsclaw.com/ Brandon Holtsclaw

    I’d be more than happy to my LP id is imbrandon and it has all my other contact info , just let me know how I can jump in and help out.

  • http://www.junowebdesign.com/ Nottingham designers

    I really like the idea of asking help if you think that you can’t do that task. I think that asking help on web design is necessary if you don’t know what to do about it. I know that it would be great to ask some help and solve your problem with that help.

  • http://www.ifultech.com/About.aspx Jenny

    Does it still need help now? I would like to offer my services as well.

  • http://www.webdesignerdevelopers.com/ Web Designer Developers
  • http://www.bybe.net/ Web Design Poole

    Hope you guys got this sorted… Let us know if you didn’t :P

  • Anthony Tori

    hi.. I am very thankful to this topic because it really gives great information.  web design michigan

  • http://www.creativenature.com.au/ Web Designers Perth

    This is nice post. Web designer is needful to make a batter web design. This post sharing a reliable information why needed to web designer. web designer is important for web solution matter.

  • Djava tech

    Thank you,

    The given information is very effective.

    I’ll keep update with the same.

    web designing

  • http://www.creativenature.com.au/ E-Commerce Websites Perth

    Enterprises can conceive a web design that targets their customers by conceiving a conceive that focuses on their needs. Designing your website will allow you not only to unquestionably comprise your enterprise, but comprise your targeted customer.

  • http://www.ocularconcepts.us/ Web Design Firms

    Nice article…..Thanks for sharing it……

  • http://www.radsitesstudio.com/ HTML5 for web designers

    We should avoid getting errors when it comes on web designing. If you are neophyte on this matter, you can watch some tutorial videos or read some tips. This will greatly helps you to make your work much easier to accomplish. 

  • http://www.creativenature.com.au/ Web Design Perth

    Web designing related ant guild line used w3school website, this best website for the learn website designing. In this website all tags are provide with example so you can easily learn and know.

  • allyn giancola

    why dont try to use ready made templates available online or try to edit some templates .Make it unique and made your own 

    http://www.youtube.com/watch?v=6e68Ht4bvqs