Landing: Redesign

[K05730]

Our landing is still from our Beta-test. I think it's time to get a better one! Something that is creative and appealing to us as developers. Sign-up should be clear as well as log-in and logo we need. It should also contain a good explanation what this project is (we can provide this ofc!), what type of companies are running searches on the other end (maybe a traditional carousel of logos?) and company information. A fun idea, maybe we should have room for our OpenSource issues aswell.

[ivan-kolmychek-devv]

Sounds good to me. If we can fit somewhere there a section with acknowledging contributors and noticeable link to this repo, it would be even better. :slightly_smiling_face:

As this issue is only about landing, I took a liberty and created #30 to add link somewhere in part that we see when we are already logged in.

Let's hope someone with good graphical design skills will stumble upon the issue, I am quite certain you don't want me anywhere near designing it. :smile:

[nocategory]

Hey guys, so I made a little mockup of my ideas in a few minutes (just the first part of landing for now):

I'm just like @ivan-kolmychek-devv though, no good graphical design skills, but since no professional designer came here for now, I just got some inspiration from other websites and put this together. I still don't think some things fit very well though, so this is just a call for feedback, since there aren't many "guidelines" on what to aim for for now. Also, had no idea of what to write on, for example, the menu, so just left it with some generic words.

I had another idea too, maybe on the right side of the website a login/signup card could be placed (like the current version of devv.jobs) instead of having those illustrations. Feedback? 😆

[nocategory]

So, I've been working on the rest of my somewhat idea for the landing page for the past day with the available info, and this is what I've ended up with:

Feedback is appreciated!

[K05730]

Really impressed. Let me gather some thoughts and get back to you within a day.

[K05730]

Alright! As I wrote above it looks really good. Maybe we should remove logos of companies as they continue to increase. It could potentially be a massive point of manual updating. On the other hand maybe it’s reassuring to see which companies are using it?

Love the GitHub-section. Maybe we should show the issues already there? What do you think?

[nocategory]

Hey @DevvKris, I believe showing the company logos is a big thing. It shows the potential users what companies use your platform. Personally, if I were a new user and I visited your platform and didn't see some of the companies you work with, the credibility of the platform would go really down. If I'm looking for a job, I feel like trusting a platform that works with "known brands" (as you do) is the best option. I wouldn't trust my data to some random platform.

About the GitHub section, I thought about this but it would require a request to GitHub's API to get the issues. I also think that if someone is interested enough in helping the platform, they'll check out the GitHub page and see what they can help with, so having the issues shown in the landing page (again, one more request) seems kind of redundant. I can try to add the issues in there though, so let me know if you'd like me to try doing so.

[tetiana-kolmychek-devv]

@nocategory I have just one small question. :) Are those images made by you? If not, can you provide the source so we can make sure that they can be actually used from copyright/license perspective?

[nocategory]

@tetiana-kolmychek-devv They're not made by me (since, as I've already mentioned, I suck at designing stuff). These are the sources:

• Icons from https://feathericons.com/
• Humans and app background on the first part of landing from https://www.humaaans.com/
• Rounded section and pointy background on "How it works" from https://www.uistore.design/items/free-landing-page-booklov/
• Blue circles on background of first part of landing from https://www.h69.design/free-vector-plastic-liquid-gradient-waves-513.html
• Buildings background on the first part of landing from https://www.uistore.design/items/gohub-landing-page/

That's about it. Let me know if you have any more questions.

[nocategory]

@DevvKris I tried placing issues in the GitHub section just for the sake of demonstration, and I think it looks quite nice too. Give it a look:

[ivan-kolmychek-devv]

@nocategory thanks for the sources. @tetiana-kolmychek-devv asked me to take a look to confirm that we can use that from licensing standpoint.

We appreciate the contribution that you already made to this issue and we would like to be able to use it, so that means we have to consider licenses of parts that are used.

(Disclaimer: I am neither a lawyer nor specialist in copyright)

Icons from https://feathericons.com/

Released under MIT, can use. :heavy_check_mark:

Humans and app background on the first part of landing from https://www.humaaans.com/

Released under CC-BY 4.0, can use, but we need to find a way to give attribution, the details are in that license description. :heavy_check_mark:

Rounded section and pointy background on "How it works" from https://www.uistore.design/items/free-landing-page-booklov/

Says It’s completely free for personal uses., I highly doubt our use-case fits the description. Says nothing else about license, so we must assume it is under exclusive copyright by default.

This means we probably can't use it. :x:

Blue circles on background of first part of landing from https://www.h69.design/free-vector-plastic-liquid-gradient-waves-513.html

Can't find any information about license, so we must assume it is under exclusive copyright by default.

