-
-
Notifications
You must be signed in to change notification settings - Fork 359
MVP Wireframes/Mock-ups #114
Comments
@chrismgonzalez I'll handle some of those :) |
Pinging @ryandudek @louistsaitszho @aeganaden @booleanhunter since they offered design assistance in #11 |
I can try coming up with some landing page variations over the weekend. |
Design flow of an organization's deployed instanceI want to keep things clear so that we all don't end up creating wrong wireframes and to ensure we are on the same page :). So below I'm proposing a detailed design flow which is targetting MVP. If I go wrong somewhere please correct me @chrismgonzalez, @allella. After finalizing this, we'll start building components on the client-side. Let's start. Note for maintainers: Please don't edit this comment. Suggest improvements by commenting to this thread. We'll create a final design flow after incorporating all the suggestions. Thank you :) In the below design flow, header, nav, main refers to html elements. Landing page & navigatable pages design flowBy landing page, we mean the page users will see when they visit an organization's deployed instance, e.g. Navigation bar design flow
Header content design flow:
Main content design flow:
Organizer and administrator design flowIn the case of organizer & administrator. We'll show a manage nav above the main site navigation inspired by world's largest CMS - WordPress. We'll show something like: Click on image to see in high resolution. We'll not alter anyother part of app for organizers or administrators. We can show the admin panel nav items in a vertical navbar, something like: Clicking on chapters will show all the chapters on side of nav, we can add or edit chapters. Clicking on events, will list all events, event organizer or admin can make edits and create a new event. They can also email participants from this view. Settings might be useful for customization of the app. In short our admin panel should be in lines of: This is a very rough idea of what's going on my mind right now. We can evolve our design upon this. Also now we can start drawing wireframes by following this design flow. I encourage you to suggest improvements to this. Your suggestions will help our team in delivering an amazing UX to you :) @QuincyLarson your thoughts on this? cc @kognise @francocorreasosa @Zeko369 @nik-john @timmyichen @allella @chrismgonzalez. |
Should we be taking a mobile first approach to our designs? I believe we should. |
@finisher1017 I have that in mind too. |
@vkWeb that's an impressive start, and amount of stuff to think about. First question is who's going to be creating the mockups? I want to confirm the folks doing the work are already in the conversation since their input and process will matter more than mine. Also, I'm neither a designer or experience in the ways of Kanban. I suspect there's a pattern for using the user stories to generate mockups, but perhaps that's a later step. I can see the need for discussing elements which are universal to the UX, like header, footer, sidebars, so what you shared above hits a lot of that concern and is a good base regardless of the how we organize it. |
I think at the very least the MVP should be a browser based app that's optimized for mobile devices. I'm planning on starting work on some wireframes tomorrow that I'll share when I feel like I have something ready to be critiqued. |
I set up the Figma board here: https://www.figma.com/file/EDhlnW52lIYZmiarrCaopx/freeCodeCamp-Chapter-Project?node-id=14%3A3 I don't want everyone to have edit access, just the designers. Once you click the link, everyone's names will show up and then I will give access to those who are designers. |
I have a mockup about halfway finished on XD. Once I'm done, feel free to pick it apart! |
I'm helping develop the iOS app as well! |
Oh that's a good start. |
I disagree here. It's important we make mobile first deigns because the app is going to be consumed heavily on mobile form factors. Designing mobile first helps us prioritize real estate and make mobile first development possible. That way we develop up via. progressive enhancement. Otherwise this becomes afterthought. I've seen many a project go down because we took that approach. Heavily recommend mobile first designs. |
What I mean by mobile first is considering how the layout will appear on a mobile device, regardless of whether its browser based or a native mobile app, the layout should be similar in either case. Having a mobile responsive web based MVP utilizing CSS media queries should give us a solid base for collaborating on any potential native options, especially considering that any modern web based apps should be optimized for mobile anyway, at least IMO. |
Ah I see - if it is mobile-web vs native, then I agree. That is absolutely mobile-first design. I misconstrued what you said - in fact, I see that you suggested mobile first in your comment above 😄 I guess it is more for the other designers out there I guess |
Are making two individual apps for both user and organizers? Or are we going to allow everyone to create their own events directly from one app? |
Are we using any existing CSS Framework like Bootstrap? And build on top of it? |
@nabilahsan #34 and #121 talk about bootstrap-styled and other bootstrap variants and alternatives. I haven't seen a consensus on that but @vaibhavsingh97 @nik-john @francocorreasosa @vkWeb and others were part of those conversations, so pinging them for thoughts. |
@nabilahsan I would highly discourage using any CSS framework. I think with flexbox, grid, css variables at hand, css frameworks aren't that necessary. |
What about components like buttons, date pickers, accordions and input fields? |
I can't see any problem with buttons, date pickers and input fields. Implementing accordion is a task I agree with. We can use btw, where we'll use accordions? |
I was just giving an example. With every design decision we make, we will have to be in communication with the devs to see what's possible and what isn't. So no over the top designs from us. Only what's necessary and functional. |
It's generally a matter of time and effort that drives the decision whether to use UI libs or not. We can always build our components from scratch and make them super slick, but unfortunately that involves a lot of time, and a lot of re-inventing the wheel. A simple component like a datepicker has multiple implementations across browsers. Now, one can say we should then use Normalizer or ResetCss for that. But then again non-primitive components like accordions that we develop will also need to be cross browser compatible - something that CSS reset libs wouldn't be able to help out with. So it's more likely than not that we will end up using some library or the other Here's my suggestion - while we deliberate on what UI library to use (Material vs Bootstrap vs X), the designs should use standard UI components that don't deviate substantially from convention. If you need a superset to choose from, refer to either https://material-ui.com/ or https://getbootstrap.com/docs/4.3/components/alerts - anything that's there should be doable regardless of the libs we choose eventually |
I agree. Also using features supported directly by CSS instead of a framework would save us from having to migrate to newer versions of the framework when breaking changes are introduced in future releases. |
This is an early draft of a mockup I made for the login page viewed from a mobile device. I'm not sure if we're going to include a traditional registration/login or if were strictly using Oauth, but in the interest of keeping things simple for now I just included buttons for Oauth. I'm also working on views for larger screen sizes, but as I previously stated I think its a good idea to focus on mobile first. |
I just noticed in the user stories that a traditional registration/login is intended so I'll work on incorporating that into my other mockups. |
Our prototype is ready! 🎉 I'll be looking forward to all the feedback and ideas to improve it. Press 'F' to have a better experience. Here's the link: |
@vkWeb the link doesn't work for me |
@martineizayaga It's working I just checked. Try visiting it in incognito mode. You need to login to Figma to view it I guess. |
@martineizayaga Sorry, the link wasn't public by default so that caused 404. Here the public link to access the prototype: https://www.figma.com/proto/q7DikyL3N0c4CUWxHNa97i/Chapter-Prototype?node-id=1%3A2&scaling=scale-down Don't forget to press 'F' to have a better experience. I'll be waiting for your feedback. |
@vkWeb Awesome!!, nice work man. Any way I left some feedbacks there and questions |
@MirzaChilman I'll try to address those. Thanks for taking a look :) |
@all-contributors please add @madaleneaza-design for design |
I've put up a pull request to add @madaleneaza-design! 🎉 |
@all-contributors please add @vkWeb for design |
I've updated the pull request to add @vkWeb! 🎉 |
@all-contributors please add @SeanRParker for design |
I've put up a pull request to add @SeanRParker! 🎉 |
@all-contributors please add @odomojuli for design |
I've put up a pull request to add @odomojuli! 🎉 |
@all-contributors please add @finisher1017 for design |
I've put up a pull request to add @finisher1017! 🎉 |
Discuss your ideas or share your views:
Designers! Now is your time! Please submit your proposed wireframes as a screenshot in this issue
Desired screens
DISCLAIMER: I am not a designer. Please feel free to comment with proposed additions to this list, as it is not an exhaustive one.
I have listed the MVP user stories below for your convenience. They can also be referenced in #83.
As a future participant
As an organizer:
The text was updated successfully, but these errors were encountered: