Making Embark more appealing

@iurimatias @PascalPrecht @jonathan @Ned the next iterations based on yesterdays feedback can be found here.

A couple of points:

  • The slate top left is the colour palette from the last sync and variations on the booster smoke and hexagon removed.
    – Then from L>R I’ve explored a few more palettes based on the muted, pastels we’d discussed and looked at refining the size and relation to the word mark.
    – Theres an option based on @PascalPrecht request to see the hexagon as a stroke and with it removed altogether.
    – The slate titled ‘No Mans Sky’ utilises a palette from @iurimatias mention, picked from this image

  • Typography is still open for debate, I’ve been using Overpass it also has a mono family.

Let me know your thoughts/opinions :slight_smile:

These look really nice @Alex - great work.

The hexagon as a stroke seems a bit too far for me. Keep in mind, we need to think how this logo can extend past simply standing on it own on a website. We need to think through variations for platforms like GitHub, Gitcoin, press releases, stickers, print, etc.

So the hexagon looks great but keep in mind all the various situations it must be able to live in. This applies for color as well. Do these color palettes lend themselves to print?

cc @Ned

My emotional impressions differ from jonny’s … i actually think the stroke is the most unique and clear design, like how the smoke forms it. It’s really like a space badge this way, reminds me of something in a space opera, a modern george jetson feeling, It really nails the aesthetic and emotional tone of playfulness and exploration that embark is about for me;

i agree with jonny that the colors arent yet there:
-for use on both light dark backgrounds, tho the colors all look great on dark bg’s.

  • i’d also like to see the logo in both positive / negative in pure black white with no color, as those versions will also be necessary in various usages both digital and in print.

Great explorations alex

Thanks @jonathan @exiledsurfer for the feedback.

Good point on the b/w versions, I’ve wrapped my head round some possible options when such a version is required for print or digital.

From a colour palette pov this is to some extent always going to be subjective. What I’ve done in the above is to see whether we can agree whether a mono, duo or tri colour way is best suited and possibly work from there? A couple of mono palettes are toward the bottom and work there way up to tri colour.

I’m aware @PascalPrecht and @iurimatias haven’t weighed in on the new iterations yet and they were both keen on the colours already set out in the initial iterations.

Hey everyone,

sorry for the late reply. @Alex I think we’re making really good progress with this, so thank you for putting this together and considering our last feedback iteration.

I have to say that it doesn’t seem to get easier though :smiley: these options look all pretty neat. A lot of my feelings about them probably boil down to personal taste and preference, so I’m not sure how much of a valid feedback that is.

Here are some thoughts:

  • In “Embark_Identity” I always seem to like the one with blue smoke and blue hexagon background in the top left slate the most
  • This however mostly on white background. On black background, the green-orangy colors seem to catch my attention the most. Not sure if it makes sense to make a decision based on that.
  • re: stroke hexagon: super happy to see that @exiledsurfer actually feels attracted to that one. I personally find that it seems to work better in b/w version. Specifically top/left slate, third row.

Shall we just make a vote here? I’ll also pass it on to the rest of the Embark team

Hey All,

Sorry fro dropping this. In reviewing the work again, I too like the hexagonal logo in b/w. I also lean more towards the darker (blue, red, white) color pallet as opposed to the green one. The green looks too similar to the green from truffle.

In terms of next steps I think we simply need to:

  • Pick a final logo. One that works well in both color and b/w
  • Land on color pallet
  • Reach out to an illustrator for 4-5 assets (website hero image, social banners, 3 x social templates)

The wireframes are in a good spot and we can work from there to create mock ups for a developer. Shall we put a bounty on design?

Content:

  • We have a wekan board that we can start to add promo content to.
  • Pascal has set up the twitter account (i quite like the handle Embarkproject)
  • Any further plan on “bursts/tutorials”?

cc @Ned @PascalPrecht @iurimatias

We now have a web designer helping us build the new Embark Website.

A few items to recap:

  • We have decided to move forward with Option 1 Color Pallet (Blue, Red, Black) but need to be mindful of legibility of a lot of text against a dark background
  • We all like logo design’s here but need to ensure it works well with the chosen color pallet above AND for print (swag)
  • Site wireframes can be found in ongoing doc here

