Cosmetic #93

Basic design for initial launch

Added by Andrew Mallis over 1 year ago. Updated 10 months ago.

Status:Closed Start date:01/13/2012
Priority:High Due date:02/17/2012
Assignee:Thiago de Mello Bueno % Done:

100%

Category:UXD Spent time: 17.00 hours
Target version:0.5.0
Difficulty:average

Description

We need some visual cues to theme the Drupal site.

We are going for minimal, neutral appearance. No red or yellow, as we do not want FGA to appear as a NYC project, it is about the movement at large.

Looking for more of a Design perspective here:

  • Simple design comp that lays out a header and footer.
  • basic wireframes of our key pages:
    • homepage (map of occupations, very full width)
    • directory sortable, filterable, searchable table of occupation data
    • occupation node view
    • occupation node edit form
    • Also, simple wireframes of the occupation creation process (re-purposing groups creation designs).

Screen_shot_2012-02-01_at_10.03.54_PM.png (219.2 kB) Thiago de Mello Bueno, 02/01/2012 10:04 pm

02.01.2012_occnode.png (446.2 kB) Thiago de Mello Bueno, 02/01/2012 10:12 pm

01.31.2012_maplanding.png (417.5 kB) Thiago de Mello Bueno, 02/01/2012 10:47 pm

02.01.2012_occnode.png (446.2 kB) Thiago de Mello Bueno, 02/02/2012 07:06 pm

02.02.2012_occnode.png (368.4 kB) Thiago de Mello Bueno, 02/02/2012 07:20 pm


Subtasks

Cosmetic #150: theme occupation node edit formClosedAndrew Mallis

Cosmetic #151: Theme Occupation node viewResolved


Related issues

related to #OWSdirectory - Cosmetic #833: Update Site design/layout Resolved 11/06/2012

History

Updated by Andrew Mallis over 1 year ago

  • Target version changed from 6 to 1.0

Updated by Sam Boyer over 1 year ago

  • Assignee set to Nikkiana Henninger

Updated by Sam Boyer over 1 year ago

  • Subject changed from Theming to Basic theming for initial launch
  • Priority changed from Low to Normal

Updated by Andrew Mallis over 1 year ago

  • Subject changed from Basic theming for initial launch to Basic design for initial launch
  • Category set to UXD
  • Assignee changed from Nikkiana Henninger to Thiago de Mello Bueno
  • Target version changed from 1.0 to 0.5.0

Updated by Andrew Mallis over 1 year ago

.It may not be necessary to articulate these pieces. Trevor seems comfortable operating in the environment as it stands.

We are going to start rolling without wireframes.

Post Wed, when the sky clears for you, Thiago, let's revisit the bigger picture.

Updated by Andrew Mallis over 1 year ago

A UX-approach to the occupation listing is highly desired at this point.

The listing need not be a table, it could be cards of some kind. Users will want to search listings.
Let's try and keep things simple for launch.

This listing for Occupy Wall Street is the most complete, and can be looked at as a baseline. There is a lot of information there. Wireframes on how to present the data would be great.

See the Occupation Directory Specification for some user stories that may be of use in this process.

Updated by Thiago de Mello Bueno over 1 year ago

  • Status changed from New to In Progress

Here are some comps for the listing (and a little design for the overall presentation)

