Bitcoin.org: Implement Version 3 Across Subpages

Created on 9 Feb 2018 · 53Comments · Source: bitcoin-dot-org/Bitcoin.org

2081

@natiwa

Let's use this issue to post the InVision comps as we work through each of the subpages (#2138). If there are any potential site-wide changes to the design that would be affecting all pages, let's discuss those in (#2081).

Design

Source

wbnns

All 53 comments

Getting started wireframe 1: https://invis.io/2KFTP10TZ93#/279029567_Bitcoin-org__-_getting_Started
Getting started wireframe 2: https://invis.io/68FTP1H5ZVS#/279029566_Bitcoin-org__-_getting_Started_Ver_2

natiwa on 13 Feb 2018

The second wireframe looks great, a lot more easier to follow.

Cobra-Bitcoin on 13 Feb 2018

@natiwa

I agree w/ @Cobra-Bitcoin - version 2 looks great. Can you please go ahead and transform the wireframe into the actual design? Let's see it on desktop, tablet and mobile.

(Side note to @Cobra-Bitcoin - agreed, we don't need to do tablet and mobile compositions on every subpage, and only mobile ones in some cases - but we should do all of them on the first few to start - the most visited pages - so we have examples to reference/emulate when it comes time for development. It will save time and money by reducing room for error and/or revision due to subjective interpretation).

wbnns on 13 Feb 2018

Please take a look at this:

Desktop, Tablet, Mobile

natiwa on 13 Feb 2018

@natiwa

Nice work, thanks. I left a few comments regarding the navbar and the jagged-edge effect. Could you please revise so we can see the result?

wbnns on 14 Feb 2018

Links have been updated.

natiwa on 14 Feb 2018

Choose your Bictoin wallet - wireframe
Wallet preview - wireframe ver 1
Wallet preview - wireframe ver 2

natiwa on 14 Feb 2018

How to buy Bitcoin

natiwa on 14 Feb 2018

Bitcoin exchange

natiwa on 14 Feb 2018

Those wireframes look good, I prefer the first version of the wallet preview, looks a lot more interactive and cool.

Let's get these implemented and quickly knock them out. In the "Choose your wallet" page could we have each wallet listing in their own box with a white or subtle drop shadow effect and a little spacing between the boxes? Similar to how the wallets were listed on the homepage in version 2, it looked really nice.

Cobra-Bitcoin on 15 Feb 2018

I slightly prefer the flow down over the flow up (i.e. ver 1 over ver 2).

At this stage, is a new "choosing tool" open for consideration? I'm thinking of something that might show scoring (perhaps only the color) for the subset of wallets you have selected. Right now I fear we make new users look at every wallet in isolation and then try to come up with a choice.

crwatkins on 15 Feb 2018

@natiwa

Please go ahead and continue with the other wireframes from the spreadsheet and post them here. Let's review what's been done so far during our progress meeting tomorrow (hopefully you're feeling better by then! 🙂).

wbnns on 16 Feb 2018

Hi all,

@wbnns I have a big favor to you. Can we please move our weekly meeting to Monday (the same time). I'm afraid I caught the flu or something like that and I don't feel well enough for a call. I have a plan to work whole Sunday to catch up with work.

Best,
N

natiwa on 16 Feb 2018

@natiwa No problem, I hope you feel better! Have a nice weekend and talk to you on Monday.

wbnns on 16 Feb 2018

@Cobra-Bitcoin Yes, we can do a drop shadow for those boxes, but Balsamiq not allows me to do that so I will add it in Sketch directly.

How to buy Bitcoin - new versions:
ver 2.
-> In my opinion, it looks nice and works for Spending Bitcoin, but can't be used as a template for other similar layouts like Some things you need to know... We should have another layout for that.

ver 3.
-> ...Otherwise, we should keep it simple and do it as a template for other screens. I'm afraid there is no way to make this screen fancy and useable at once.
Let me know your thoughts.

For Individuals, For Business, For Developers
We can proceed with two the same layouts as I prepared for "How to buy Bitcoin" subpage, but on the "Bitcoin for Businesses" subpage, the number of elements is odd and we will have the same problem as in version 1 of How to buy Bitcoin. Let me know your thoughts.

How does Bitcoin work?

FAQ

Secure Your Wallet

I'll continue tomorrow :)

natiwa on 18 Feb 2018

@natiwa

I hope you're feeling better! Thanks for continuing to work through this. Please keep going and let's review everything during our progress meeting tomorrow.

wbnns on 19 Feb 2018

Running A Full Node

Bitcoin Core

Blog

Bitcoin Paper

Network status and alerts After I came with the idea for a layout for Alerts subpage, I came to the conclusion that we could youse the same layout for Blog as well.

Bitcoin Resources

About bitcoin.org

natiwa on 19 Feb 2018

👏 👏 👏

wbnns on 19 Feb 2018

😄1

Please remember that some of the layouts will be the same or at least very similar.

Spreadsheet with templates

natiwa on 19 Feb 2018

@wbnns I don't see your comments here
Bitcoin.org Subpages Outline for Redesign

natiwa on 19 Feb 2018

Innovation I think we can use layout This or This for that subpage.

Developer Reference very similar to Link

Support Bitcoin I think we can use layout This or This for that subpage.

Development I think we can also use that template Link

Developer Examples and Legal again we can use that template Link

Protect Your Privacy I would suggest using that layout

Press I would use layout from FAQ

NEW WIREFRAMES:

Events

Developer Glossary

Glossary subpage

Download Bitcoin Core and I've changed a bit the layout for Bitcoin Core

Developer Documentation

Things You Need to Know

natiwa on 20 Feb 2018

I've tried to improve the spreadsheet. I added the new columns to put the preview links there:

Wireframe Desktop
Wireframe Mobile
Design Desktop
Design Tablet
Design Mobile

natiwa on 20 Feb 2018

Great work!

With the download page though (https://invis.io/YFFY1QADVRB#/280387786_Bitcoin-org__-_Download_Bitcoin_Core), I think it would look much nicer if we kept the download buttons in the center so they're the main focus, instead of pushing them to the left and having the text be noticed first.

Cobra-Bitcoin on 20 Feb 2018

I agree with small but... :)
If we move button to the center the layout won't be consistent with the "Bitcoin Core" subpage. That could be confusing for the users.

natiwa on 20 Feb 2018

Choose Your Wallet on Mobile. Two versions:

Version 1 (3 previews) and Version 2 (5 previews)

natiwa on 21 Feb 2018

Personally, I'm much more keen on version 2. Has a very smooth and interactive feeling which makes it simple to use.

I think in the next few days we should get started on the actual designs for more pages. We've only seen the getting started page, but now it looks like the wallet pages at least are ready to proceed to design. The quicker we start knocking out the designs, the better.

Cobra-Bitcoin on 21 Feb 2018

For all similar to Secure Your Wallet I have prepared the: Mobile version. I was thinking about solution like this: Link or Link or Link

Bitcoin Core Mobile

natiwa on 21 Feb 2018

@Cobra-Bitcoin Yes, of course. I prefer version 2 as well. I think I will finish all important mobile wireframes today, and I will be able to start designing form tomorrow.

natiwa on 21 Feb 2018

Last screens:

Alerts

Developer Documentation

natiwa on 21 Feb 2018

@natiwa

Awesome work. Thanks for doing the taking the mobile considerations into mind that we discussed the other day. This is all great stuff. I also like Version 2 that @Cobra-Bitcoin mentioned.

I appreciate you working hard to wrap up the rest of the wireframes like we discussed. Please go for it and be aggressive on knocking out the designs that correspond to them, now that they're finished. Will look forward to connecting again for our next progress review session on Friday!

wbnns on 22 Feb 2018

Thank you @wbnns

Designs:
How to buy Bitcoin

Choose your wallet Desktop
Choose your wallet Tablet
Choose your wallet - mobile - step 1
Choose your wallet - mobile - step 2
Choose your wallet - mobile - step 3

Template 2

natiwa on 22 Feb 2018

👍1

Do we want to show scoring (perhaps only the color) for the subset of wallets you have selected? Right now I fear we make new users look at every wallet in isolation and then try to come up with a choice.

crwatkins on 22 Feb 2018

@natiwa

You're welcome. Regarding our meeting tomorrow at 15:00 UTC, I have something that has come up and need to reschedule. I can meet later tomorrow, or if OK with you all, let's do Monday at 15:00 UTC like we did this week.

Please keep going with the additional designs, I'll post comments on the InVision comps as you go!

wbnns on 23 Feb 2018

Choose your wallet - mobile - step 4

Wallet page

Bitcoin Exchanges

Secure Your Wallet

Buy Bitcoin

Template for: For Individuals, For Business, For Developers

Alerts

natiwa on 23 Feb 2018

Let's do our call on Monday. :)

natiwa on 23 Feb 2018

👍1

@natiwa Great work. I've gone through and left comments on what you've done so far. Let's keep pushing to finish these. I think we can start looking to begin implementing these designs, soon, perhaps later this week. Talk to you tomorrow at our progress meeting.

wbnns on 26 Feb 2018

@wbnns Thanks. I have also left my replies.

Please check the new solution for the Wallet page.
Wallet page new solution
Wallet page new solution - navigation

Improved Choose your wallet - mobile - step 4

natiwa on 26 Feb 2018

@natiwa The top navigation looks really clean and great, nice work. Absolutely love it.

What will happen to this page then https://projects.invisionapp.com/share/98FZRHO2SVU#/screens/280919158_Bitcoin-org_-_Choose_Your_Wallet_-Desktop? Will it include the new navigation (though obviously with operating system/wallet sections greyed out as necessary), or do you think it's better if the navigation only appears when inside a wallet? I like the idea of it always being there, just so the user can better visualize the step-by-step "flow".

Cobra-Bitcoin on 26 Feb 2018

@Cobra-Bitcoin I was thinking to do that navigation only inside the wallet page. But I'm open to any suggestions.

https://projects.invisionapp.com/share/98FZRHO2SVU#/screens/280919158_Bitcoin-org_-_Choose_Your_Wallet_-Desktop That page looks clear as a first screen of selecting wallet. The purpose of the new navigation is only to help navigate between wallets without the necessity of going back.

natiwa on 26 Feb 2018

I'm OK with it only appearing when inside the wallet page.

Could you update this spreadsheet more often? Makes it easy for me to keep track of progress with one glance. Agreed with @wbnns that we should start looking to implement soon.

Cobra-Bitcoin on 26 Feb 2018

Yes, sorry. I will do it now.

natiwa on 26 Feb 2018

Resources

Developer Examples

natiwa on 26 Feb 2018

Bitcoin Core

natiwa on 26 Feb 2018

Bitcoin Core - Mobile

Download Bitcoin Core

Events

Bitcoin Paper

Secure your wallet Mobile View 1
Secure your wallet Mobile View 2
Secure your wallet Mobile View 3

Developer glossary

Glossary Subpage

Developer Documentation
Developer Documentation Mobile

Improvements:

Bitcoin Exchanges
Alerts
Developer Examples

natiwa on 27 Feb 2018

@natiwa Awesome, thanks - is the spreadsheet updated with everything to date? Also, could you please share the Sketch files as discussed, either via Google Drive or Dropbox?

wbnns on 28 Feb 2018

Hey all,

@wbnns We still working on some screens. I'll send you a sketch file a little bit later today.
Which spreadsheet? Do you mean time reports or the "Bitcoin.org Subpages by layout types" ?

Before my vacations we won't finish:

all of the icons (some of the screens would have empty space for icons)
all of the illustrations for subpages: Protect your privacy, How it works, Things You Need to Know

Our second designer will work on them during my absence.

natiwa on 28 Feb 2018

@natiwa Ok, thanks for the update and also for sending the files. Could you please update both spreadsheets (time reports and layout types) before you go?

wbnns on 28 Feb 2018

Of course.

natiwa on 28 Feb 2018

Last screens:
Things you need to know
How does Bitcoin work
Protect your privacy
Press Centre
Blog/Alert subpage
Innovation
Blog
About us