New website UI

[rahgurung]

The website of phpMyAdmin sadly looks very outdated when we compare it with those others Open Source projects like Sequel Pro. https://www.sequelpro.com/

[lem9]

... but clicking on https://sequelpro.com/news shows the latest news dated April 2016. Feel free to send your pull requests to https://github.com/phpmyadmin/website.

[AdrianoCahete]

Hey, I got here because of all the problems with Hacktoberfest on Twitter and thinking with me: "Instead of helping some random project because hacktober, why not try to help some project that I use or had used in the past?". After that, I found that issue and #132, and I think that is better to use my time to do this.

First of all, I made a quick logo redesign. See this as a preview/alpha, since I don't know if you are open about this.

The main problem of the actual was the lack of readability. The sailboat is too hard to see in a white background and has a lot of details (waves and seagulls) that became invisible when the logo is small, like a logo placement. The yellow on top of a gray background doesn't help too.
Since my idea was to move the logo to a newer aspect, I didn't change the colors. Instead, I just create two more shades of the main Blue. If you want, we can create a full brand scope colors, it's not a problem.

Simplified the sailboat to looks like a sailboat even with small placements, using the brand colors. With this approach, you can safely use only the symbol instead of symbol + brand name like now.
I didn't change the typography, but I advise you to do it because the actual is a closed/paid one. We can try an OpenSource one if you want to see more.

If you like, we can go to polish better the logo idea (yes, the wave is a little strange).

---

Second, but no less important, I made a quick study about your site and I have this proposal:
https://www.figma.com/file/I49QZJyOaqiL6SviXerXsU/phpMyAdmin-Website?node-id=0%3A1

Edit for the sake of visual update:

It's not the final, I don't have some states (like hover or active on the menu, for example), but it's a start for you to see and make changes if you like to.
And I can help you to implement too since I'm a UI Developer. :)

All the images and illustrations are open source or free to use too!

The changelog was here too:

General

• I made a logo design based on an actual phpMyAdmin sailboat (but I really want to know why you use a sailboat!). Needs some polishing right now, treat as an alpha/preview version.
• There's no need for the subtitle "phpMyAdmin Bringing MySQL to the web" anymore. At this time, everyone knows what phpMyAdmin does (and it's stated in the entry text)

Menu/Header

• Removed "Home" on Menu. You can back home clicking on the logo.
• Removed "Try" on Menu. We have it on Download and the Home page (on Hero block).
• Made "Download" button fixed on header too, instead of using more than one column from
• Moved the logo from content to header, to maximize space in secondary pages;
• Moved "Security" to the "Support" submenu. "Security" as a menu gives the idea that the product has a lot of Security Flaws. If we have it on "Support", gives the idea for the people who search for some support that we have attention to security, but for the main public doesn't need to have that attention, because it's the default behavior (to design a safe system).
• "Github" logo/link was moved to the footer

Sponsor section

