Login and Landing UI Components

[rbeatie]

[rbeatie]

Landing and Login UI Components

User Story

As a person in need of low cost legal representation I would use a tablet that was given to me by the centers greeting law clerk. I need to provide information so I can creating any personalized requisite I would need for my upcoming court date. I am greeted on screen first with a welcome message contained in a minimal layout with a help button peaking from a corner. The Navigation panel is topped by a fullwidth header that holds the Commons Law Center Logo and various relevent links.

The buttons for navigating to services are large and labeled but greyed out. Tapping on the document builder button does nothing. After few moments the app automatically detects that no user is logged in and presents a login form as the main focus . I then provide my credentials in each input and press the login button which causes the login component to disappear and the document builder button to become enabled so that I can navigate to the service..

Design Emulation and Intent

note that the UI must be designed for mobile screens and I encourage using https://tachyons for all positioning and styling possible. I think It makes style sheets more maintainable.

Please use this picture for inspiration, until I can get @hmarcks to donate his art for this project. :)

[hmarcks]

@rbeatie would you prefer impressionism or something more surrealist? :-) Maybe you can get me more familiar with the project if you're looking for some design help