search

phonegap / app.phonegap.com

Micro-site for the PhoneGap Developer App and PhoneGap Desktop app.
http://app.phonegap.com
Apache License 2.0
7 stars 16 forks source link

Create mocks for site #1

Closed timkim closed 10 years ago

timkim commented 10 years ago

I need a little more content for the site. It currently only has placeholder text and some stock images. Would be good to flesh out exactly what we want.

davejohnson commented 10 years ago

flesh it already! ;)

jahoni commented 10 years ago

ewww. okay. you need my help. i'll work on a better design with real content tomorrow.

timkim commented 10 years ago

Haha thanks Joni

timkim commented 10 years ago

Ok, after some discussion on Friday with @mwbrooks, we decided to do away the video/animated gif idea to showcase how to install/use the app. Instead we're going for a step-by-step instruction guide similiar to these sites: https://cloud306.com/ and http://www.telerik.com/platform.

I feel like having a step-by-step guide will be easier to make and maintain than an animated gif/video. Also gives the user a very easy overview on how to use the our shit.

mwbrooks commented 10 years ago

I like how we're using the sections to showcase meaningful information. Too many sites waste those spaces with meaningless feature points (e.g. Lighting Fast). Instead, we're using it to document the steps involved in installing, setting up, and running your first app.

I'd like the hero image to be an animated play-by-play for using the CLI + App. However, we can just as easily start with static images and later on swap in a video.

timkim commented 10 years ago

Alright, added in some vector assets so you don't have to look at my crummy hand drawings. Sorry it's in Flash, but can be easily converted to be used in Illustrator. Anywho, this is what I'm thinking for how the step-by-step images should be used on the site. We can also easily change the assets to be less flat or larger if need be.

mwbrooks commented 10 years ago

Awesome. Tomorrow let's hash out the exact section and steps for the site!

mwbrooks commented 10 years ago

@timkim and I had a quick meeting to layout the sections in a bit more details:

  1. Download & Install CLI
  2. Download the App
    • array of device platform images
      • logo on each device screen
      • app store icon under each device
  3. Pair CLI to the App
    • CLI $ phonegap create my-app $ cd my-app/ $ phonegap server listening on 127.0.0.1:3000
    • App
      • open with IP address typed
      • highlight CLI and App addresses
      • draw arrow to show where it goes
  4. Feel the Power
    • Editor
      • make a change
      • "Hello World"
    • CLI
      • detect a change
    • App
      • auto-update
      • "Hello World"