#739 Designing the 404 page for Get Fedora
Opened 4 years ago by yavnikaa. Modified 3 years ago

phenomenon

As discussed in the Fedora Council Meeting, with the rolling out of the new logo and new characters, we can even design a new 404 page for getfedora.org

The current one is just plain text mentioning Not Found.

Screenshot_217.png

The part of the old graphic was https://i0.wp.com/blog.linuxgrrl.com/wp-content/uploads/2012/01/ball.png?w=727 .

recommendation

As discussed with @duffy , while waiting for the new character designs we can start the wireframing of the pages and think about what kind of funny antics the characters can get into. The basic template needs to have provision to accomodate the error code as well.

I am working on it and will keep updating my progress here!


Hi! Here are a few ideas and concepts for the 404 page.

concept_1.png

This one is a simple 404 illustrative screen. I made this before but I feel we could modify it here too with the Fedora Characters. It can also be animated to make it look more engaging using parallax.js like the Github 404 has done: https://github.com/yavnikaaaaa. The only problem here is that we if we show different codes for different errors, we need to do the illustration again.

concept_2.png

Here, I was thinking if we could connect it to Freedom since that is the theme of the get fedora homepage. We could show a broken character and relate it to being trapped and convey the plot as give it freedom. Again, the illustration here is just for reference.

concept_3.png

Here, we can show how the link or the connection is broken between two different characters across the globe. We can make it more interesting with a storyline in the text and give our user the power to connect them back by exiting 404. This is the same globe on the homepage and so I thought we could connect it here with 404 so that it feels consistent.

This is what I brainstormed and wanted to discuss further. I was also thinking if we could show a terminal window with 404 imprinted on it but that will be a major blow as compared to the rest of the interface and might stick out in a negative way for new users.

Would love to hear your feedback and opinions @duffy :))

Metadata Update from @duffy:
- Issue assigned to yavnikaa
- Issue tagged with: triaged

4 years ago

Hello @duffy ! Any feedback on this?

Hi @yavnikaa thanks for opening this ticket and getting started :) I am leaning towards option 3, but I think that is because it is using custom Fedora artwork. The other graphics seem a bit generic. Have you seen the 404 page for badges? [1] That one is really silly and we want something more professional for Get Fedora, tho I think it might be neat to try to get creative with the concept. I googled "cool tech 404 pages" and found some nice collections of sample ideas. [2]

The examples in that article use the 404 page as a way to show off their brand identity- we should think about how we can tie the design back to Fedora's culture. It might be cool to use one of the four Fedora foundations to come up with the concept:
freedom
friends
features
first

https://badges.fedoraproject.org/404
https://www.creativebloq.com/web-design/best-404-pages-812505

Freedom: could be related to birds, we also have "flock to fedora" and "nest with fedora" as our conference names- there is some related artwork, I think the nest artwork would be more well suited to adaptation for this if you went this way https://pagure.io/design/issue/684#comment-665826
friends: this one is pretty wide open, tho we could make a simplified version of some badge artwork.. these two are using cartoons as a cute/simple example of this idea
https://www.airbnb.com/404
https://github.com/404
features: could be related to gears/mechanics going awry.. could have a blueprint theme
first: could be related to a medal, or ribbon

This sounds interesting. Thankyou for giving this a direction!
I'll do some more research, will try to build a concept and then get back to you on this :))

@riecatnor an empty nest? Like "the bird you seek is not here"...

Hello
I did some research and explored a lot of 404 pages :D.
I conceptualised some ideas and would like to liast down here. We can choose the best ones and start preparing an iteration.

-To connect with freedom, we can maybe show a gif of a trapped bird and ask the user to give it freedom, similar to using Fedora for freedom. It need not be a bird, we could even show any of our fedocal characters as trapped and ask the user to freed it. It can be a cute engaging animation :))

-If we wish to connect it with features, we could do somethhing on similar lines: https://path.blue/404/ . We can show a blueprint of the Fedora Architecture lwith clickable features and navigation to the concerned webpages and indicate the user to be outside this realm on the 404 page. We can include characters taking the user on a sort of navigational tour as well if it is required!

-If we want to highlight 'first' maybe we can give the user some incentive, more like an easter egg thing. So, for like the user lands on 404, we can play it like they are the first ones to know about some new release or some latest happening in Fedora. I am not sure if it is feasible to implement but this could be a way to keep the user engaged on 404.

-The friends theme can be used simply as you shared the Github's 404. We can use JS parallax libraries or something to move different body parts of the character and let the user have some fun.

Apart from these, I really liked https://www.figma.com/404/. We could try something similar relating it to Fedora and make it a game like thing. The way google does that Dino T-rex game when the internet is not connected. We could do some panda or beefy game here, with a timer and at the end of the timer you are redirected to the Get Fedora homepage.

What do you think about these ideas and which one d'you feel is the most appropriate, knowing the users of Get Fedora?

Waiting to hear from you @riecatnor ^.^

Wow, 404 pages seem to be quite the niche. I did some research and came across so many creative and fun ideas (including the one for the badges website hehe).

Came up with 2 layouts

This one falls into more of a cutesy category. I think it's pretty simple and self-explanatory. I've used some badge artwork as a placeholder, but I think something very similar would replace it

404-1.PNG

I saw @riecatnor 's comment about trying to keep this page more professional compared to the badges one, so I also came up with a similar but more sober version

404-2.PNG

Would love to know everyone's thoughts on these! :D

Ooh and if anyone wants to build on top of this, feel free to send a request for edit access here: https://www.figma.com/file/LnnwAflJyWUR4vLZolvKyi/404?node-id=0%3A1

Wow, 404 pages seem to be quite the niche. I did some research and came across so many creative and fun ideas (including the one for the badges website hehe).

Came up with 2 layouts

This one falls into more of a cutesy category. I think it's pretty simple and self-explanatory. I've used some badge artwork as a placeholder, but I think something very similar would replace it

404-1.PNG

I saw @riecatnor 's comment about trying to keep this page more professional compared to the badges one, so I also came up with a similar but more sober version

404-2.PNG

Would love to know everyone's thoughts on these! :D

Ooh and if anyone wants to build on top of this, feel free to send a request for edit access here: https://www.figma.com/file/LnnwAflJyWUR4vLZolvKyi/404?node-id=0%3A1

Came up with a random idea and made another iteration- sorry for the back-to-back messaging!

I always thought the night version of the F34 wallpaper looked kinda spooky, and I was like oh wow this could make a cool 404 page, so I worked with that

404-3.PNG

Again, sorry for the back to back messages :((

Hey, @yavnikaa I saw your three 404 fedora designs. In that, I think it's not matched with the fedora theme. You have put white background, it should have some blue color. Design 2nd and 3rd are to basic. You can do some more research based on 404 error design. It is really important for a large scale organisation fedora to have a proper 404 error page. @dhairya15 I really liked your 1st design. It would be good if you use full blue background not half. Also may I know what was your logic for 2nd last design (that's nature and river).

Also, @yavnikaa I will try to design some more 404 error pages.

Log in to comment on this ticket.

Metadata
Attachments 9
Attached 4 years ago View Comment
Attached 4 years ago View Comment
Attached 4 years ago View Comment
Attached 4 years ago View Comment
Attached 4 years ago View Comment
Attached 4 years ago View Comment
Attached 4 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment