By Carl Heaton

Crypto and blockchain is huge, exciting, worrying, ever-changing, and just about every other adjective under the Sun. As a designer, you are probably here looking for some crypto website insertion and you’re in the right place.

Just a quick note, I just updated this article with a few sites that are not so well designed to give you an idea of what to avoid.

I put this list together to help highlight 7 key inspiration points for each of the sites. Use these when you are designing your own websites to make sure you hit all the right points.

  • WWW (who we are, what we do, what do next)
  • First impressions
  • Content
  • Call to actions
  • Interactivity
  • Responsive
  • Good, the bad the ugly

So, let’s going!

Table of results

Scroll to see the scores:

1. Minimal, modern-looking Crypto Site Design with good use of parallax movement with https://saltlending.com/

The branding is clearly fresh and modern. The use of colors is consistent with trust, professionalism, and with a hint of playful cyan that really sticks out. Typography is strong and clear with the headings but the body text I feel is weak.

What would I copy?

Certainly their use of backgrounds and layering. How they add the odd smattering of “salt and pepper” is nice.

Crypto Design Salt

SALT was founded in 2016 by a group of Bitcoin enthusiasts who aimed to prove that people didn’t need to compromise their lifestyle or forego their needs in order to pursue a long term outlook on cryptocurrency.

It has some nice reviews on the AppStore, all 12 are five stars.reviews on app store

WWW (who we are, what we do, what do next)

7 out of 10 – as their heading is super clear but it evokes a lot of questions. It says what they do but not in enough detail to really pull me down the page. The call to action is too direct as I would have more questions than intentions at this point.

First impressions

8.5 out of 10 – I love it, personally. The design is fresh, interesting and breaks up the monotony of the page well. There are lots of nice little elements and scroll and fade in effects that keep the page interesting.

Content

6 out 10 – hugely bias to the features of what they offer. This is good for people who respond to that but there is little to no social proof of indication of how their service helps real people. I think this site is targeted to people who really know this product and are comparing rather than discovering.

Call to actions

7 out of 10 – again their CTA’s are based on you already making a decision. There is little in the way of flowing to more information and 0 in the way of “contact us with any questions.”

Interactivity

7 out 10 – the site breaks up the page with some subtle but nice parallax effects with most of the sections. There are no “interactive” per se sections which is why I give it a 7 out of 10. Would have been nice to have some sort of loan calculator to play with.
Responsive Test on App

Responsive

6 out of 10 – The site loads well at the top but you can scroll quite far to the right and lose the content all together i.e the site breaks on mobile. Nice but nothing special.

The good, the bad, the ugly

Load time, branding, and subtle parallax effects are good, too feature heavy content is bad and the ugly is how the site loads on mobile.

2. Dark, minimal, center-aligned with strong Gothic Typography: https://mythical.games/

Moody! Typography is strong! Mysterious. They all hit you right away on this page. It breaks the normal mold but it works!

The clear paragraph on what they do is super clear and the slab face font just brings you in.

The “Blank” image is interesting and I want to know more. I just don’t know why.

In the end, you are left wondering what just happened but it’s an interesting feeling rather than disappointing.

What would I copy? The fonts (Titling Gothic Wide by Front Bureau) oh they are nice, the dark background and pure whites give the big font its punch.

mythical games website

WWW (who we are, what we do, what do next)

3 out 10 – Who they are: clear, they say it right away, what they do: not so clear at all and what to do next is missing.

First impressions

6 out of 10 – I like it. There are a mood and tone to this site and that is hard to achieve. However, I am not clear on what they are and do so I am just perving on the fonts.

Content

5 out 10 – It would be nice to have more content, descriptions, articles, and even a video. It makes the entire site feel like a “coming soon” kind of deal. We know it’s something to do with the world of Crypto but it’s not clear and thus not exciting.

Call to actions

3 out 10 – Some nice text links but that are it and they are easily missed. There are no call to actions to join waiting lists or find out more.

Interactivity

1 out 10 – there are no interactive elements on this page. They get 1 point for the final contact form 😂 Hugely missed opportunity here as they make games!

Responsive