[TODO]
@Ned - can you please put together a doc with final colors, typeography for designer Tim
@Ned - we will also need the logo finalized so we can can create the profile image across all social channels https://twitter.com/EmbarkProject)
@Ned - please send me the list of illustrators you found from dribble.
@jonathan - outreach to illustrators for Web Assets, Social Cover Assets, general social, blog assets

Also - kudos @PascalPrecht for creating the latest tutorial :slight_smile:

Yo @timhartmann!

Super excited to take a look - but I can’t! :smiley:

Can you please make it publicly available to everyone?

1 Like

Design feedback:

Overall - seems as though there was some miscommunication on color palett and logo usage. The desing from Tim leverages the red, blue, white colors seen in figma here. We also discussed using the second logo here which has a completely different color pallet (green, orange, yellow).

We need to make a call on this asap.

Design Feedback:
P1: We may want to play with the copy. Are we still going with “Embark into Ether” or do we want something more utilitarian?

P2: For each feature, can we represent it with an icon? To make it less text heavy. lets introduce a new module below this section in which we detail the CLI. We can then show the UI and provide more info.

P3: [Insters section on CLI]

P4: This should focus on specific code block. Pascal to brief Tim

P5: Lets make sure we show the Dashboard here. Instead of an illustration, lets introduce the actual UI. We can tease the features of the Command Center and drive to “Take the Tour” page (iteration 2)

P6: lets show the contributors here. The big 250+ is too large and doesnt really convey the message we want. Lets highlight the contributors. See Join | Protocol Labs

P7: Lets leave out the social proof for now. When we get some more top projects using the framework, we can add it back in. Remove this section for now

Looks amazing @timhartmann

Some general notes

  • with this color pallet and heavy use of the green, it definitely looses the “space” rocketship vibe imo. If you check out the illustration in the styleguide, the green is a prominent color but it still leverages the dark blue to indicate space. I know this is an issue for site legibility
  • More than a framework section - there seems to be a lot of empty space to present the 3 topics (smart contracts, e2e development, testing). Maybe we can test out a version were they are aligned horizontally instead of stacked on top of eachother?
  • @PascalPrecht hwo do you feel about these icons? Do they represent the topics?
  • I like the modular by design section although the color pallet here really loses the space theme.
  • CLI tool section looks nice as well. @PascalPrechtwhat copy do you want here? I feel the CTA
  • Mission control with cockpit - the colors dont work for me. I also think it would be nice to show more of the cockpit UI if possible

Footer:
we should add a column for Status Network - with links to Status, Keycard, Nimbus

Hey everybody,

I’m just going to drop my thoughts here also with regard to @jonathan’s comments:

  1. re: green color and losing space vibe: I agree. It’s good that we gave it a try though.
  2. re: more than a framework section: I had the exact same comment and I’m happy you’re feeling the same about this. Obviously it strongly depends on the illustration that will eventually end up in this section, but generally I also think that we should give horizontal boxes a spin.
  3. re: Icons: Very good point. I think these three are hardly connected to the topics they are representing. But I also think that it’s not very easy to find something that fits perfectly. We can surely fine-tune those though. For example the “Debugger” section could get an icon that’s more coding related. @timhartmann do you think there’s a chance we can see the icon collection you’re picking your icons from? Maybe we can take a look together to find something that fits a little better.
  4. re: CLI Tool: I’ll have to think of some copy here with @iurimatias but we can fine tune that later. For now I think we should first try actually putting a screenshot of the CLI in there @timhartmann can you update the designs so that the CLI section has the CLI screenshot I’ve sent to you?
  5. re: Cockpit: I think the colors there were fine but that’s just personal opinion. The updated version is better though! :slight_smile: I also think that it’s better to show more of the cockpit UI, however, we shouldn’t forget that this section is more of a “teaser”. Once ppl click on “learn more” they’ll get a dedicated subpage just for cockpit. But as mentioned, the updated version is already better.

^ These comments where mostly in response to @jonathan’s comments, which have been addressed by @timhartmannin a follow-up iteration. Following are comments for the follow-up iteration

  • Colors: This is definitely much much better than the green! :ok_hand:
  • Horizontal boxes, also much much better

Actually I can stop right here. That last iteration is spot on IMO. Just the icons need fine-tuning.