This means we probably can't use it. :x:

Buildings background on the first part of landing from https://www.uistore.design/items/gohub-landing-page/

Can't find any information about license, so we must assume it is under exclusive copyright by default.

This means we probably can't use it. :x:

I could be missing something, so if you can point me at something on those pages that says those assets are licensed under something like CC or public domain or MIT/BSD/GPL, that would be very helpful.

If not, can you help us to find alternatives that are licensed in a way that we are allowed to use them?

[nocategory]

Thanks for checking the licenses @ivan-kolmychek-devv, since this is my first time doing this, I just relied on the website I found all these links from (https://www.evernote.design/) and assumed they were all free for commercial and personal use since the website stated most of them as "free".

You're right about all the licenses though, and I understand you can't use those assets if they don't have information about the license. I'll remove those assets and add others, while keeping much attention to the license.

[nocategory]

Alright, so after changing the assets this is what I've ended up with:

Sources:

• First section of landing blue background https://vectorforfree.com/product/teamwork-illustration/
• "We are there for you" rounded section https://vectorforfree.com/product/freelancer-illustration/
• Buildings on background https://ui8.net/products/isometric-setup-pack

I've read through the licenses of these websites - https://vectorforfree.com/90-2/ and https://ui8.net/licensing, and they both allow personal and commercial use without attribution.

[ivan-kolmychek-devv]

@nocategory thank you, result looks good to me, licenses as well. :tada:

As for attributions, I think we can create a separate page with all the attributions and place a link to it near "Made with :heart:".

As a sidenote, I think we still should give attribution to all resources that we used, even if license does not require it, as that would be a good thing to do and it doesn't cost us anything.

For example:

Made with :heart: Uses external resources (all phrase is a link to page with attributions) Opensourced on GitHub (all phrase is a link to repo)

@tetiana-kolmychek-devv @DevvKris @nocategory what do you think about this?

[nocategory]

@ivan-kolmychek-devv I think it's quite a great idea! I'm thinking about a single page though, giving credit to the external resources and contributors to the repo(s). Maybe we could use contributors avatars with a tooltip that shows their names on hover.

[ivan-kolmychek-devv]

@nocategory interesting idea. Sounds good to me.

I personally like the idea with displaying contributors with avatars, data on contributors can be pulled from Github API if I remember correctly.

Do you have any suggestions on how exactly that should look when it comes to external resources (like those assets that (will) use)?

[nocategory]

@ivan-kolmychek-devv Maybe we could have like a Material Design-ish card with the asset and link to the website? I'll try to make a mockup today or tomorrow to show you my idea

[nocategory]

@ivan-kolmychek-devv okay, so I made this in a few minutes:

It's way simpler than the landing page, but I don't think that's that big of a deal. Let me know what your thoughts are

[ivan-kolmychek-devv]

Thank you! This looks very good to me.

The only suggestion that I can come up with right now is to give contributors big cards as well, otherwise they look too small in comparison to the external resources, which is unfair - we use those resources in just a few places, while contributors like you spend a lot of their personal time on issues and pull requests.

_(As a sidenote for future implementation, I personally think I should be excluded from contributors, to give more focus to the members of the community who help us to build and maintain it all. :slightly_smilingface: )

@tetiana-kolmychek-devv @DevvKris do you have any other suggestions?

[tetiana-kolmychek-devv]

I agree with @ivan-kolmychek-devv and overall both sketches look great! If there is a possibility in GitHub API to exclude from contributors people from organization - I think we definetly should do that and show only external contributors..

[ivan-kolmychek-devv]

@tetiana-kolmychek-devv if there is no way to do so, I think we can just .filter() them after we got them, or something similar - for example, check them against hardcoded list of contributors that shouldn't be shown, (like me and potentially other members of organization).

Or something different, more efficient. :slightly_smiling_face:

[nocategory]

What do you guys think of this? Tried to keep the same "theme" between the external resources and contributors.

[ivan-kolmychek-devv]

@nocategory thanks, this looks better to me. More fair to contributors. :)

If @tetiana-kolmychek-devv and @DevvKris don't have any other suggestions, I think we can start implementing it.

Would you like to implement it?

[nocategory]

Hey @ivan-kolmychek-devv unfortunately my knowledge on Vue is really limited for now. For that reason, I'd prefer someone more knowledgeable worked on it. Once someone chooses to do so, I can share all the resources I used on the mockups.

[lilsweetcaligula]

@nocategory You sure you don't want it? It should be relatively easy to figure out. We could additionally collaborate on this issue if you'd like - you can pick it up, and if you are stuck, I could help you figure it out.

[nocategory]