• Sponsor use the actual level order, so you can show all (or more if you don't want to have a carousel) the other ones instead of just a few in Home.

Hero section

• Made "opening text" way smaller, moving to a quick paragraph about what is the project. Move all the other text to the features page or about.

Feature List section

• Move Features from a text list to a box design with 6 main points (I choose by myself, but you're open to change if you think that the product has other main points instead). Move all other points to the download page.

News section

• News date became just day/month if the year is current. No need to show the year if it's current, it's the natural behavior (we never tell the year when someone asks for "which day it's today?")
• Removed "Planet phpMyAdmin" news from home: the last update was on August 2019 and the webpage UI seems completely wrong in here (no CSS/JS at all)

Footer

• "Contributor" became "Team" and moved to the About menu as an anchor
• "Donate" was removed since it's on top now
• "Facebook" logo was removed since the last update was in March 2019.

[williamdes]

cc @phpmyadmin/developers
This is excellent work, please have a look

I love the logo !

[MauricioFauth]

Hi, @AdrianoCahete.

Thank you for your excellent work. 🔥

I think you can open a pull request to start the implementation of this redesign.
We'll happily help you with this and we can discuss changes as the progress goes on.

[ibennetch]

I also really love what you've come up with. There are some bits and pieces that I think don't make sense for us, but overall it is great work!

[ibennetch]

I also really like the new logo.

I believe the logo is meant to show how phpMyAdmin helps you "sail the turbulent seas" of using MySQL; perhaps @lem9 or @nijel remember more details because I'm not finding much in the project history to explain this and it would be a neat thing to add a note to our web page.

[AdrianoCahete]

I think you can open a pull request to start the implementation of this redesign.

I saw the #132 and: Can I go for my approach (on static Nuxt), wait for Guileas, or change in the current stack?

If I go with Nuxt I'll do in a way that all the code can be ported for any language easily, because in Nuxt you can split the html/css/js easily. It's not a problem for me, to be honest, it's a thing that I'd be like to do. I can go in any code that you like too, you just need to point it.

There are some bits and pieces that I think don't make sense for us, but overall it is great work!

Thanks! I got all the content from what you already have, but I'm obviously open to change to match your ideas.

I have the idea to do the redesign for all the pages, of course, but we need to have a proper home first, then we can go to other pages after.

So I'll start a branch with Nuxt in the meanwhile, if you choose to not proceed with that or proceed with another technology I can migrate without any hassle.

[ibennetch]

I just commented with #132 (comment) that I think Nuxt is the least desirable option for me, so I wouldn't invest too much effort in to implementing that at the moment, at least until there's some more discussion.

[MauricioFauth]

@AdrianoCahete For now, we will continue to use Django as the back-end and Bootstrap as the front-end.

[AdrianoCahete]

For now, we will continue to use Django as the back-end and Bootstrap as the front-end.

Ok, I did the fork on repo and saw that you have a lot of things in python, so I'll keep this on Django, but I may remove some (or all) bootstrap styles to make a cleaner and faster version, keep just the things that we use.

[MauricioFauth]

I didn't change the typography, but I advise you to do it because the actual is a closed/paid one. We can try an OpenSource one if you want to see more.

Would you suggest which one?

[AdrianoCahete]

Would you suggest which one?

Looks like that the actual is based on the original php logo, that uses Handel Gothic.

On layout proposal, I used OpenSans (on the footer text), an Open (Apache License v2) typography from Google. I'm using Inter on my personal portfolio. It's Open Source (SIL OFL) too.

I know that both are more for a text instead of a logo/brand, but we can try to see how this will apply to the logo. Or we can keep on the Handel idea, but changes to a opensource alternative (something that is similar).

I'll try to see both and other open fonts too. Do you plan to keep the same aesthetic or I can change something?

[AdrianoCahete]

A quick update here: I was updating my branch and did a push to Github. I have GitGuardian on all my repositories, so on push, it warns me that there's a Django key in plaintext on repo. It's was supposed to have it?

# Scan of AdrianoCahete/website by GitGuardian
Date : Fri Oct 23 19:19:13 2020 (UTC)


`1 secret found`

| type | count |
|------|-------|
| Django Secret Key | 1 |

## Secret 1
API Provider: **Django Secret Key**

<summary>3 leaks found</summary>

• Supressed the contet because of indexers.

[ibennetch]

it warns me that there's a Django key in plaintext on repo

Thanks for your concern, but the secret key in pmaweb/settings.py is a placeholder and is not the actual key used in production.

[MauricioFauth]

Hey, I got here because of all the problems with Hacktoberfest on Twitter and thinking with me: "Instead of helping some random project because hacktober, why not try to help some project that I use or had used in the past?". After that, I found that issue and #132, and I think that is better to use my time to do this.

@AdrianoCahete You can open a draft/WIP pull request, so it counts toward completing the Hacktoberfest.

[AdrianoCahete]

No problem. I don't mind about the Hacktoberfest this year anymore because a lot of low-quality submissions that I saw... :(

But I'll make a WIP PR just to you see the progress. I'll probabily do this tomorrow, with a more "presentable" progress!

[ibennetch]

By the way, for anyone wishing to work with the current site, https://github.com/ibennetch/phpmyadmin-website-docker may help quickly spin up a local instance.