7 out 10 – Oh, this is nice on mobile. Loaded almost instantly and, as you move down, the design fits so nicely. There is a nice carousel to stop it from being too long and it’s a lovely experience.

The good, the bad the ugly

The good is the overall feel and the typography is fantastic. A coming soon pages go it’s quite bad in that there is little to no content to know what they do.

3. High converting landing page style homepage: https://www.gemini.com/

Did they read my blog on CRO? This website could not be more clear on the three WWW’s if it tried. Above the fold, we have just about everything! We have a nice logo of who they are, a great statement of what they do, and four clear call to actions to move me through their story.

Very nice! Let’s look deeper.

I love the sticky bottom banner showing the recent BTCSD, ETHUSD prices.

Each section is well placed, contains interesting info and a call to action for you to find out more. I also like how the screenshots are screen videos and show a user using their app. But when we look under this clean design we find something not so clean (see below). But hey, we are here for the design, not the app, right?

Gemini Reviews

What people are saying about this

 

WWW (who we are, what we do, what do next)

9 out of 10 – the only reason it’s not a 10 is there needs to be an explainer video and some social proof above the fold.

First impressions

8 out of 10 – super clean, interesting design, great use of images and copy. Instantly look trustworthy.

Content

7 out 10 – an explainer contextual video would be nice to get us to an 8. The content itself is great, easy to read, and clear. It’s not too wordy and features always come with benefits.

Call to actions

7.6 out 10 – well placed, clear, and easy to spot. The only issue is that there is no “talk to someone”, the site is assuming you want to move forward instead of exploring around a little more and asking some questions.

Interactivity

b – If you can interact by “watching” something then they get a 4, however, there is nothing really moving or interactive on the page. It would be nice to have some hover states, on-scroll loading animations, and something to play with.

Responsive

6 out 10 – overall it is nice but there are a lot of things in the way of the actual viewable content. There is a huge cookies banner, then a stick banner to install the app, and then the top nav is also sticky, so you’re down to 60% visibility right off the bat. Text size and imagery works well within the tiny viewable area though.

The good, the bad, the ugly

The clean design, copy, and clear call to actions are good. The lack of people and contextual real-life stories to hook into is bad and the ugly is the lack of visible real-estate on the mobile version.

Web Design Essentials Ad

WEB DESIGN ESSENTIALS

Learn more about our stellar industry focused course for beginners.
Choose the best schedule
to study ONLINE or at the school.

VIEW COURSE

4. Soft clean design with nice use of iconography: https://www.circle.com/en/

Ahhhh, this feels nice.

The colors are fantastic. Typography is stunning and it’s super clear what the site is all about from the first load.

The simplicity of this design is also its downfall. There is not one face on here to latch a story to. There are just a few simple diagrams and you don’t actually know what you’re signing up for (in a physical sense)

Iconography is very nicely used throughout the site and this is the one saving grace of no screenshots or examples of what you’re buying into.

User Surfing Circle website

The new financial account for global businesses

WWW (who we are, what we do, what do next)

7 out 10 – Clear logo, introduction hero message is super clear also. I do like how they take the time to explain what they do in a sub-paragraph below the main header. The call to actions are well chosen for the “what to do next”.

First impressions

8 then down to 6 out of 10 – This is an interesting one. At first glance, the design is lovely, smooth, excellently chosen colors and typography. However when you start to read and try to understand there is a complete lack of context.

Content

7 out of 10 – great, lots of just text though. I would like to see some deeper style content. On the service pages e.g. there are some nice animations:
Method acceptance text

Call to actions

7 out 10 – I would like to see more cta’s asking me to talk to someone or is based on the typical questions user may have. I found the service page call to actions quite miss-able on the homepage as they are just represented by small arrows. Still [GET STARTED] is a nice strong call to action throughout the design.

Interactivity

6 out of 10 – I do like the animations but there is nothing responding to hovers or scroll actions.

Responsive

6 out 10 – It’s okay, it’s just a simple refactor of the main designs so it loses that special spacious feel as with the desktop. I would have liked to see more of a mobile-optimized feel to the responsive version.
Circle Mobile responsivess

