search

prysmaticlabs / website

Prysmatic Labs static site
http://prysmaticlabs.com/
6 stars 9 forks source link

Website Revamp #24

Closed prestonvanloon closed 5 years ago

prestonvanloon commented 5 years ago

We're looking for a significant improvement to our website. http://prysmaticlabs.com This design was originally created by @rauljordan with the immediate goal of have some page to land on. Then the site was revamped to use React framework by @julientregoat.

Goals / Requirements:

Please submit your design for approval before starting work on the code.

Thanks!!

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 1000.0 DAI (1000.0 USD @ $1.0/DAI) attached to it as part of the Ethereum Community Fund via ECF Web 3.0 Infrastructure Fund fund.

mkosowsk commented 5 years ago

A note for Gitcoin applicants: this bounty is for a fully-spec'ed design and implementation of a new website for Prysmatic labs.

This is an approval-required bounty. As a first step, please post your portfolio so we know you have design chops.

Happy bounty hunting!

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 6 months, 3 weeks from now. Please review their action plans below:

1) blokboy has applied to start work _(Funders only: approve worker | reject worker)_.

My process for design is actually pretty personal and organic because I feel that's the best way to deliver on creative projects -- communication is the most important part in delivering on good design and user experience. I'd like to sit down and talk about the requirements for the updated site and any additions that may need to be accounted for in the near future. From there, I'd like to design the websites using Adobe Suite or Wireframes to create the pages as they should look. Once designs are agreed upon, I get to work building out the site using React/TypeScript (or PropTypes), and we can make edits before finalizing the design at that point.

Places I've worked as a web developer: http://www.pureconceptions.com/ (learned most of my design skills here)

And Recent Projects using React to recreate modern UIs: Instagram - https://github.com/blokboy/React-Insta-Clone New York Times - https://github.com/blokboy/Sprint-Challenge-Lambda-Times-React

Learn more on the Gitcoin Issue Details page.

2) afiaudofia has applied to start work _(Funders only: approve worker | reject worker)_.

I have over 13years experience in UI Design, UX and frontend development using React/Angular and I'd love to work on this project. My profile link: https://www.awesomeweb.com/sirwhite

  1. I will discuss more on the concept and requirement.
  2. Then I will draft out one or two mockups with sketch to agree on layout and design.
  3. Convert the design to HTML/CSS with Bootstrap4.
  4. Integrate into Angular/React project.
  5. Test.
  6. Deploy.

Learn more on the Gitcoin Issue Details page.

3) ipalladino has applied to start work _(Funders only: approve worker | reject worker)_.

I am the Lead UI Developer and Architect of all of Splunk's Marketing websites. This includes: https://www.splunk.com https://conf.splunk.com https://splunklive.splunk.com https://usergroups.splunk.com https://www.newopsdays.org

It is simply a bad idea to not use a CMS for a Marketing website. Its a resources sink trying to build everything from scratch using Web Frameworks such as React or Angular. Save your resources for your main application and have the flexibility to roll out updates in seconds. Use a CMS and it can be even managed by just a Publisher instead of a Developer (much better cost)

My suggestion is, I'll help you build a beautiful website using Wordpress. For example: https://demo.themovation.com/stratus/home-startup/

We can work together to integrate your brand successfully into the theme.

Otherwise we can also work on baking a similar design into a very simple React app, with all of the content Hard-Coded into it. We can set it up with React+Redux and have one single JSON "default state" so its easy to update.

The steps would be: 1- Week 1 Monday - Choose from a series of Themes 2- Week 1 Tuesday - Decide between Wordpress or Standalone SPA. 3- Week 1 Tuesday - Phase 1 of implementation - Implement the first few components and navigation 4- Week 1 Friday - Phase 1 review 5- Week 2 Monday - Wednesday - Phase 2 of implementation 6- Week 2 Wednesday Final Review 7- Week 2 Wednesday -> Friday Bugfixes 8- Week 2 Friday - Website complete.

Total time: Two Weeks.

Learn more on the Gitcoin Issue Details page.

4) olafghanizadeh has applied to start work _(Funders only: approve worker | reject worker)_.

Hey guys!

I would love to work on this project! Been following Prysmatic's updates on Sharding for a while and it would be very cool to be able to take part in some more Ethereum-related work. I've already done a few bounties here on Gitcoin.

I am starting out as a freelance web developer after a longer hiatus while studying Economics.

I would suggest going for a static site generator (my fav is Hugo) so that we reduce the overhead on hosting and deployment and we can keep the whole website (including content) in a single git-repo.

Learn more on the Gitcoin Issue Details page.

