Design a New Core Theme

Proposed by: Steven Wittens

Introduction

Drupal is in dire need of more graphical design talent... and the goal of SoC is to involve more people in open source. Designers can be a part of that.

Still, Drupal theming requires more than just design chops (and it's still called Summer of Code), so this proposal calls for that elusive kind of geek: those who can both weave code as well as design their way out of a paper bag.

Not only will you need to design a modern, pleasing, eye-catching and flexible design, you'll also have to implement it in HTML/CSS as well as code the underlying PHPTemplate code. A generic Drupal theme needs to be flexible enough to accomodate a wide variety of content and user interfaces. It needs to be accessible and structured, and preferably have clean markup. If you're feeling bold, you could even try to integrate some jQuery magic.

As Drupal 5 recently got a very nice, but very "bloggy" and "web 2.0" style theme, it would be cool if the new theme tried something different. Still, the theme needs to be either very customizable, or very low-profile and generic. The first is preferred (for example, by adding support for recoloring through color.module).

If you succeed, you will have an entire community worshipping you, as well as one hell of a bonus for your future resumé (not to mention, plenty of job offers). Your theme will become the face of hundreds or even thousands of sites in time.

Requirements

This project needs a student who either knows the following things, or is eager to learn them. Some basic working knowledge would be nice though.

Obviously a lot of guidance will be provided by our local HTML/CSS/JS/PHPTemplate experts, both in terms of design review as well as coding help. You are not alone.

• Knowledge of semantic HTML and tableless CSS.
• Rudimentary PHP coding.
• The design chops to make an aesthetic, modern theme for a CMS.
• Understanding usability on the web and how graphical design affects it.
• Collaborating with others, giving and taking critique, progressive refinement of a design.

When submitting your application for this project, please include some earlier work so we can judge your skills.

Outline

The tasks can be divided up as follows:

• Design a graphical mock-up
  1. Using a graphical tool like photoshop, try to make a generic looking theme for a typical Drupal site. You can assume textual nodes and comments, but try to accomodate things like avatars or forums too.
  2. After the initial design is done, it needs to fleshed out to accomodate typical Drupal theme features like primary/secondary links, logos, a search box, tabs etc.
  3. Finally, you can look at theming the editing / administration pages. Look for ways to make the navigation, information and forms more usable.
• Convert into HTML/CSS
  1. The designed page mockup will have to be sliced and implemented into a tableless HTML/CSS skeleton. The right foundation must be made, to accomodate the complex content that Drupal outputs (like clears and floats).
  2. HTML/CSS must be made for additional styling of page elements and theme features.
  3. Additional CSS work can include a print stylesheet and fixed/fluid width variations or even configurable column widths.
• Make a PHPTemplate theme
  1. The HTML/CSS skeleton must be converted into a PHPTemplate that correctly outputs all the required Drupal HTML.
  2. Elements like breadcrumbs, navigation links, tabs must be tested and working.
  3. Additional template overrides can be used to further style some parts of Drupal and make the theme more special.

Note that while this outline is a very strict workflow, you do not need to do it this way. You can start working on the HTML/CSS for the page frame when you have a rough page mockup without details and even convert it into a basic PHPTemplate theme. That way, you can better gauge the final stages of your design on a working theme, rather than on imaginary content and UIs in Photoshop.

Also, if you're confident with PHP code, you can skip making separate HTML/CSS mockups and code some or all of it directly as PHPTemplate. This can save you some time.

If you approach this project in small, managable chunks, and try to deliver rough results early, you should have no trouble finishing in time.

Note that while we are looking for something that at least won't look bad next to Garland, we won't be design nazis and demand a world-class performance. The success of your project will be judged based on the effort you put in, and possibly the evolution you make as you progress. Whatever the result, it is sure that the community will continue working on it afterwards.

Comments on this proposal

I'd like to volunteer in
ben_c - March 27, 2007 - 10:50

I'd like to volunteer in mentoring here on the usability side :)

"Drupal and the Power of Categories (Taxonomy)"
http://digitalsolutions.ph/couchkamotereviews/power_drupal_categories
======================================================
======================================================

usability, accessability is the key + flair = good design
ica - March 28, 2007 - 09:05

usability and accessability is the key for, as when 'flair' factor join the team you get truly beautiful design

I am sure you have many pillar reference readings on the subject of usability, accessability etc.
I just like to point few below might be good reading who is going to volunteer or generally interested with the issues generally

http://www.webdesignfromscratch.com/usability.cfm
http://www.webdesignfromscratch.com/accessibility.cfm

and also good idea to take account usabilty for the impaired

http://www.usabilityfirst.com/accessibility/index.txl

i believe drawing core theme scope around them will give strength to such project
======================================================
======================================================

survey
marafa - April 16, 2007 - 00:46

is there going to be a survey asking the drupal community what they would like out of a theme?
for example, i believe it would be a good idea to have the theme come with the following default block placement areas.
header
footer
left column
2nd left column
right column
2nd right column
main column

why so many? well, assuming the user wants a four column layout, the user would then use only those columns he would need and leave the rest blank.
this is just one approach and only one reason for a survey

__________
http://namima.in-egypt.net اجدد اخبار ممثلين
http://mala3eb.in-egypt.net اخبار رياضة
======================================================
======================================================