The good, the bad, the ugly

The colors, spacing, and typography are great, not good. The lack of real people and context is bad. And ugly? Nothing, to be honest. This is a lovely site and enjoyed reviewing it.

5. Isometric illustrations tell a nice story to this clean design: https://www.chronicled.com

This site is stunning but…

I have to be honest here, I do not know what this means “Automating transactions between trading partners in the Life Sciences Industry through the MediLedger Network” but I assume if you are in the know you know.

The typography, colors and isometric custom illustrations bring you immediately into the design.

The tab system is nice and clear, below the fold, and gives the user an opportunity to interact with the section that resonates with them most.

So let’s audit this! keep reading…

User checking out Chronicled website

Chronicled is the custodian of the MediLedger Network, blockchain-powered network within the life sciences industry.

WWW (who we are, what we do, what do next)

7 out of 10: Lovely logo, the clear type that sticks out with nice navigation. The main header is super clear and the explanatory sub-paragraph backs it up well. My only note here is that is a CTA missing from the area just above or directly below the isometric drawing.

First impressions

7 out of 10 – Clean feel from the use of color, space, and clear fonts. The isometric images are amazing and if they animated, ohh boy! Below the fold, the design starts to fall off and into a typical grid layout but the drawings save the day.

Content

7 out of 10 -The content on this homepage does the job it supports to do; get you off the homepage as soon as possible. Quick short sentences give you the impetus to click to find out more. I like how their content is to the point and very descriptive.

Also, all their features are immediately backed up with benefits e.g. “Ensure your business rules are enforced for data and transactions you receive from trading partners, fixing mistakes at the source.”

Call to actions

6 out of 10 – Lots and lots and they are clear. I would honestly add more padding to them to make them stand out more. I would also add some secondary and even tertiary version to break them up a little as they do blend in eventually the more you scroll.

I do like how they have their blog at the end, this is a nice easy last-ditch call to action that everyone should do on their home and sales pages.

Interactivity

4 out of 10 – Ohh it would be nice if they animated their isometric example drawings, but we can’t have everything. There are some tabs but nothing fades in to grab your attention as you scroll. It’s pretty much standard once you get past the top section.

Responsive

4 out of 10 – I think this is where I feel a little letdown. The text is squashed, small, and hard to read. The line heights are whack and they do not adapt the illustration in any other way than making them smaller.
Chroniacaled responsive testI feel there are huge spaces as things are not quite tidied up on the mobile version. take this image as a good example.
Chronical mobile test

Good, the bad the ugly

The good is definitely the custom isometric drawings, there is no bad but the mobile does look ugly in places.

6. An example of a badly designed Crypto website: https://voatz.com/

Lazy typography, no brand, unclear all to actions, massive gaps in the images, boring images, unclear purpose, no context to awards, and a pointless cookies message. The use of shadows looks like there is a 1000W halogen bulb shining down on the design. More unnatural space below every section.

Their video explainer is packed with cheap stock videos literally say nothing of how.

Then more 200++ amount of white space before a tiny title and even smaller screenshot that is unreadable.

Apart from this, it’s great!
Voatz on a macbook
Voatz on a mobile

WWW (who we are, what we do, what do next)

2 out of 10: No structure, no call to actions, no explainer to say what they do, and a terribly boring screenshot on an old phone. Not clear what they do or who they do it. I didn’t even want to scroll but I promised myself I would give you a bad example 😂

First impressions

1 out of 10: Boring, B2B, cheap, untrustworthy, lazy design, and a great example of what to use for my article under “don’t do this”.

 Content

1 out of 10: “We leverage cutting-edge technology” this tells you everything. Also, the video is terrible and I would honestly not trust this site at all as it seems so generic that it’s a site put together with another purpose.

Even the screenshots are unreadable. I understand that they have sensitive information but they could at least add test data.

Call to actions

1 out of 10: I am not sure the designers know what they are. On the entire site, not including the nav, there are two [View all] and [Contact us] right far down the page. I believe it’s best to add a call to action at each stage of the story, they missed out on this completely.

Interactivity