5) jameshe42 has been approved to start work.

Hi I'm one of Raul's friends, James I'll be honest, this is my first time attempting to contribute to a project outside of work, but I'll give it a shot. Attack Plan: Angular 6 ( what I'm experienced in), bulma css ( didn't want to get locked into a component system so early, bulma has great layouts and takes care of most of the little things for a scalable design, take a look https://bulma.io/expo/), tailwind css for utilities ( ng-tailwindcss for angular), lodash instead of ramda for now, no state management system yet. Trying out some modern layouts with hero sections, maybe parallax scrolling, although ultimately not sure where the design will land, just going to go with using/editing content from the old website. below are screenshots of what I tested out so far. https://gyazo.com/83a5914f928b880a6bf8fa795b91a4eb https://gyazo.com/4ce9758b2109fada36879bf622c42cb1

Learn more on the Gitcoin Issue Details page.

olafghanizadeh commented 5 years ago

In addition to what I wrote in my application I would suggest keeping most content updates on Medium as you do now, and then fetch them via their API to display on the page.

mkosowsk commented 5 years ago

@jameshe42 you have been approved to start work on this bounty, please start at your earliest convenience. Thanks to everyone else who applied!

mkosowsk commented 5 years ago

Hi @jameshe42, everything coming along smoothly here? Please let me know if there's anything that comes up 👍

jameshe42 commented 5 years ago

I'll be meeting with raul tomorrow for dinner to talk about progress, because of my day job I had not spent a lot of time over the last day, but I have progressed a bit further with structuring and figuring out layout.

jameshe42 commented 5 years ago

I have been playing around with a ngx-clipboard as an addition for the donation address

jameshe42 commented 5 years ago

https://gyazo.com/7efc7cd1036a4aa95a0896721bda01f1 https://gyazo.com/d5a58a385686782ab321d579c63612e7 I love how elegant the combination of tailwind and bulma makes your designing

jameshe42 commented 5 years ago

if you guys have any image assets send it my way for like backgrounds and stuff otherwise I'll probably need to figure out what I can do for that

jameshe42 commented 5 years ago

https://gyazo.com/3d199c7ca6441a6e414994d4f33c888c

prestonvanloon commented 5 years ago

@jameshe42 all of the assets are in the repository. Is there something specific you were looking for?

Looking forward to hearing your plan & design.

Thanks

jameshe42 commented 5 years ago

got a writeout of content for the website, worked on adding parallax( though the parallaxed images haven't been designed yet), maintaining a section approach to the website ( considered other design approaches such as a brutalist for impact), still need to find a sharp font for the website ( most of them are paid for use, it's been kinda hard finding one).

jameshe42 commented 5 years ago

Listing technical specifications in a similar fashion as a product ( using wacom pen tablet display design as a reference)

jameshe42 commented 5 years ago

(confirmed)bounty design for website will closely couple the company(prysmatic labs) with the product(prysm).

mkosowsk commented 5 years ago

@jameshe42 thanks for updates! Looks like things are moving along nicely :)

jameshe42 commented 5 years ago

technical specs section mostly solidified, trying to figure out what is the best way to represent the sections for learn more, contribution, follow us, and blog/updates. i would like to group these together using cards, but I haven't found a style I like.

I haven't designed the images for the parallax backgrounds, but sites like https://root.co.za/ have inspired me to also start considering svg backgrounds for sections ( since that's the approach we are going for)

jameshe42 commented 5 years ago

cards design definitely did not work out, looks bad, going to just try columns. I need to try tiling the team members. had to find a darker ethereum foundation logo, not completely sure how to group the donor logos together yet.

my goal is to have something that is at least reviewable by the start of next week. ( i will have more time on the weekend to work on the project)

mkosowsk commented 5 years ago

Thanks for updates @jameshe42! 👍

jameshe42 commented 5 years ago

some things came up today/ and tomorrow there is an event, won't be able to work on these days, will pick up on friday.

Haven't considered design for external resources, not sure what other websites do for this.

jameshe42 commented 5 years ago

began work again, the column approach for categorizing data for blog/updates/resources seems a little squished... and the styling looks a bit old. trying to do research on what a newer approach would look like..

jameshe42 commented 5 years ago

considering free version of fontawesome as the icon library of choice

jameshe42 commented 5 years ago

Trying cards for team member introductions

jameshe42 commented 5 years ago

https://gyazo.com/650f4f7be47ec8adb1fa31d31f0eb3b4 https://gyazo.com/4068a38772cf1ff8e0fb55ed3760a365 https://gyazo.com/219e7ff129b3bb1d71a45f98b223db29