@lilsweetcaligula Sure, I'll give it a go. Initially I didn't want it since I could be slowing down the issue resolution, but if everyone's ok with a little delay, I'll try it ! :) I've already given a look at the components used on the landing page, and Vue's template system seems to be quite simple. I just haven't figured out all about the routes, maybe I'll need some help with it when I get there.

[lilsweetcaligula]

@nocategory Routes should be easy to pick up, don't worry. But I would personally not worry about the routes right now - instead try locating the landing page component (I am personally not sure where it is located, so I would have to check myself, else I would tell you), then inside the mounted method (you can define one if it's not defined) of the component you can start prototyping the code. :smiley:

[nocategory]

By the way guys, I hadn't even thought about what happens after you click "Login" or "Sign up". What about opening a modal with the form. What's your opinion on this?

[lilsweetcaligula]

@nocategory Almost forgot. Front-end is using the axios package to make HTTP requests, so when you need to send a request to the GitHub API. you can use it. For more details on how it is used, you can check out:

@/candidates/core/services/auth.service.js
@/core/services/auth.service.js

where @/candidates is the same as ./src/candidates. Ugh... I think.

Also, the GitHub API may require the User-Agent header. So if the API is refusing to reply with proper JSON, it must be it. The header value can technically be pretty much anything, as long as it's there.

[nocategory]

@lilsweetcaligula Yeah yeah I know ahaha don't worry though, I might be a newbie with Vue but I've already worked on some projects with axios and, most recently, my portfolio with the Github API so I should be able to manage it 😃

[ivan-kolmychek-devv]

I like the discussion that has been going on. :slightly_smiling_face:

Initially I didn't want it since I could be slowing down the issue resolution, but if everyone's ok with a little delay, I'll try it ! :)

Thank you @nocategory , that would be quite cool. I don't know when we would be able to get to this issue, so help is really appreciated. Implementing it slower beats not implementing it at all in any near future, in my humble opinion. :smile:

We could additionally collaborate on this issue if you'd like - you can pick it up, and if you are stuck, I could help you figure it out.

And thank you too @lilsweetcaligula for help. As a very small team we are not always able to assist with everything in a short time, so collaboration between contributors is appreciated as well. :slightly_smiling_face:

By the way guys, I hadn't even thought about what happens after you click "Login" or "Sign up". What about opening a modal with the form. What's your opinion on this?

Sounds good to me, but I am not sure would it be blowing up the scope of an issue.

It may be a good idea to limit first implementation to just redesign even, with attribution page without contributors at all - they can be added as a next step.

I was going to suggest to start with those buttons just being links to login and signup pages, but then @tetiana-kolmychek-devv reminded me that we don't have a signup page. :sweat_smile:

So, options that I see for that:

• A. Add a new signup page, make button a link at first, add popups later. The advantage is that re-design will be simpler then, the disadvantage is that the signup page will be pretty much useless after popups will be added, so it could be a waste of time in the end.

• B. Add popups right away. The advantage is that we don't waste time on a (potentially) unnecessary page. The disadvantage is that it may increase the scope of redesign and may make it harder to deploy piece by piece, as we can't really propagate any parts of it to production if it breaks the signup. That happens to be a very important feature. :slightly_smiling_face:

• C. Create an extra mockup for transitional phase of landing, with forms still there, right in the page. Replace the forms with popups later. The advantage is that we can still deploy redesign part by part and we don't waste time on extra pages. The disadvantage is that we still potentially waste time on an extra mockup.

We don't really agree on what option would be best, so we are open to suggestions, especially since it's you who will be implementing it @nocategory @lilsweetcaligula.

[nocategory]

@ivan-kolmychek-devv I believe after reading your comments that adding another page for login and another one for sign up would be the right thing to do. I'll start working on the redesign probably tomorrow. By the way, did you ever think about the items in the menu? Don't really know what to place there, if anything really.

[ivan-kolmychek-devv]

@nocategory cool! :+1:

adding another page for login and another one for sign up would be the right thing to do

Let's roll with it then. We already have login page (https://dev.devv.jobs/sign/in), so it's just signup page that needs to be added. Let me create separate issue for it, so it can be done in parallel if anyone wants to pick it up.

By the way, did you ever think about the items in the menu? Don't really know what to place there, if anything really.

If we are talking about top menu, then we can start with link to login and signup for now. We can figure out more links later.

[ivan-kolmychek-devv]

@nocategory I have created an issue for signup page, #36.

[tetiana-kolmychek-devv]

Issue #36 have been implemented and deployed to development, now I beleive nothing is blocking this issue from being implemented. :)

[ivan-kolmychek-devv]

As we should start adding attributions soon, I've created a task for page for attributions - #51.