Remember last month’s challenge to propose a design for our ‘own’ Joomla website? The challenge idea was born out of the marketing team's desire to bring a more harmonious look and feel to Joomla's websites. And to bring us into this decade, as the core sites were all made in the 2010’s and to take the different looks and feel and coordinate across the brand.

Let’s dive in to see who had a say and what their contribution was. 

To be clear, at this stage, we are not talking about the template that comes with the Joomla product, the Content Management System (CMS), but all the Joomla websites that make up the Joomla community sites, so those referred to in this article that kicked it all off:

Joomla 5 is coming; time for a new look for all our sites? Join the challenge and have a say.

https://magazine.joomla.org/all-issues/may-2023/joomla-5-is-coming-join-the-challenge

In this article, I looked back at the different styles that Joomla has had and how all the different landing pages for the various areas have evolved.

Fashions change, as does technology. What made sense last decade may not be as relevant now.

We pushed the challenge out in the article and to several audiences at Joomla User Groups (JUGs) and at Joomla Day Netherlands, where I gave a talk.

In no particular order apart from the order, they are on the challenge’s dedicated Mattermost board: Joomla 5 Challenge. If you are part of the Joomla community on Mattermost, you should be able to see it.

(Do you want to join the Joomla Community on Mattermost? Follow the instructions in this post:

https://magazine.joomla.org/all-issues/november-2022/getting-the-most-out-of-mattermost)

So. Here we go:

Brian Teemans

Remembering back to the talk I gave, Brian interjected with the helpful point that most people will be looking on mobile as well as a wide range of devices, so he was keen to emphasise that we need to keep accessibility for all at the top of our thoughts for all views when designing the Joomla landscape.

Elisa Foltyn

What can I say?

It's not the first time Elisa has delivered designs for Joomla, and I really hope it won't be the last with this fresh and vibrant design. Elisa built it into a website to showcase so you can take a look: http://joomlaorg.designedwithlove.de/ 

She also wrote a nice intro about what she had done:

“I want to share a pre-draft of the Joomla.org website with you. 

Please note that this is just an initial draft and the content, including text and images, is not to be seen final. The draft focuses on introducing Joomla as a powerful, flexible, and award-winning Content Management System. 

I want to highlight Joomla's key features such as accessibility, multilingual support, web services, workflow system, smart search, user management, custom fields, and SEO options. Each feature has a 'Learn More' link that should lead to more detailed information, also, there is a button that should link to a subpage with all features. Maybe we can filter all features by tags. 

The 'Why Choose Joomla?' section should show the unique selling points of Joomla, such as its award-winning platform, cost-effectiveness, data sovereignty, security, flexibility, and a supportive global community. For an easier decision the testimonial section shows two kinds of target groups: website owners and web developers praising Joomla's performance, ease of use, and flexibility. Here we should show real people and ask them for their permission to publish an opinion. 

The 'How to Start with Joomla' and 'How to Extend Joomla' sections provide an overview for how to get started with Joomla and extend its core functionalities, respectively. The draft includes a FAQ section to answer common queries about Joomla. 

Towards the end of the page, there's a 'Download the Latest Version' button for easy access to the latest Joomla release. In terms of visuals, the draft currently includes placeholders for menu items and images. These should be replaced with actual images and relevant menu items during the design phase.”

This, for me, is a winner, and many elements of it will be used in the final version.

Interestingly, Elisa built her design with Yootheme Pro and said she has no issue with that being used for the final version. With the new accessibility improvements that have just rolled out, I am inclined to agree as it would make maintaining and updating the site easier than handcrafting everything, bringing the skill level needed to help in the project down so more can join and help. And why not show off one of the largest third-party extensions we have?

I would like to have a page on our sites to highlight the third-party extensions we use for our sites so others know what can be achieved and with what.

Robin Clapp

Robin has built a design that is informative and friendly. 

Taking the design elements we outlined in the original article, this shows how the sites could be branded. I particularly like the use of the colours, which are very much the Joomla colours and help to identify instantly that it's Joomla if you are aware of our logo colours.

Josean Telleria

Josean has again taken a strong colour palette and bold icons to guide the user around the site. 

He has kept with the Secure, Fast, Accessible, Extendable and Yours message that has been suggested for the marketing, with Yours distinguishing us from some of the cloud CMS solutions.

Louise Hawkins

Louise kicked off the designs in Marketing and has provided insight into her working.

Design Notes:

The enclosed design incorporates some tried and tested design practices that are proven to increase conversions.

Golden Ratio - Here I have used the golden ratio to best position the main elements. You can see the Golden Ratio Spiral which I have overlaid on the top part of the website. The Golden ratio helps with the positioning and size of elements in relation to each other to be the most aesthetically pleasing. I have also loosely applied the golden ratio to the scaling of headers. This is achieved by multiplying the body content font size by 1.618. https://www.adobe.com/uk/creativecloud/design/discover/golden-ratio.html 

Emotive Images - People process images much faster than text, additionally people process information differently, some use a central processing route and some a peripheral, this is known as the Elaboration Likelihood Model. This is a persuasion model and absolutely fascinating! (see this article if you want to know more about the ELM) And having an image of a person facing text is even more powerful.

https://www.interaction-design.org/literature/article/elaboration-likelihood-model-theory-using-elm-to-get-inside-the-user-s-mind 

Messaging that resonates - The hero image text is scaled loosely on the golden ratio, the message here should be one that resonates with the audience.

CTA in main navigation - Best practices for landing pages include your main CTA in the navigation.

Trust Symbols - these should be placed as high as possible, viewers will subconsciously bank this information.

White Space - Using white space to effectively focus the viewer on your message, is a proven technique.

Margins - margins on either side make the user focus on the center of the page and the benefits.

Also important!

The submitted design was for a landing page, designed to persuade the user that Joomla 5 is the right product for them. It has to be completely user-centric, so we should view it as if we were somebody who might be new to Joomla. What would they expect to see, what would help to persuade them etc? It’s also relevant to understand where in the purchase funnel a user visiting this page would be. Possibly in the interest phase? Therefore the messaging and imagery should funnel them to the next stage. Landing pages are typically not optimised with lots of keyword-rich copy, and traffic is usually driven by ads, so if it were me I would be bidding on competitor brand keywords for a page like this. (but that's a whole other topic!)

And lastly, we should AB test a few versions of any final design within the target audience.

Alireza Javaherian

Alireza has given some instructions if you want to download his files from the board.

“Here we have a compressed file containing 5 images that I request to be seen according to their order and number. If there is a need for separate images and divided content, they will be published under this section.

The design of this style and form is based on the idea that all Joomla pages, such as extensions, documents, etc., can be changed with one hand.”

Alireza is favouring a video on the home page as an introduction to the benefits of Joomla with a simple palette and line style to produce a modern look and feel.

Showkot Shawon

Shawon has also gone for very recognisable colours and a simple, clean design.

Their design can be seen here:

https://www.figma.com/proto/Ln1tUzp3OJ8fOJmhFkWQCC/Joomla?page-id=131%3A1392&type=design&node-id=131-1398&viewport=536%2C2432%2C0.41&scaling=scale-down-width

It's worth taking a look, with some clear icons and group image ideas showing the depth of community.

So Who Won?

The Joomla community did; the members listened, and many corresponded their ideas; several put their ideas into practice, and the result will be a better, more collegiate design.

It's essential to ask and hear all the members interested in having a say, especially those willing to give their time to the project.

These designs will be with us for many years to come so we need to get it as sight as possible.

You have given us your ideas; what is next?

Marketing can have another look through the day before this article is published and then invite several of those who rose to the challenge to meet and work together to produce a few final examples based on the revised requirements that this challenge has thrown up.

It's been so worthwhile to hear the ideas and thoughts of the community, so we would really like to get a few similar designs around the requirements and run a poll across all the Joomla community in Mattermost to get the steer from the community.

There may be further changes and amendments that occur when we build, but the work and effort of the winning template will be recognisable in the final design.

If you are reading this and gutted you missed the challenge: there's an even more significant challenge to make it a reality across all our sites. That will involve much work; we need as many people as possible to make it a reality.

So please, if you want to roll up your sleeves and become part of modernising the Joomla sites, put your name forward and make a difference.

You can sign up on the Joomla 5 Challenge channel

https://joomlacommunity.cloud.mattermost.com/main/channels/or-joomla-5-challenge

It would be wonderful if this could be a real community effort: together, we could make the Joomla sites modern and ready for when we release Joomla 5!