search

radgrad / csexplore

The CSExplore system for introducing high school students to computer science
0 stars 0 forks source link

Create wireframe of CSExplore using Figma #2

Closed philipmjohnson closed 4 years ago

philipmjohnson commented 4 years ago

To provide a bit more insight into CSExplore, create a mockup user interface using Figma. There are some steps to follow so that we can collaborate on these mockups:

  1. Create an account in figma using your hawaii.edu email address.
  2. Request educational status. See https://www.figma.com/pricing-faq/#is-figma-free-for-students for details.
  3. Once your account is verified as educational (it only takes a couple of minutes--they send an email to your hawaii.edu account and you have to reply to it), then let @philipmjohnson know.
  4. Philip will then "invite" you to the RadGrad project team. At that point, you can start creating mockups that everyone on the RadGrad team can see and collaborate on.

Once you have created (say) a half dozen mockup UI pages, post a comment to this issue briefly describing what you did and what issues you ran into while creating them.

Mockups should be oriented for mobile, not laptop.

qauchida commented 4 years ago

I finished doing a simple mock up of one of the ideas I had for CSExplore. I had a bit of fun and made it ocean themed but the main take away from this exercise was to make groups of components you use a lot. I had a header menu in every page and it was so much easier to make a header menu group and copy the group to different pages rather than copying each drawing one by one.

I also found it was easier to enter the xy coordinates and dimensions in the design menu rather than clicking and dragging.

I do wish there were built in icons in figma (like hamburger menus) but I got by pasting in .svg and .png files. I also wish I could have embedded a youtube video in the mockup but I got by pasting in a screenshot.

I really liked @angeli-amascual 's idea of using arrows in to show which pages certain buttons go to, so I went back and put them in.

angeli-amascual commented 4 years ago

I did six different mockups for the app design. For each mockup, I tried to implement a different layout such as by moving the navigation bar, changing the home page design, and adding things like a sidebar and back/forward arrows.

An issue that I had with making these mockups is that I wasn't sure what kind of features the app would include. Due to that, I used what was part of the CSExplore Goals and what I thought would be nice features. In addition, since this was my first time making a wireframe for a mobile application I wasn't sure what kind of layouts I could make and how I could make it look appealing.

I think moving forward throughout the week I will likely look back onto the wireframes I made and adjust/edit them as I come up with new ideas/improvements.

ghost commented 4 years ago

https://www.figma.com/file/PjPGwK2mdqtHbP0Rd6doOw/CSExplore-Hanna?node-id=0%3A1

I finished 6+ frameworks for CSExplore. The main pages are Home/ Explorer/ Clubs/ Workshops and Events/ Resources / Mentor Spaces / About / My Page.

Explorer - This page has 5 sub pages and contains data from RadGrad. It gives information regarding CS and encourages highschoolers to pursue CS degrees.

Clubs - This page offers a platform that highschoolers can build a CS club at their schools. As the club grows (i.e. number of club members, participations, and etc.), CSExplore sends schools level stickers and encourages them for more activities.

Workshops and Events - This page lists the local workshops, webinars, events, hackathons for highschoolers.

Resources - This page lists external links such as code.org, exploringcs.org, tableau.com/data-for-kids, YouTube videos and etc to provide useful information.

Mentor Spaces - This page will be similar to the RadGrad's mentor spaces. Undergraduate students also can be mentors and answer questions.

  1. Explorer      a. Why CS?      b. Interests      c. Career Goals      d. Opportunities      e.CS degrees in Hawaii

  2. Clubs

  3. Workshops and Events

  4. Resources

  5. Mentor Spaces

  6. About

  7. My Page

maxdeyo commented 4 years ago

I made 15 pages and subpages. I used some components from Figma's mobile UI kit to make things a bit easier, https://www.figma.com/templates/mobile-ui-kit/. Under Mockup 1 there is ideas for the Sign In, Sign Up pages as well as Explorer, Feed, Interests and Profiles page. Under skills/points I made three pages as an idea for a skill/point reward system. I plan to keep adding to these over the week.