Implement Design

[octalmage]

This issue is to track the design progress.

[octalmage]

@mjchamplin, show me something sexy!

[mjchamplin]

Soon!

[octalmage]

I can't wait!

[mjchamplin]

First round of mockups / UX design stuff coming soon -- hopefully tonight!

[octalmage]

Hell yeah!

[mjchamplin]

So my copy of Sketch hit the end of its 14-day trial period. I went to pay for the full version, and they page timed out. My payment went through, but I didn't get the unlock code. Emailed them, haven't heard back yet. MY DESIGNS ARE IN LIMBO

[octalmage]

OH nooooooooooooooooooooooooooooo.

[mjchamplin]

Damn startups and their billing departments never being in on weekends. ;)

[octalmage]

Dicks! You should tweet at them, that what's gets things done. :p

[octalmage]

@mjchamplin showed me the design and we started implementing it (see commits since last tag).

The design is far from finished, but here's a start!

[octalmage]

@mjchamplin Have you had any thoughts about the icon/logo? Might be related to #14.

[mjchamplin]

@octalmage I've been thinking about logo / icon stuff. Don't have anything solid yet.

[mjchamplin]

Rough mockup of entire editor window (sans any control buttons).

I'm liking the "dog-ear" to be literally just a gray triangle.

I'm about to change the window bar at the top to be standard Yosemite gray. I think for future releases we should think of taking a more Mailbox approach and maybe putting a search functionality up there.

[octalmage]

Looks good! I like the dog ear too. Did you want it to always be visible? What hex did you use?

[mjchamplin]

#ACACAC is the hex. Once it's more "together" I'll make sure all the colors are consistent (my grays are all over the place).

As for visibility, I think it should always be there, small, and expand on hover / approach.

[octalmage]

Not sure if this will make it into the first release, but we'll need some sort if export burton (#2).

We can probably put it in the settings GUI!

[mjchamplin]

The design up to now. Note the item hover state on the left:

...showing duplicate and delete options for notes.

This state is triggered by hovering over the title for a small amount of time (maybe a quarter of a second). This hover state makes the "are you sure" dialog box redundant, as it's a built-in safeguard against accidental deletion.

Also included: another attempt to "buttonize" the dog-ear at the bottom of the page. Still not sure how this will work out.

[octalmage]

I need, 4 icons, and two colors. @mjchamplin.

[octalmage]

[octalmage]

Do you still like the dog ear in the design above (with the #)? @mjchamplin

I want to try it, do you still have the related graphics?

[mjchamplin]

Probably. I want to get back involved in this project, so if I have to redraw it / start from scratch I will. ;)

[octalmage]

Awesome! yeah I'm trying to get back into it also.

[mjchamplin]

Nice icon! Did you draw it / can I tweak a couple things?

Also I'm moving in 10 days but after that I'd really love to dedicate some time to the design of this app. What would be a good way for us to catch up? Google Hangout or something?

[octalmage]

Yeah do whatever you want! I just got tired of looking at the nw.js icon so I made something in Sletch, but I'm not attached to it one bit.

And yeah Google Hangouts works! Just let me know!

[mjchamplin]

Awesome!

I probably won't wear pants though.

[octalmage]

That's to be expected.

[mjchamplin]

Hey dude, I'm all moved and I'd love to work on Marknote again. Let me know when you'd be free for a little chatty chat.

[octalmage]

Awesome! I'm off the next couple of days. So whenever!

[mjchamplin]

Github spam! That's new...

[octalmage]

Lol yeah, do they even have anti spam tools?

[mjchamplin]

I reported the account...

[mjchamplin]

Hey! Would love to revisit this and update / provide designs if needed.