New front page for devo.ps

[hunvreus]

Currently, we have the old front page that we launched a year ago. I would like to build a new front page that uses our new colors, logo and new marketing message.

We have discussed things with you @erqiudao already, and I think you have some work done. Could you share it with us here so that I can comment and get things rolling?

From our discussions, I would use the following as inspiration:

• Dropbox.com
• Mapbox.com (more the app than the front page, you need to log in)
• https://stripe.com/us/marketplaces

I welcome other suggestions. I'd like something simple and clean, with potentially the following content structure:

• Header: sign up link and help link.
• Hero: 2 columns, with registration and pitch line on the right and a terminal on the left (just the outline, needs to be simple) and a bunch of devo.ps commands running on it (showing how to create a server, add tasks etc).
• Features: a list of features + illustration, one per row, same as chato.ps. Again, we use the same outline/lines style as for the icons and top illsutration for these.
• Sign up: call to registration again at the bottom of the page.
• Footer: regular wiredcraft footer, though we may want to tone it down.

@JuhaS @zbal @erqiudao Suggestions?

[erqiudao]

I think I need a brief of the illustrations,like chato.ps 1create 2 setup... ~ sth like that~ There is no price section?

[erqiudao]

I made a wireframe illsutration style like this?

[hunvreus]

Something like that yeah.

[hunvreus]

Maybe the lines for the buttons and illustrations should be a bit thicker: http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/

What do you think?

[hunvreus]

Also:

1. It is "devo.ps" not "Devo.ps" (don't capitalize the "D")
2. The colors seem a bit off (I let you pick a nice color palette: blue, green etc)
3. Could you post a screenshot of the Dropbox front page? I think we need more separation, even maybe a couple backgrounds.

[erqiudao]

[hunvreus]

Ok: I would recommend you work on the client with Juha, trying to find a good color scheme (you're free to pick whatever color you want by the way) and building me two styles (light and dark).

I'll be working on the copy, illustrations doodles and overall layout for this page tonight and we can work on it in the morning.

Ok with you?

[erqiudao]

ok we work on the wireframe now

[quentinberder]

A few features that, if I understand correctly the product, are pretty nifty even for non technical persons (think PM, managers, etc.):

• Automation: automating the jobs (or more?) of the platform is a big plus.
• Containment (?): using docker, etc., to provide a contain environment is pretty technical but not used enough on other products I believe. This is a good marketing point.
• Easy deployment: building boxes, pushing code on servers, etc. is still a pain for a lot of people (you still see some guys proposing FTP interface for their products...).
• Easy sharing: being able to share the configuration easily through the interface or email or Skype is a big plus. It will allow people to follow steps and just submit the configuration without the help of the "Ops" guy (if he is busy, not there, not reachable or just for a small instance that is boring to continuously set up).
• Best practices: this is a killer as it seems people are going a bit everywhere in DevOps those days. They even have a hard time defining what it is suppose to do. Having a set of rules, processes and practices is very beneficial for lean development and scattered team (faster ramp up, easier understanding in asynchronous discussions, etc.). Only if we push on the best practices on the side.
• Management: management of the platforms is always very difficult (SSH key on multiple servers, never remember the good IP address, etc.), showing it is very easy to add people and have people manage things.
• Monitoring at glance: see the status of all the platforms at one glance allows for quick status and transparency.

Other thoughts:

• Platform agnostic: perhaps not as a feature but I believe we should be clear about the fact that it is web based and thus works on Windows, Mac and Linux (openBSD or BOS even if they wish).

[hunvreus]

Grabbing.

[hunvreus]

Thanks for the feedback by the way @quentinberder, great stuff.

[hunvreus]

Front page is getting there. I need an illustration for the top section (hero).

What I was thinking is a (static) picture from our talented @erqiudao:

• Option 1: an editor with a node file (see below for the content) and 5 "clouds" around it that are connected by dots (or whatever you want to draw). The clouds have the logos for Vagrant, Rackspace, Linode, Digital Ocean and AWS.
• Option 2: same as previous one, but with 3 window in the middle instead showing the terminal (right side, forefront), a file editor for the node (center), and a browser showing the activity page (left, back).
• Option 3: same as Option 2 but with no browser in the back (only terminal + editor).

The content of the editor (name of the file is web.yml):

id: nodejs_server
name: Node.js server
type: server

provider:
  name: digitalocean
  size: 66
  location: 3
  image: ubuntu14.04

services:
  nodejs: '*'
  nginx: '*'

configuration:
  nodejs:
    packages:
      - gulp
      - forever
      - bower

The colors are the usual, you are free to draw the editor you want (look around on other sites). You will likely "cut" the editor, but we should at least read until the services section, and it should be readable.

For the terminal I need your help @zbal. The activity feed is fairly straightforward.

This illustration will be displayed below the pitch and button at the top of the front page.

[erqiudao]

[erqiudao]

do i need to draw these logo into line style?

[hunvreus]

Nope, but a few things:

• Could I get the two versions? I would actually start by the editor only version (with more details as explained in the next point), we can see later for the more complicated version,
• The browser, terminal and editor are not recognizable enough (this is the main illustration, I think we can have a bit more details);
  • Browser should have the Google Chrome kind of header,
  • Editor need syntax highlighting and (maybe) file panel on the left and/or name of file at the top (ask @xeodou and @fraserxu)
  • Terminal needs to have a dark background, and a command,
• If you're are going to emphasize some logos (you have some clouds in the forefront), i think I should clarify our preference for service:
  1. Digital Ocean,
  2. AWS,
  3. Linode,
  4. Vagrant,
  5. Rackspace,
• It'd be nice to have the clouds separated from the windows. You can check on the devo.ps landing page if you want to get a sense of the space you have (960px width)

[erqiudao]

[hunvreus]

Getting better and better.

[hunvreus]

I still think that we need:

• Slightly taller browser (back picture)
• Content for the terminal (front picture)
• Syntax highlighting and more of an editor look and feel (center picture), that may mean darker background (or not); need to test.

[zbal]

For the command line, you can use the following:

> devops ssh nodejs_server

[hunvreus]

Hmm, would be good to have a better line than that @zbal;

devops sync web

With the expected output, or part of the output. What would that be?

[zbal]

Can use the following instead

> devops info web
-----------------------
welcome to devops-cli
-----------------------
Fetching info of node web...
[server:web] Web Server ✔ Synced
     - services: nginx, couchdb, nodejs
     - ssh host: 198.199.114.16
     - ssh port: 22
     - provider: digitalocean - id: 1904796

[erqiudao]

What's the highlight look like?

[hunvreus]

You can use the colors from the website and app (I think I use purple for the keys, green for integer and white for the rest).

• Balance your composition, the windows are clearly not aligned (the digital ocean cloud is almost stuck to the browser window). You may want to squeeze them slightly more together as well, depending on the space you have.
• Use blue for the top circle in the browser window, then two green
• Not sure we need a dark color for the editor, maybe keep black/grey for the terminal (right window) and white for the editor. With that being said, I would still add elements that make it feel like an editor. Right now it has just code, which makes it hard to understand it's a file. What about you have a grey background for the code, then a folder panel on the right with a white background like in Sublime Text?

[erqiudao]

[erqiudao]

[hunvreus]

I think I'll just need a transparent picture of the three dots.

[hunvreus]

We're done for now. Closing.