Develop page for 404 Error Invalid URL page

[qaz6209031]

Overview

It's a good idea to create a page for invalid url, so instead of seeing 404, user could have more clue to see what's going on.

Details


RIght now if the invalid url is provided, out page will look like this

We could improve it to something like youtube did:


or

Netflix


Action Items

Design

• [x] Finalise the web version
• [x] Finalise the mobile version

Development

• [x] Develop the new 404 Error page for the HfLA site matching final Figma design specifications (in the pink rectangle https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=9616%3A0)
• [x] Add illustration credit info (credit details listed below Figma design) to Credits page

Resources

404 Error page in Figma (final design in pink rectangle) Template of a credit.yml file Credits page Sample invalid url (Hack for LA): https://www.hackforla.org/hahaha Sample invalid url (Youtube): https://www.youtube.com/asd Sample invalid url (Netflix): https://www.netflix.com/hahaha

[akibrhast]

@qaz6209031 This is a great idea! @daniellex0 Can the design team cook up something?

[daniellex0]

Sure, I'll add UI/UX labels and see if anyone wants to take this on! Good idea @qaz6209031 ! 👍

[qiqicodes]

@Rosalyn-broddie Can you let us know your progress in regards to this issue? Thank you =]

Progress: Blockers:

[Rosalyn-broddie]

Progress: Started looking for more examples to pull inspiration from Blocks: Haven't gotten a chance to start designing the page yet Availability: I'll have some extra time this week to start designing some options for this page ETA: Uncertain

[Rosalyn-broddie]

Progress: Designed a couple of potential options for the 404 error page, but haven't fleshed them out yet Blocks: Stopped working on the 404 page for a little while in order to focus attention on the homepage Availability: I'll have some time to work on some more options this week ETA: 1 week

[Rosalyn-broddie]

Progress: Have a couple of options ready for an MVP, but I'll continue working on other options (animated, gifs, etc.) for the future

• Option 1: https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?page-id=9616%3A0&node-id=9630%3A97224&viewport=1648%2C761%2C0.284930020570755&scaling=min-zoom
• Option 2: https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?page-id=9616%3A0&node-id=10259%3A95726&viewport=1648%2C761%2C0.284930020570755&scaling=min-zoom

Availability: Since the focus has been on the homepage lately, I may not have extra time this week for other options, but I'll do some work on it if I do ETA: MVP options are finished, but I'll continue to look for more options that could be more fun (gifs, etc.)

[Sihemgourou]

@Rosalyn-broddie Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[Sihemgourou]

This looks good, great job @Rosalyn-broddie we can move this to development !

Lets go with this option : https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?page-id=9616%3A0&node-id=9630%3A97224&viewport=1648%2C761%2C0.284930020570755&scaling=min-zoom

[akibrhast]

@Rosalyn-broddie Could you please restructure the Figma designs for the error page such that it uses the grid system. Using the grid system is typically more industry standard and on top of that it also allows for easier creation of responsive UI, faster.

• Please componentize the Figma Designs as well. Such that the spaces between the two separate components are clear and distinct.
• The page itself and the component hierarchy on the left also needs to be cleaned up.
• Please provide the image as a separate component, that is easily clickable and exportable. Please look at the below image. As a developer, I am not sure which is the right image that should be exported. Should I export freepic background comp should I export no data-pana 2 . On top of that, what is no data-pana 2 how am I supposed to understand from the name of that asset that, that is correct asset needed for this page ?
• As a developer it is also unknown to me what format should I export the asset in, should it svg,png, jpeg, gif ? Could this please be specified in the figma file

Something like this:

• https://www.figma.com/file/zk9cwbZqGC24IxLTCLQ1Lu/Hack-for-LA-Website-Copy?node-id=9616%3A0

[github-actions[bot]]

@sena-ji Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[sena-ji]

1. Progress: Thought it would be a good challenge for me to work on this issue. Asked Akib for some points to help me get started. Will talk about it on the meeting on Tuesday.
2. Noted above.
3. Available to work on it this week.
4. Will get a pull request up by next week's meeting for review.

[sena-ji]

1. Progress: I added the image used to the credits page. I created a skeleton of the page seen below:
2. Blockers: I think the fonts and sizes used on Figma are not showing correctly on my screen. Also need some help with container sizing.
3. Availability: Will be asking for some help on Slack and the team dev meeting if someone is available.
4. ETA: Hopefully by dev team meeting this week!

[averdin2]

@sena-ji I spoke to Danielle about the font issue. She said not to worry about it for now. I think that there is a larger issue regarding the font that I am going to try and look into.

[sena-ji]

@averdin2 Thank you for the quick update! I will disregard the font for now and work on the mobile view :)

[sena-ji]

1. Progress: I made some adjustments to the mobile view to align with Figma.

2. Blockers: I did some research to try and rearrange items on mobile view. Having a hard time getting the image to align between text boxes, Asked Alex for some help.

3, Availability: Will work on the issue throughout the week! Been lagging because of work.

Here is the mobile preview at the moment:

[Sihemgourou]

Hey Sena, what's your ETA please ?

[github-actions[bot]]

@sena-ji Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[Aveline-art]

@jbubar Sent a message on Slack, will encourage @sena-ji to do pair-programming to get unstuck

[github-actions[bot]]

@sena-ji

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 3, 2021 at 7:53 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.