Only tiny suggestion/comment: The (very cool) rocket in the footer with the smoke, that’s going up, would it be possible to have it in the same color as the logo rocket? Otherwise we end up having two different rockets on there. I do understand though if that won’t work color-wise.

Great work @timhartmann as always! I love where this is going!

Oh sorry, totally missed your comment. Yes absolutely! Let’s talk about this!

I created the pages “docs” and “community”. Would be really nice if you give some feedback :slight_smile:

Views:

1 Like

I like how you have the guy walking by a tree on a couple of the backgrounds, looks cool, I think something “outer space” might fit better though.

The graphics of people working together (one with a conveyor belt/office scene…) feel generic to me. No disrespect intended. I realize you put time and thought into it and they do send the right message. I’ve seen similar graphics on other websites and they don’t appeal to me personally. I suppose it’s a matter of personal taste, I look at originality where most people sort for familiarity.

Feel free to give feedback Brian. I am very open for it and also then we can create a great result. Mostly the first draft is not the last one.

Most of the content is only dummy content, because I am waiting for the final illustrations from another graphic designer.

1 Like

Hey @timhartmann

thanks again for the update! Here are my thoughts and some feedback:

  • Docs
    • This looks all pretty straight forward
    • We will have some code snippets in the docs as well, not sure if it makes sense to design those too as we’ll probably just go with an existing syntax highlighting plugin
    • We’re planning on creating short videos that work as standalone content but also go well with parts of the documentation. So there’s gonna be embedded videos here and there in the docs, also here not sure if it makes sense to have this designed… We would just embed from Youtube I think
    • So one other thing I should mention here is that at some point we’d like to have some “landing page” for the docs. Right now what happens is that you’re ending up straight in the “Getting Started” guide. In the future there should be some landing page that shows you different sections that are available (Videos, Tutorials, Guides etc). Similar to what our friends over at Aragon are having - https://hack.aragon.org/ Anyways, just something to keep in mind, no action item intended here. Let’s get those designs implement first and build up from there
  • Community
    • This looks also pretty straight forward
    • I guess we’ll have to see what the exact copy is going to look like
    • The floating profile pictures are a nice idea, I think though that we should drop of for now maybe add such a thing once we know what tools we can use to generate those. Or we can leave it static for now but then we’ll have to decide what profile pictures go in there.
    • The core contributors section is nice too! But also here, if we don’t limit it to the core team for now, we’ll have to make this dynamic. So to get things down the road sooner than later, I’d vote for going with a static solution first

Actually, most of my comments aren’t design related at all haha. I guess we can move on with this.

@iurimatias @jonathan @Ned?

1 Like

@BrianXV thanks for chiming in here! So the graphics are all considered placeholders at the moment until we get our own custom ones.

1 Like

Thank you for the feedback. I totaly agree with you @PascalPrecht. We can add the new stuff later and the most of your points are only topics for frontend like code highlighting.

It sounds that we can start with development of these pages and iterate later or what do you think @jonathan @Ned @iurimatias?

@iurimatias @PascalPrecht @JoRain @michaelb @anthony (please tag all team members as I dont know everyones handles)

Below is a deck outlining illustration sketches for all embark digital properties (website, social, etc). The following are sketches to show color usage and general style. The final assets will be more polished and defined.

We need your help in deciding which layouts to move forward with. Check out the deck and let me know your thoughts so we can move forward with the next round of design:

Site designs for reference: https://www.figma.com/file/GlAVKc1UaO86cMp0QRGFA5/Kopie%3A-embark.status.im-(alle-Versionen)

My selections:
Website Header (will be marquee brand asset): C (i like the concept of an astronaut staring out into a space skyline with a bunch of planets)
More than A Framework (to illustrate all the things you can do with Embark): B
Modular by Design: B (i think it is important we show a human element here and depict the user is in control)
Social header: A (lets stay in the space theme)

Deck here https://drive.google.com/open?id=1_yX1I65VImIf-aHmoBVr8gPXDQmV04pH

Very cool illustrations.

Here are my choices:
Website Header : A or C (I like that the moon is really close. It feels like a metaphor of how using Embark gets you to moon really quick)
More than A Framework : B
Modular by Design: B
Social header: A

Other members: @emizzle @metamorph.io

1 Like