Drupal doesn't demonstrate that it's possible to create beautiful websites using Drupal. During the development cycle of Drupal 8 design best practices have changed drastically, and therefore the user experience that you get is outdated. In this idea, we are proposing to create a new theme that would be set as a default theme for the new experimental installation profile.
Usecases where the new theme tries to be useful:
- To convince a technical evaluator that Drupal allows them to build modern and beautiful websites
- IT department inside a big company
- A self starter inside a smaller company or smaller Drupal agency
Usecases where the new theme is not trying be useful:
- Big companies demonstrating big wow features (but it could eventually become the starting point for such a thing)
- As a starting point for production sites
Users who install/try Drupal are faced with a theme that looks outdated and bland, which is not up-to-date anymore with today's standards in typography, layout, and overall styling. Making Drupal seem like a less modern system, than competitors which thrive on beautiful out-of-the-box themes. The target audience for this would be anyone who is fine with throwing away what they have built.
First impressions are extremely important, to consider Drupal as a worthy solution to both a technical and communication/branding challenge they would be looking to tackle.
Design and develop a theme that demonstrates for a technical evaluator trying Drupal for the first time that it is possible to make beautiful websites with Drupal that are also accessible, responsive and follow current best practices such as component based theming.
The new theme will not be built for Drupal, but it would be instead created to showcase a real use case using Drupal as a tool. All Drupalisms will be left out of the new theme, including the blue color. This is done to make sure that there is a separation between branding of Drupal and demonstrating Drupal.
The goal of this idea not to built a framework for people to built things on top of it. The new design is created to solely demonstrate how Drupal as a system allows creating sites with modern design.
This idea would benefit if following ideas would be bundled with this:
- Drupal Twig Slack, #new-core-theme-design
- Weekly meetings at rotated timezones. Check Drupal 8 core calendar for details.
- Google Drive will be used for storing designs
Discussions will mainly happen outside of Drupal.org, but issues will be updated while decisions are being made.
Describe what kind of feedback the team is looking for, whenever asking feedback from the community.
All technical discussions should happen after design has been created.
- Modern design
- Component based design
- Flexible, to allow site builders do interesting things
- Responsive menu
- Support LTR and RTL
- We could make the them more Interesting by doing some of the following:
- Horizontal regions examples
- Dark background + light color text
- Light color text background + dark color text
- Icons to highlight ideas/concepts
- Call to action
- Hero regions
- Meet as many WGAC 2.0 Level AA criteria as possible.
- Support for front page, node page, user page, contact form, and taxonomy pages.
- A lot of inline documentation to support new themers.
- Support for Color module
- Adding a new base theme.
- Adding new themed admin pages.
- Adding CSS preprocessor to Drupal core (e.g. adding SASS).
- Theme system improvements (e.g making it possible to add dependencies to modules from themes).
- Policy changes for theming in Drupal core (e.g starting to use different CSS architecture).
- Community Kickoff and forming a team
Agree upon a lead for the initiative. Selected lead chooses a team to assist with the initiative. Get agreement by committers and official buy-in.
- Find potential candidates and choose design lead for the initiative
Intent: To get initial ideas and impressions of designers to chose a design lead. We should limit any spec work, primarily focused on understanding motivations and style.
Create briefing for the designers: Process Timeline Budget Team & Roles Constraints Sent in initial: motivation & portfolio. (2 weeks period): Provide e-mail to the team. The team will periodically update the plan issue. Team discusses and chooses lead. Feedback session with a short list involving the product management
Phase A: Choosing a designer & creating initial design
Help the designer succeed by discussing the process and work involved (e.g. iteration of designs). Go through conventions Create a backup plan
Phase B: Creating initial design
Phase A: Design
- The formed team will create proposed design(s) for the new theme:
- Design principles and values.
- Page concepts.
- Feedback on proposals:
- Public feedback phase (2 weeks) allowing the community to provide feedback.
- Design community sign-off before going to issue queue
- General gist
- Lead designer now transitions into art direction role, the larger team/community gets involved in the execution of the design.
Phase B: Prototype
- Homepage, Article detail, (taxonomy) listing using teaser view mode, contact form? Style tiles? Pattern lab-like?
- Receive feedback on prototype (2-4 weeks).
- Technical implementation feedback primarily.
- Create a style guide with minimal items to allow us to start technical implementation as early as possible. Style guide should include following items:
- Design values & principles
- Color palette
- Graphic elements
Feedback on the implementation of the style guide primarily.
Phase C: Creating experimental theme
- Implement the first deliverable theme where minimal amount of views has been themed.
- Theme will leverage an existing component based base theme (added through other means, not part of this initiative).
- Includes: basic form styles including buttons, inputs and selects, front page, node page, user page, and taxonomy term and vocabulary pages
- Enable theme by default on experimental installation profile
This phase uses existing core processes, to split up the work and implement it enabling many contributors to take part.
Phase D: Bringing this theme to Stable
- Adjust installation profile to allow new theme to really shine.
- We will co-operate with the default content initiative on creating new experimental installation profile. See .
- Review and decide on steps needed to make it a stable front-end theme.
- Flip the switch marking it stable.
Additional views can be themed in the theme and added in minor releases
After the design process, we will discuss the best approach for actual implementation. Using a contrib theme as a base can be evaluated.
Dealing with bikeshedding
Discuss controversial topics with a smaller group, and after consensus with the smaller group create proposal for the community. Team will try to address all the relevant feedback from the community.
How we are gonna solve it. TBD
Team and resources
- lauriii, Project management
- Bojhan, Usability
- ckrina, Visual Design, Implementation
- DyanneNova, Visual Design, Project Management
- Preston So, Implementation
- yoroy, Usability
- kjay, Art director
- Product leadership (Angie & Dries)
- Usability maintainer
|#36||NOLA ideation process discussion diagram.jpg||154.95 KB||Gábor Hojtsy|
|#46||Component Issue Workflow.png||80.79 KB||cyb.tachyon|