This is the update for subject page layout.

subject page layout 1

subject page layout 2

The first design looks good for the landing page by @saiabhijitht, it solves the current issues with buttons (because they are ghost buttons right now). Would be better if we put some shadow on the cards too.

Also in navbar instead of just underlining links on hover, should be a block with around 50px - 80px square thing would be better, same goes for the mobile too. Need to work on color contrast as well.

Guys, what do you think of this blue color instead of pink.!! I believe pink will give strain to eyes and would not be pleasing to read the content.

I think blue is good here but will not match the logo and the coderplex svg. Even then if we are going with this, better to have two or three colors max. so it gives the whole website a two-color or three-color theme.
And btw navbar looks better now.

@bhansa Yes, I meant to change the color of the logo also. I just kept it as I am not having the source file of the logo.

@saiabhijitht also can you provide the assets used in this versions home page, we are planning to start working on this.

@duttakapil can you please source file for our logo from its creator
@saiabhijitht in which format do you want illlustrator?

@M-ZubairAhmed Pradhan has lost the original files I'm afraid. We might have to recreate the assets from scratch, in high quality. Is anyone up to volunteer for that?

@saiabhijitht @bhansa I now do not think we should have either the pink or the blue. I actually like our use of plain white and empty space in our current design, and I think we should simply enhance that. I do not feel we should think of the UI as a feature of our website, it should in fact get out of the way, the user shouldn't even have to notice it, they should simply get absorbed into the UX. I like how both Udacity and Khan Academy use as little but visible colors as possible, while filling the rest of the space with white. We should do that, I feel

@duttakapil How about this one..!!

New Modified Landing Page

@saiabhijitht would you kindly also look into page after learn/subject #66 and give your suggestions. If you have time could you prepare a rough mock for us to start the work with

Ref: http://deploy-preview-106--coderplex.netlify.com/
@vinaypuppal , I mentioned some changes below in homepage.

1. Set the global border radius to 0px for now. For all learn cards, event cards and buttons.
2. Buttons shall be sized as small, medium and Large.

Small for Sign/Signup.(3/8th height of Large buttons)
Medium for CTA buttons and subscribe(Half the height of large buttons)
Large for Join Discord.(The present height of Discord button is good)

3. Card design:
   Image background: #FFF;
   Title bg: #F6F6F6;
   Stroke: #B9B9B9;
   Section bg: #F6F6F6;
4. Header:
   Set Height to 60px.
   Reduce the gap between the nav items and add Home section.

@vinaypuppal let us work on invisionapp to discuss changes or any queries right on the image. Follow https://invis.io/BMEFI5VKP for whole project. I will be uploading pages once they are done.

Ref: http://deploy-preview-106--coderplex.netlify.com/

The navbar looks a bit off on mobile. It would be great if it had a sliding transition! Like the navbar sliding into the screen from left on clicking the hamburger icon.

@szohaib yes mobile version needs some work. But menu has sliding down animation, is that not looking good to you?

@duttakapil regarding the content, Can we use data from the stackoverflow documentation dump instead of scraping. If somebody has already done something with that data please share the idea. I think we can use that data as the content.

@vinaypuppal The sliding down animation is at the right of the page currently. It would look good if the animation happens just below the hamburger icon.

@szohaib can you send a screen shot, as we have implemented it to be sliding down from below hamburger icon itself

@M-ZubairAhmed @duttakapil What do you think of this flow and layouts..!!

Subject Layout

Guide Layout

I think that there should be some pointer/indicator in sidebar which indicates the completed topics. I also think that there should be some indicator in the content section also showing how many tasks have been completed.(But I think 2nd one is not that necessary)

@pbteja1998 Thank you for reminding about progress bar. I actually forgot to include it. I am currently waiting for Kapil's approval of the flow. He is not convinced about having the "laravel" page in between "Learn" and "Coderplex Laravel" for this version of product release.

@M-ZubairAhmed @vinaypuppal

@duttakapil can we also add the courses which are in progress in the user profile.

@bhansa yes, we will be adding the enrolled guides, that are ongoing and completed by the user.

@saiabhijitht how are you planning to follow up with mobile versions of the mocks? do you plan to do after we finalize web version?

@M-ZubairAhmed I am not really planning for mobile version for V2. But I am just keeping it in mind for events page while designing them. I need Analytics of learn page, mobile vs desktop ratio after V2 is released. We can then set our priorities for further improvements.

@duttakapil @M-ZubairAhmed There should be a brainstorming session for profile pages, where we need to finalize the functional aspects of each page and initial layouts. Can we schedule it tomorrow..!!

@saiabhijitht

I am not really planning for mobile version for V2. But I am just keeping it in mind for events page while designing them. I need Analytics of learn page, mobile vs desktop ratio after V2 is released. We can then set our priorities for further improvements.

But I feel we should go with Mobile first design from starting as many users will be accessing site on Mobile device these days.

@saiabhijitht sure, we can do that. Let's schedule a meeting for tomorrow.
Also, I agree with @vinaypuppal on the mobile-first strategy here

@vinaypuppal For the V2, we decided to keep Learn Page as main priority after a couple of days we released V1.
Suppose we have concentrated on space or events page, we are not any way starting our hacker-space right now, and the events call to action is anyway directed to meetups page. As long as we do not have proper traffic to our page, it is really not a good option to spend time on events and space page as it would not give us enough returns. But Learn page is our main product where we want people to focus more. This feature would bring us traffic, establish a market and would make people to make donations. And most of our target audience for Learn page, as I believe would come from desktop users. I need Analytics to confirm it.

Please share your views. If there are any major issues to be addressed, we shall fix them in V3 or V2 itself, depending on the deadline for V2.

