[feature] profiles page design concept

Yugalitree commented 6 years ago

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 commented 6 years ago

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...

maybe just draw it with a digital tool or with pen and paper
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:

Yugalitree commented 6 years ago

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

Yugalitree commented 6 years ago

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 commented 6 years ago

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

kiecoo commented 6 years ago

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

【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
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
【category】:by group of project / something else Category:project #1 :xxxx project #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.

【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]
【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 commented 6 years ago

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.

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

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

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

nope, sadly there isn't currently

wizardamigos / profiles