[feature] profiles page design concept

[Yugalitree]

I have a idea to improve the layout which could recognize everyone more easily. ( maybe add everyone's photo or other methods. )
And create a group view to see everyone in which group and do what project now.

[serapath]

if somebody has some cool idea how the overall wireframe to include many profile cards which include user information, and more information and a little user private message chat box (maybe flipped or expaneded user card) and a little activity feed and the search and filter bar on top of the page...

1. maybe just draw it with a digital tool or with pen and paper
2. make a screenshot of photo and upload it

---

We have one older webpage http://www.codingamigos.com/
Maybe it could be something like this - but more in the colors and design of "wizardamigos" like here:

• http://wizardamigos.com/
• or http://wizardamigos.com/workshop_app/
• or https://wizardamigos-codecamp2018.herokuapp.com/landingPage

[Yugalitree]

I found one reference just now:
https://codyhouse.co/demo/faq-template/index.html

[Yugalitree]

I think maybe the category about the navigation could be the group name.
And the right side content could be member's name and information.
But the look maybe changed.

[Yugalitree]

another reference:
https://codyhouse.co/demo/bouncy-content-filter/index.html

[kiecoo]

I followed ideas of all of you offered and found some ideas.

1. 【The layout】 list of everyone's photo
   (A.) when hovering -> show the short personal info &the link of gitHub.twitter……
   example: https://www.wpsuperstars.net/wp-content/uploads/2017/05/4-TC-Team-Members-Main.png
   (B.) when clicking to see detail > jump to personal profile page
   example:https://blog.amasty.com/wp-content/uploads/2017/02/360i-meet-the-team-page.gif

2. Add【search bar】: make it easier to use name to find someone/ filter people who can write CSS/ filter someone who is interested in blockchain to cooperate

3. 【category】:by group of project / something else
   Category:project Add a Gitter chat badge to README.md #1 :xxxx project Example update #2:xxxx ……..
   example:https://carrot.is/people
   (click the button on the righthand side to see people which be classified into different groups)

---

these are some ideas which are not completed about the project we are doing now. But I think perhaps it would get connction with what we are doing now/share the some data. If it would,maybe it’s good to think in advance to let other page connection would be easier.

4. 【extension-project page】
   (A.) purpose: instead of click to go in everyone’s page one by one to search ,the list of project page could let people to see projects what they are interested in the first sight
   (B.) example: http://g0v.tw/zh-TW/project-from-registry.html
   (C.) each project could have the link to [the profile page of the project’s host] &[the project of gitHub]

5. 【extension- Platform】match amigos with the project they are interested
   (A.) Sample: Platform of give & take
   http://www.giveandtake.com.tw/list/terminated?kinds=%E5%85%AC%E7%9B%8A
   (B.) [give]:people who offer ability they have
   [take]:the project which needs people to cooperate

[serapath]

haha, nice text formatting :-)

I like the ideas.
I'm not totally convinced by the example pictures even though I like the visual concept.
It is possible to search on http://codepen.io but I also sometimes find inspiration on https://dribbble.com

The searchbar is a cool idea. Maybe we could refine the visual concept for the search & filter bar.

3. I'm not sure I understand how 3 is meant.

---

4. does it mean we would make another page like the profiles page, but for projects?

• i like the idea a lot. We should totally do this
• ...but most people didn't really start and describe their projects yet
• we also need something like config.json to describe projects

I would recommend we first focus on the profiles page and we can collect ideas that come up for the project page in an issue to work on it when we finish the profiles page

5. already 4. sounds a bit in that direction, but 5. definitely does - This is exactly out plan in the long run.

• we have a whole github organization we want to turn into this http://github.com/workingamigos

...but yes - let's refine our skills yet, because matching logic and all this requires quite a bit of javascript skills :-) But I really like the idea

[kiecoo]

1:【The layout】thank you to offerring two ways to search. I would try some searching with that.
3:【category】 yesterday I didn't write in detail. There is a image I made to show the idea
https://goo.gl/5YqjN8
..............................................................
4&5:
I feel the same way as Alex's to put 4&5 in the future task so yeaterday I listed 4&5 in the extension
Putting in the extension because I have no idea about "how much time it might needs about 4&5/if 4&5 is suitable or not"
(4&5 is what just popped into my mind after searching others websites of the profiles page. )

4: 【the list of projects】:

• I agree to put this when we finish the profiles page
• 【ideas】 about 4.
  the only 2 ideas now which I could come up with to deal with 【the list of projects】
  (A.) the filter bar: users can see the list in the filter bar( as NO.3's image)
  (B.) the project page
  (C.) other better ways.....

[kiecoo]

I searched on Codepen

1【The layout- photo hover profiles】
(A)：Team page hover profiles
https://goo.gl/2GdWAV
(B)：Team page click
https://codepen.io/andytran/pen/BKOOQy
(C ): our team hover
https://goo.gl/sFH4Qt

2【search bar】
(A)：Self-Adjusting Search Bar
(category+search)
https://codepen.io/gzabrisk/pen/rLBwk
(B)：category mutli-select
https://codepen.io/ewiener/pen/eZgaaW

[serapath]

1. profiles layout

• the hover effect is interesting, however:
  • https://codepen.io/nodws/pen/WwwrjQ?limit=all&page=2&q=team+page
    • maybe it's a bit "too much"? something more playful and less hectic.
    • also it should fit the 8bit pixel design we already have in other projects
    • ...but a hover effect for more details is cool
  • https://codepen.io/Aashima/pen/YryzJy?depth=everything&order=popularity&page=5&q=team&show_forks=false
    • same - not bad, but maybe a little bit much :-)
• i like this one a lot - it is more subtle :-) https://codepen.io/andytran/pen/BKOOQy

2. search bar

• this https://codepen.io/gzabrisk/pen/rLBwk and this https://codepen.io/ewiener/pen/eZgaaW
  • a good start, but we really need to think what are all the details we need :-)
  • i'll also search and maybe create a codepen ... but a good start

3. design concept wizardamigos-profiles

• cool - i saw you example on google drive
• i would recommend to do it in codepen instead
• it's better for practicing and you can immediately use the result
• it's important to be efficient as a cyber nomad :-)
• the most efficient is if you become good in making your demo's in codepen directly so you can use and refine them later and don't do double work :-)
• ...it just takes some time to practice, but become very fast

4.& 5.

• so you want a way to filter users profiles by project, right?
  sounds interesting to me :-)

[ninabreznik]

Is there some sketch perhaps, how the page will look like at the end? Some concept that we could see, so we can maybe give some feedback and maybe improvements suggestion...

[serapath]

nope, sadly there isn't currently