here are some progress shots, the svg backgrounds are not inserted in, still experimenting with what might look good. you can see a glimps of me testing the parallax with a placeholder background

i would like to use more icons/image assets for each section to show a nicer design, i think little info graphics or something would be nice too but it might be too much of a time sink

jameshe42 commented 5 years ago

not completely sure how the parallax works and how to make the image work well with the movement, but I'm experimenting with it

https://gyazo.com/788a19c4f6ed9361dbe5c22c62da8081

jameshe42 commented 5 years ago

please ignore design of the svg ( it's only for testing)

jameshe42 commented 5 years ago

I will be using the font awesome free icon pack angular module found here :https://www.npmjs.com/package/@fortawesome/angular-fontawesome

jameshe42 commented 5 years ago

only minimal updates in the last few days, work kicked my butt :( sorry for the excuse. I will try to get another bigger update in soon

jameshe42 commented 5 years ago

back to more substantial work, fixing profile formatting, adding in the follow us information, and svg background are the primary focus, waiting on some screenshots of the prysm and starting the formatting of the donation section

jameshe42 commented 5 years ago

https://gyazo.com/b54f7a1c2e5afe38f14b2e9aadd6690c playing around with the space theme, the website is coming together. i want to re arange the stars and maybe do something for the planet also need to get some photos of the system running for the specs section. the team section is not done but I think i know what I need to do with it. the challenging part will be the sponsors since the icons aren't the same size and they don't size the same when i save it...

jameshe42 commented 5 years ago

https://gyazo.com/697377633ecf3a82e304cb8df534a111 https://gyazo.com/29cb88673f9c93aec95999a62cbaf365

more shots

jameshe42 commented 5 years ago

https://gyazo.com/bb7d64671d35df173bf28e1746c70b29 https://gyazo.com/cee0db3e6190c411cb97a71e61ba9378

testing moon svg style the moon goes out of view as the user scrolls down

prestonvanloon commented 5 years ago

FYI, please see that Ethereum Serenity is the new nomenclature for Ethereum 2.0.

context: https://github.com/prysmaticlabs/prysm/pull/714

jameshe42 commented 5 years ago

ok updated that

jameshe42 commented 5 years ago

going on vacation for 2 weeks starting nov 16th, do i need to turn this in before then?

prestonvanloon commented 5 years ago

@jameshe42 No hard deadline. We really appreciate your effort so far and your consistent updates. Enjoy your vacation :)

jameshe42 commented 5 years ago

just a few smaller updates due to being a bit busy, i added all the social medialinks, and the photo of the team, still need to link the githubs, and write the titles of the members https://gyazo.com/8a9746b19bfc8de53483df2deb32a728

jameshe42 commented 5 years ago

just got some gifs from terence so I'll try to use some for the product section

jameshe42 commented 5 years ago

https://gyazo.com/8ca3514f6a3fd78366988b4101f3c1a8

jameshe42 commented 5 years ago

team member section updated but is a bit bland needs some styling and github links https://gyazo.com/bd030cd64fd91b85b22846addefc660d

jameshe42 commented 5 years ago

added hover effect on team members for git hub, not satisfied with the styling still will take some time to make this work

jameshe42 commented 5 years ago

taking a break for a few days ( may havve some smaller updates) please reach out to me directly for any updates you would like

gitcoinbot commented 5 years ago

@jameshe42 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

prestonvanloon commented 5 years ago

I believe @jameshe42 is on vacation. Please snooze for two weeks.

jameshe42 commented 5 years ago

thanks, will be back dec 4th. i'll see if i can just finish up the follow us section tomorrow night and continue on the team section. haven't decided what to do about the sponsors, (resizing the svgs will be a little annoying but i don't see another way ). the background is going to be updated a little more for the parallax but more or less done and good. I'll consult with the team when i get back about videos or presentations section added to the site. not sure about the extra learning material section at this time.

jameshe42 commented 5 years ago

started formatting the github links https://gyazo.com/e709568bfb8332bb708328db10d14818

gitcoinbot commented 5 years ago

@jameshe42 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

jameshe42 commented 5 years ago

back from vacation, will continue work now

jameshe42 commented 5 years ago

still trying different colors and shapes with the team section https://gyazo.com/8e9d08d4505e160a639200806af4015c this was posted on the discord yesterday.

solidifying the follow section, sponsors section, team design, footer design, and donation sections are still be done to call a basic version of the site complete

jameshe42 commented 5 years ago

just gotta spruse some stuff up over the next week or so and I'll be ready to submit for a basic website design