2 out of 10: Type “a synonym for missing” in Google and you will get my answer: Nothing, nadda, zilch, missing, away, lost, removed, disappeared, lacking. mislaid, misplaced, omitted, responsive, etc

Responsive

2 out of 5: Mostly unreadable on mobile but the headings look ok

The good, the bad, the ugly

The font’s quite clear, the colors, design, images, content, and page flow are bad and the overall feel on mobile is darn right ugly.

UX/UI Essentials Ad

UX & UI DESIGN ESSENTIALS

Learn more about our industry focused course.
Choose the best schedule
to study ONLINE or at school.

VIEW COURSE

7. Another not great design that has a lot of holes and a missing unity to the design: https://doc.ai/  

Err, it’s okay.

The first glance is okay, it’s clean (lots of white space) it’s colorful (overuse of their brand color) and their content is about them.

It’s a site that lacks love, that lacks a sense of urgency, context, and impetus.

It looks like an example site you would download with a Bootstrap template.

Doc ai desing on a computer

Launched in 2016, doc.ai is a Palo Alto-based artificial intelligence company for a new age of healthcare.

WWW (who we are, what we do, what do next)

4 out of 10: Doc.ai = does not say much to me but it’s their name, “We accelerate digital transformation in healthcare.” good for you 🙂 How about how you help me? and no call to action so I am sure a lot of users would not scroll down. There is a chat-bot that pops up, which is nice(ish).

First impressions

5 out of 10: It’s okay, it looks like a typical friendly B2B site with some clear screenshots in the background. The overlaid gradients break up the pictures and add them to the brand color scheme.

The images are nice, the text is clear and bold but the whole experience is blocky and there is no story down the page. e.g.”Drive engagement through personalized healthcare experiences.” …. it leaves you asking “how”, or “can I find it more” and there is nothing other than an avatar in a phone illustration.

Content

6.5 out of 10: it is very dry, no mentioning of the readers’ challenges, no social proof, and very little in the way of things to get me to move through their customer journey.

Now the subpages are much nicer e.g. https://doc.ai/digital-clinical-trial-myasthenia-gravis-mg-research they have a story, call to actions, more information, clear benefits, and a host of examples. Personally, I would move some of the great content into the home as well as the sub-pages.

A video! Give me something to watch and explain why your company is the best.

Call to Action

5 out of 10: They are there, but they don’t jump out at me. I feel the four sections are clear but their call to actions are not and you can only click to the next page if you click directly on “Learn more”. To improve usability make the entire panel clickable
Doc ai improvement idea to make the panels clickable

Interactivity

2 out of 10: none, nothing, nodda. Not even a fade-in. The subpages have some animated/ video screenshots within a phone tho 🙂

Responsive

6 out of 10: Due to the blocky nature of the site it’s okay, however on load there is no clear place to go as the header has no call to action.
The site is fully responsive and the text is okay, a little small on mobile, bit okay.

The good, the bad, the ugly

Good clean feel, nice colors, and fonts. The bad is lack of story, clear call to action, and that they have some nice sub-pages but the homepage is lacking. Nothing ugly about this project thankfully.

8. Deep blue, strong branding, and good user-centric content: https://steem.com/

