UI Design - discussion

[miggs125]

We need to determine what our UI is going to look like so we can start working on the front-end. @agarcia-caicedo you're lead on this, do you have any ideas? Wire-frames would be useful for this. I've tagged people that have mentioned interest in the front end. Feel free to tag yourself or someone else if I've missed them.

[humphd]

Things I know I've heard people discuss:

• Login/Logout for our SSO flow.
• A way to display a single post in a responsive way
• A way to navigate through posts (i.e., some kind of timeline)

I would recommend you "borrow" heavily here vs. inventing something 100% new. If there are Gatsby starters we can use as a basis, and customize from there, let's consider it.

[miggs125]

I think a simplified version of the Mozilla blog is doable. Toughts @agarcia-caicedo ?

[miggs125]

I went through the gatsby starters and here are some that caught my eye: https://gatsby-contentstack-starter.netlify.com/blogs https://gatsby-starter.haezl.at/ https://foxandgeese.github.io/tiny-agency/ https://gatsby-starter-devto.netlify.com/ https://the404blog.netlify.com/

[wlto]

Hi guys, sorry I have been absent for the past few days. I agree with @humphd that we should try to look for a good starter example to work on. I personally don't have much preference in terms of the look of it. As long as it is simple enough and easy to use, I'm down.

@miggs125 Thanks for inviting me to this discussion and looking at the Gatsby starters, I personally really like the dev.to sample. What do you guys think? 🙂

[manekenpix]

haezl looks nice, good starter.

[humphd]

A couple of things that are important to me, and I'd like to see us integrate. NOTE: we could do some of this in follow-up vs. blocking our initial release to get everything at once:

• Search: I often need to go back and find something that I read in a student blog, and figure out who said it, find the post, etc. One thing I really like about the current Planet, which these don't do, is allow me to read and search through posts without having to click. I've filed #537 and #538 to add this support in our backend. We'll have to consider how to do it in the frontend
• Navigating: I often need to jump around to different student blogs, and need a way to see them all. The examples above are more focused on a set of current posts. I also need to have a top-level view of all the authors. Feedly does this via a side-panel, which we could add on to one of these:

• Read continuously without a ton of clicking back and forth. The designs above are going to require a lot of clicking back-and-forth to read everything. I tend to read the planet top-to-bottom, and it would be annoying if I had to go to the main page, click a post, go back, click a post, etc. in order to read them all. We need a way to make reading more fluid.

I notice that a bunch of these UI designs include an image for a post. I filed #539 to extract and store an image URL for a post that we could use for this purpose.

[agarcia-caicedo]

I like the haezl, but I also really like the404blog. The search and darkmode function are really nice

[agarcia-caicedo]

I agree with @humphd with making sure reading blogs is more fluid, I'm not a fan of the clicking to read more, in terms of user experience.

[miggs125]

I like the 404 blog too, it seems a good one to start with

[wlto]

Regardless of whichever starter kit we pick, I was wondering if we are going to implement what was discussed in #511 and #513 ? Or are we more likely to go with whatever is set in the starter kit?

[miggs125]

I think it would be great to implement what is being discussed in those issues. You've already put in some good work into it.

[wlto]

@miggs125 oh cool, thank you!

[c3ho]

Go to current front end discussions in Github Teams