(This maybe too complex for .6, but lets talk over it, and I'll pair it down)

Updated by Trevor Twining over 1 year ago

Like it, but my understanding of the data is there are not a lot of images (yet). How does this stand up with an initial selection of default images?

Updated by Thiago de Mello Bueno over 1 year ago

True, I was thinking the 'map thumb' from the Canada one could be generated for those without images?
But what of non physical occs, with no image....

I also think the 'chips' are too tall.

Ideally there would be a 'fixed set' of 'contact points' that could be accessible just from rolling over the image.

This overlay idea is an extrapolation from that, but maybe overkill.

My candidates for these 'top level' links:
Primary Email (if present)
Primary Phone (if present)
Primary Twitter hash (if present)
Livestream (the idea not the brand if present... should we call it 'live video' or is this a 'hoover' scenario)
Youtube
Flickr
Facebook?

Getting pretty comprehensive... what are your thoughts on 'essentials'

Updated by Liza Sabater over 1 year ago

i clicked on the wrong semaphore and ended up editing thiago's comment. sorry about that :P

threading...

Thiago de Mello Bueno wrote:

True, I was thinking the 'map thumb' from the Canada one could be generated for those without images? But what of non physical occs, with no image....

I also think the 'chips' are too tall.

i love the thumbnails just as they are. i am going to be honest, am not hot about the header :\

as to the thumbnails:

1. How many occupies do not have an image?
1a. If the list is less than 100, am happy to help in researching & producing the thumbnails.

2. If we're talking in the hundreds (or thousands) how about setting up default images based on country and/or region?

do you need setting up the page wireframe and/or the views? i can help with that.

Ideally there would be a 'fixed set' of 'contact points' that could be accessible just from rolling over the image.

This overlay idea is an extrapolation from that, but maybe overkill.

My candidates for these 'top level' links: Primary Email (if present) Primary Phone (if present) Primary Twitter hash (if present) Livestream (the idea not the brand if present... should we call it 'live video' or is this a 'hoover' scenario) Youtube Flickr Facebook?

that's a lot of info. i think EMAIL / TWITTER / LIVESTREAM are going to be the biggies in interest.

great work!
liza

Updated by Andrew Mallis over 1 year ago

Overall, I like the image tiles, and the static map idea is pretty solid visually. It would take some doing to pull this off programmatically.
What happens to the layout if the Occupation name is long, i.e. "Occupy RedwoodCity/SanMateo County"? Probably overlap the image?

Fly-out is a good idea, but we probably can't tie it to the bottom of the tile, or the bottom row will go off-page. Some kind of tooltip solution de mesure.

Let's take email and phone out of the top level links, and value social media instead.
Yes, add facebook.
Let's call livestream "video stream".
Does it make sense to use social media icons instead of text?

This card layout, as noted, is more 0.6 than 0.5, but there are some good visual cues here.

I like the header and footer treatment.

The footer call to action for Feeds could be something like "get this (public) data". The call could slide out or expand to reveal the formats we have. For 0.6 we'll probably want a "more info" kind of page that lays the groundwork for an occuAPI idea.

I'm still pro yes-button. Not sure what it would do in the context of this site (yet) so let's put it in the bike shed?

Otherwise, beautiful stuff.

Really looking forward to the Occupation Node view.

Updated by Thiago de Mello Bueno over 1 year ago

Responses:
Flyout, agree re: tooltip, but it needs be 'click' activated and not rollover activated (theres buttons inside). I can draft something up.
Roger on social media.
"Video Stream" Agreed.

Social media instead of text... well I was going to get caught in an icon making loop and didn't want that.
Also the unstructured nature of the data, had me assuming that instead of a defined 'taxonomy' (not in drupal land but in english land) 'properties' were sort of just name/value (label/link) pairs.
We can prompt the user with 'frequent' ones and a nice default set, but it seems like there maybe value to leaving some bits 'user defined.'

Updated by Thiago de Mello Bueno over 1 year ago

  • Assignee changed from Thiago de Mello Bueno to Trevor Twining

Slight evolution... ok time to discuss and such.

Updated by Thiago de Mello Bueno over 1 year ago

Update, the long thin gothicish font is Ostrich Sans, which is open source and available from the league of moveable type (they put their font sources on github)
http://www.theleagueofmoveabletype.com/ostrich-sans

I webfontalized it through font-squirrel.
http://dl.dropbox.com/u/3536211/fga/resources/fonts/ostrich-sans-fontfacekit.zip
Kerning/hinting really breaks down at small sizes.

Updated by Thiago de Mello Bueno over 1 year ago

Simpler listing view, 'direct link icons' show on hover. Otherwise clicking leads to node view. We can worry about flyovers some other time.

"Occupy Redwood City/ San Mateo County" problem is resolved with 'inline-block' treatment to the headers (so they can take a little padding) and a background color.

Yes button bike-racked. Its silly but i like it.

Note on node view, search bar remains... one less step towards resuming a search (search instead of back button or directory click + search)

Do any of you see need / use case for breadcrumbs of any sort in this scenario? I don't but my nerves are raw these days.

Updated by Thiago de Mello Bueno over 1 year ago

Map landing page

Updated by Andrew Mallis over 1 year ago

Map landing page

Is awesome. I've pointed Ticket #176 there.

Updated by Andrew Mallis over 1 year ago

re: the node view

02.01.2012_occnode.png

The commenting feature is to be our running tally of corrections. This'll be hidden from non-logged in users, as will all other tabs.
Need a more discrete call to action for submitting corrections.
Also a call to action to add your occupation (more of a site-wide concern)
Regrouping of fields may be required post evaluation of OWS listing.

Really like how the location is near the map.
GA label inline with text = great.

Good thinking overall. Looking forward to next pass.

Updated by Trevor Twining over 1 year ago

Finishing my first pass at this, will be done in approx 1-2 hrs, so 5-6pm PST.

Updated by Thiago de Mello Bueno over 1 year ago

Updates to occnode view re: andrews comments above

Updated by Thiago de Mello Bueno over 1 year ago

Oh also not sure who's purview it is, but please please please only list countries in which there are added occupations on the search pulldown please!
Signal vs. Noise!

Updated by Andrew Mallis over 1 year ago

Thiago de Mello Bueno wrote:

Oh also not sure who's purview it is, but please please please only list countries in which there are added occupations on the search pulldown please!

See Ticket #258

Updated by Andrew Mallis over 1 year ago

  • Assignee changed from Trevor Twining to Thiago de Mello Bueno

As per our conversation, please post here a revised node view that incorporates feedback, places the occupation image, rejigs the footer to include hemisphere + call to action ++

Updated by Andrew Mallis over 1 year ago

  • Status changed from In Progress to Closed

Also available in: Atom PDF