@saiabhijitht

Suppose we have concentrated on space or events page, we are not any way starting our hacker-space right now, and the events call to action is anyway directed to meetups page. As long as we do not have proper traffic to our page, it is really not a good option to spend time on events and space page as it would not give us enough returns. But Learn page is our main product where we want people to focus more.

I am not not talking about any particular page here. I am just saying its better to go with mobile first design.

This feature would bring us traffic, establish a market and would make people to make donations. And most of our target audience for Learn page, as I believe would come from desktop users

Yeah lets hope users will use desktop

• But according to you whats the disadvantage of going with mobile first design?
• Any specific reasons?
• According to you What features on learn page prevents users from using mobile site?

I think If we have best mobile experience it can double the traffic.

I need Analytics to confirm it

For https://coderplex.org we have 15.5% mobile traffic for now.

@duttakapil Do you have any others thoughts?

@saiabhijitht

This is the task list for Mock-ups.
Learn
Learn page

I am putting this list on top so it stands more visible. Let me know if you can still check them off!

@vinaypuppal It is not that I never thought of mobile first design. @M-ZubairAhmed @duttakapil and myself had discussed it many days ago and came with the present layout. In-fact we thought we should go with mobile first concept, but agreed upon the idea that our major target users would use desktop platform. Still we are trying to make it mobile friendly as much as possible. It might be the left and right sections of learn page or what ever, we decided them only when we were sure that we can also do them in mobile.

• According to me, there isn't any disadvantage if we go through Mobile first design, except for it would take some more time. Right now, I am the only one designing mocks and I need to give time for all other design works. So why should I spend time on screens that I am not sure users would prefer.

• There isn't any specific reason, we just agreed upon it. We can't be perfect in a single version release.

• As of now, there isn't any feature in our product that would make people prevent using mobile site. Still, that is not the reason we are avoiding it. What ever our users are learning from the information provided, they have to end up using desktop for practicing.

Even I agree that giving good mobile experience would improve the traffic. But traffic does not give us market. It only means that people are watching our site. Market will expand only when people successfully complete the course and suggest to others. I need our Analytics at the moment when people start learning through coderplex. In a sense, when the avg. session duration is substantial.

@M-ZubairAhmed

Learn Mockup

Learn Mockup details

@saiabhijitht

How about this design for subject page syllabus

Ref:

Learn Mockup

@M-ZubairAhmed I am not sure if you are proposing for the Visual design or the elements present in it like the icons, secondary nesting etc.
If it is about the visual design, it is not consistent to other elements of the website. We need to have the height of each unit/sub-unit equal to the medium size buttons of ours. If you are trying to remove the background color for the sub units, it is fine for me for now.
If it is about the icons, nesting or the search bar, they are not really necessary for us. If needed in future, we can have a search bar for entire guide, where users can search any concept from the guide. But that will not go in the table of contents section.

@duttakapil

Profile page

I haven't kept the source code link directly on projects cards. It can be shown in the project page and any other links related to the project. What do you think..!!

@saiabhijitht the View Project button would in this case link to the source code or github repo of the project itself, because as I said, most projects wouldn't have some website version to view the project. Only the web-dev projects will have websites to see the project in action

I'm still not certain about the Open For Opportunities toggle on the left hand, below the profile pic. Would like to know what others think about it

@duttakapil we have to show many more details of the project other that the link to the source code. It is highly unlikely that people see the title and look at the source code. We still need to show the description. If needed we also should show the team/organisation involved in the project or any other project details. That could be heavy content for a card display. What do you think..!!
Regarding the toggle button for opportunities, we can alternatively have a button named career interests directing to a different page/form, where people can choose their career options. But button should still be in the top section of the page. As we have a business model attached to this, it has to be placed where people can easily find it.

@saiabhijitht sorry for the late response, but I think the amount of description you have provided in the mock is sufficient to get a gist of the project. Team / organization or contributions could be a never ending or long list, and members will be able to see that anyway when they open the Git repo of that project. Plus, this is just the early version, we can revisit this at some later time

@saiabhijitht regarding this Open For Opportunities toggle button, what I mean is that when the user or any member of the website open their or anyone else's profile, they should not see a toggle. They should simply see if this person is currently employees anyway, and if no then are they currently looking for a job?
Changing this detail can be in the in-line-edit version of this page

@duttakapil

They should simply see if this person is currently employees anyway, and if no then are they currently looking for a job?

There are many other combinations to this case actually, being employed or not being employed, the user can still be looking for an opportunity or not be looking for it. Let us not connect these two constraints.

Changing this detail can be in the in-line-edit version of this page

I will look into this.

@saiabhijitht we don't have to meet all these combinations in this one small space. Let's define the purpose of this button, it's for potential employers to quickly find out if a member of our community is currently looking for a job or not, and for our fellow members to know where said member might be currently working. It's similar to relationship status on Facebook.

For members who might currently be employed and might still be looking for alternative or new jobs, they will be utilizing our to-be-built Jobs page.

we don't have to meet all these combinations in this one small space. Let's define the purpose of this button, it's for potential employers to quickly find out if a member of our community is currently looking for a job or not, and for our fellow members to know where said member might be currently working. It's similar to relationship status on Facebook.

This mock I provided is for the user who owns the profile. I will also give the other mock from other community members view.

@saiabhijitht User A's profile should look the same for user A as well as every one else on the Internet, including all other members. Similar to how my Twitter profile would look the same to me and you and everyone else on the Internet, even those not on Twitter.

It's only when user A enters Edit mode that the page should look different, where they can make changes to the said profile

@M-ZubairAhmed @duttakapil

Profile page guides

Profile page projects

@saiabhijitht can you open individual issues for other designs.