Implement Get In Touch (contact) page design

wkf / sze-architects

SZE Architects

http://szearchitects.com

Eclipse Public License 1.0

1 stars 0 forks source link

Implement Get In Touch (contact) page design #30

Closed marstoyship closed 9 years ago

marstoyship commented 9 years ago

Dropbox/_SZE web/sze-contact.ai: https://www.dropbox.com/s/c3oeyvru1vf6yoe/sze-contact.ai?dl=0

Includes desktop, tablet, mobile. No new hover states on this page except to darken the facebook blue slightly (try #2e4b7f?). Wasn't able to save out cropped/optimized images yet. Having some photoshop issues today. Also, let's talk thru the form at the end when you get to it. I'm hoping a little chit chat can save me comping up a ton of states, and curious of your preferences for it.

[ ] #49
[ ] #50
[ ] #51

marstoyship commented 9 years ago

Here is the svg for that arrow Regular: https://www.dropbox.com/s/ya5ru77eegswis0/dropdown-arrow.svg?dl=0 "Optimized": https://www.dropbox.com/s/29f03te0v24l2i1/dropdown-arrow-opt.svg?dl=0

wkf commented 9 years ago

Here are the notes from our conversation... for posterity:

[ ] ~~Don't use a real Google map, just a static image with a link to the address.~~
[ ] ~~The Facebook link should actually like their page on Facebook.~~
[x] Use same type as "Please send us a message..." for the form fields.
[x] Animate drop-down button to flip upward when pressed.
[x] Drop-down should contain the same entries as the portfolio menu.
[x] Turn the submit button red on hover (like the button on the homepage).
[x] Upon submitting the form, turn whole card green with white type.
[x] Add ability to tab through form fields.
[ ] ~~Use native drop-down control where available.~~
[x] After building, get maximum and minimum dimensions for images.

wkf commented 9 years ago

Form

[x] Small "* Required fields" before name field, in small, light gray, italic, avenir
[x] On error, "Please fill out required fields." above button, small, red, italic, avenir
[x] On error, outline the failed fields with in red

wkf commented 9 years ago

Map

[x] Have pin selected by default
[x] Add a "get directions" link to the pin description

wkf commented 9 years ago

Form

[x] Remove placeholder text
[x] Image should always scale to fit container
[x] Reduce height of images on tablet (portrait)
[x] Ensure mobile gutters are the correct size (horizontal and vertical should match)