Ohh this is a nice one! Lots of little interactive elements on the page, a clear story, lovely branding but just one small thing that lets them down! SVG guys come on! The site is filled with SVG opportunities but there are just PNG’s “up the yin yang” (ref: https://idioms.thefreedictionary.com/up+the+yin-yang)

The content is clear, I want to find out more and if there was just a cool explainer video I would be super happy.

Let’s dive deeper.
Steem being used on an iPad

WWW (who we are, what we do, what do next)

7 out of 10: Who we are: clear and obvious.

What they do “Steem is a social blockchain that grows communities and makes immediate revenue streams possible for users by rewarding them for sharing content.” spot on!

What do next: oh yes nice call to action

First impressions

7.5 out of 10: Super clear, strong color scheme, easy to read the text, and the content is broken up nicely enough for me to want to read it.

Nice sections using a different style of layout, design, and focus. This breaks up the page and brings me down to read more. I especially love the animated examples of the different “steem processes”

Content

8 out of 10: it’s really good. The headings are clear, lovely use of images and animation, and each row is unique and interesting. My only concern is how big the header is as some people may not know to scroll down for the content.

Icons + title + feature + benefit is really well done throughout this design.

Call to actions

7 out of 10: lots of call to actions that are relevant but there is room for more. Not of the same CTA but to bring users further into the details on a section by section basis e.g. “Welcome to the next generation of blockchain technology” this section could have a nice CTA to learn more about the technical side of things.

It is a shame that the one part with a cool illustration and interactivity has a cta just leading to PDF so that’s why we’re below 8 on this 😎

Interactivity

7 out of 10: Finally we have some! This is one of the first in this article we have found to have something interactive. Even though it’s just a simple on-scroll action it still give meaning to the information and attracts the eye.

Responsive

6.5 out of 10: yeah it’s nice, the text is clear, colors come through really nice but it’s a shame the animations don’t animate anymore (why I took the score down to 6.5).

The good, the bad, the ugly

Good is the design, overall feel, and animations. The bad is the lack of decent subpages and the ugly is the PDF link and link to external websites on their homepage.

9. super clean, basic call to actions, big, wallet technologies – https://www.bitgo.com/

Like fresh linen on a new mattress in a freshly built house.

The site shows its authority, maturity, and experience right away. This is a site I trust from the get-go. The simple design is matched with the beautifully complex image in the background. The “trusted by” logos fade in and out with prowess and the very smooth carousel shows the latest in stocks.

The first scroll reveals what they do and in beautiful simplicity. The sub-pages are elegant and look like their own homepage.

In the news at the bottom and a nice deep impressive footer making everything easy to find.

I like this site!

Bitgo Website preview

No matter what exchanges, OTC desks, or brokers you use for trade or what custodial services or wallets you use for custody, BitGo ingests and resolves your present and historical transactions automatically to unlock holistic views across performance, positions, and tax.

WWW (who we are, what we do, what do next)

8.5 out of 10: Oh it hits the mark! I would say with something integrative and eye-catching in the hero section we could hit a 9.

First impressions

8.5 out of 10: Super trustworthy, tight design, no dead space, lots of interesting sections, great use of layout and I would steal a lot of how they break things up e.g. “Support for the providers you already use” section is a great way to show a lot of content.

Content

8 out of 5: Each section mentions a challenge, how they solve it, and the kind of result you can expect…a micro hero’s journey! Yes ladies and gents their content is very well written and interesting.

Subpages give more detail and use some lovely real imagery that connects you to the people behind the site e.g. https://www.bitgo.com/services/prime/prime-trading (img ref)

Call to actions

8out o 10: There are call to actions for each of the sections, each type of “institutional digital asset platform” has its own landing page and it’s super clear. Every sub-page goes has a news section at the bottom and it looks really nice. Did I mention how fast this site is! The load time is amazing.
Pingdom Speed test

Interactivity

7 out of 10: Each section on the homepage has a little animation and they are super smooth. No 12 fps on this site, they are all 30fps or more.

The way they have used interactivity shows class and style and this is what makes the site great. It is not shouty, it’s not overly bold and it is not writing corporate bs for the sake of filling the page. It genuinely looks like they have a lot to say and say it well they do through content, images, and interactivity.

Responsive

5 out of 10: Yikes! This is hard to read and certainly would not pass any accessibility test. Everything is tiny and with the Grey text it’s even harder. Fail.

The good, the bad, the ugly

The overall content, design, and animations are nice the Bad and Ugly come into play in mobile.

10. Hyper ledger – https://www.hyperledger.org/ “Asset distribution” old, messy, unclean, not balanced

Boring cookie cutter design that looks like it was done by a junior designer. The typography is all over the place and everything is fuzzy as there is not a SVG in sight.

Blocks and blocks of text, the video is okay but the way they slap it in the UI with a terribly optimized image is not a great pull to play.
hyperledger site

WWW (who we are, what we do, what do next)

4 out of 10: There is a notifications bar that I totally missed, then there is an unknown black bar with a logo and finally we have the logo. So already the top 100px are too busy. Then the hero image shows the same logo just bigger and even fuzzier

The call to actions are clear but inside super boring buttons that don’t fit and are so, well, so square and pointy. A real lack of attention to detail.

First impressions

3 out of 10: It makes me feel not great, just blah, sorry. There are 6 different fonts and 8 different sizes in the first fold alone. Really unimpressive and lacking a quality of design I would have expected from Hyperledger.

Content

3 out of 10: Words ok, words good, content ok. But now it’s displayed really shows this as a cheap design. The content seems well written as it is clear but no story at all.

Call to actions

3 out of 10: Typical and really look like they didn’t change the default settings on a Bootstrap boilerplate template.

Interactivity

2 out of 10: Nothing other than a video.

 Responsive

3 out of 10: top notifications panel is broken and under the main nav. The search is quite nice on mobile and the navigation is clearly Foundation CSS off-canvas template, so no love has gone into changing it. The news section text is unreadable as they use such a “light” version of Monserrat that i’s falls into the background. Not great at all!

The good, the bad, the ugly

Hyperledger as a company has a lot going for it but whoever they hired to do this site really let them down. Maybe they are re-designing and this is a site that they started with. To be honest I prefer the version they had back in Feb of 2019! https://web.archive.org/web/20190207103701/https://www.hyperledger.org/

Mining – https://peernova.com/ – simple, clean, great use of color, tells a story, bottom call to actions, nice custom designs for each page

Last one! We made it dear reader. Well done.

The site is super clean, feature, and benefit-driven and I love all the little “salt and pepper” background images they are using.

The feel of the site is really nice, the illustrations are impactful and I get hyped up reading their content e.g. “Make better, faster, and more insightful business decisions with the Cuneiform Platform”

Peernova on a mobile phone

Empowering financial institutions to unlock data, increase efficiency, and discover opportunities

WWW (who we are, what we do, what do next)

7 out of 10: “Empowering financial institutions to unlock data, increase efficiency, and discover opportunities” oh that is a nice heading with a clear logo and ( Let’s Talk ) just in the right place. There is an a-okay screenshot within the Z reading pattern and all is good in the world of Peernova.

First impressions

7 out of 10: The first impression is “what a lovely template” but still their custom content shines through the more you scroll. A decent level of design went into this and I’m brought down the page well. Subpages are really nice but their about page pictures scare me! Especially Gangesh who’s got an amazingly flexible neck.
Peernova Leadership Team

Content

7 out of 10: Lovely custom designs, super nice clear copywriting, and a clear feature + benefit panels.

Call to actions

7 out of 10: Great and I do love the white paper download (for lead gen) which is nicely connected to Hub Spot. So they know their content marketing and it shows.

Interactivity

3 out of 10: Aww what a shame nothing really moves or invites me to take part.

Responsive

7 out of 10: Nice but but but! The body copy is way too small and tough to read. Again when having grey text on grey / white backgrounds it does not stand out on mobile enough and you can see that mobile was an afterthought here.

Good, the bad the ugly

Good is the overall design and content, the bad is the mobile version and the ugly is the scary image of the CEO on the about page.

Summary, how to design a great crypto website

There you go ladies and gents 10 Crypto websites. So let’s look at the key takeaways you can use in your own designs:

  1. For the header make sure you give a clear description of what you do in one sentence and include a screenshot, or better still a video, to give it context.
  2. Use SVG’s for all your computer-generated images so they look crisp.
  3. Use animation effects on each section so you invite the eye to look down.
  4. For copy always put feature + benefit, the benefit being how it helps the user, not you.
  5. Have something that invites the user to click, select, open, drag, or whatever, this invites them into what you do. Crypto is very techy so show this off by having an interactive website.
  6. Strong clear fonts and colors need to match your brand. Make sure they come across on mobile and super easy to read.
  7. When you mention a service have a call to action to find out more and hopefully they will land on a nice landing page.
  8. Put lots of social proof where you can and use real images of real people in real situations where you can. Show the people behind the technology.

NEW

WEB DESIGN PROFESSIONAL

Learn more about our industry focused course
Choose the best schedule

VIEW COURSE

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.