Logo / Favicon - Githubissues

calvinmorett commented 5 years ago

Favicon based on Brand Logo

Disregard the red background, just a way to signify the background is transparent. The darker color can be easily changed, as well as the N. Could utilize Post-It! yellow-ish color, familiar, easy on the eyes.

Logo Concept https://codepen.io/CalvinMorett/full/QYYEPq

xy2z commented 5 years ago

Nice and simple. I like it, especially the hover animation. Can you make a 16x16 favicon so we can test it in the browser?

calvinmorett commented 5 years ago

I can flesh out a better one that is closer to the animated hover version I created sometime this week, but maybe they can be used for some testing for now.

16x16 Favicon. Basic color scheme, yellow, black, background transparent

Static https://raw.githubusercontent.com/calvinmorett/dopenote/master/favicon.ico
Quick, Animated Version

xy2z commented 5 years ago

Relevant: https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions

xy2z commented 5 years ago

I'm not so sure about the yellow, it's not a good contrast with the white background in the tabs..

How about orange? Or black background, and a yellow "N" in the favicon?

calvinmorett commented 5 years ago

When ready I'll go ahead and make everything from these 16x16 to the 64x64 sizes. I would like it to transition, something like this as we build more of the sizes up.

With bigger sizes available, we'll be able to add more to the identity.

I think this is a good thing to focus on too because in a way it could be used to define more of the project. To give us direction for the default theme, and other parts of the project that I'm interesting in contributing to.

xy2z commented 5 years ago

My favourite is the #FFC90E square with the black line. Looks good on white and dark grey (sidebar)

Will you make a PR?

xy2z commented 5 years ago

@calvinmorett I was thinking, wouldn't it make more sense if the letter is a 'D' instead of 'N'?

calvinmorett commented 5 years ago

Sort of, part of the favicon/logo already ~ The D is the right edge part wrapping the note ;)

With that said, I can change it up to whatever you need.

On Sat, Mar 9, 2019 at 4:53 AM xy2z notifications@github.com wrote:

@calvinmorett https://github.com/calvinmorett I was thinking, wouldn't it make more sense if the letter is a 'D' instead of 'N'?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/1#issuecomment-471163016, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBXcKwnFE8vncnO1HslyCq9lKf3K1ks5vU4SPgaJpZM4am7sI .

xy2z commented 5 years ago

Im not sure its clear enough. I think most will expect a D since it starts with D. But, I really like the N logo ;) it looks so good.

I have tried changing it to D but it just doesnt look good, imo.. Any thoughts?

Do you know a good font for a D?

Another thought was to have no letter and maybe a symbol/icon instead?

Btw. Sorry for the late reply

xy2z commented 5 years ago

Here's some Google Fonts I liked for the logo Atm "Carter One" is my favorite, with letter-spacing: -0.1em

calvinmorett commented 5 years ago

I have based some new ideas off of the favicon I designed. I'll upload them as I flesh it out more and you can let me know if it could make more sense based on that to tie it together.

As far as the fonts, I think my favorite is Abril. It looks cleaner than most of those other fonts, and carries the notion of a serif used in books & writing in general.

xy2z commented 5 years ago

Cool, I was afraid you had lost interest :)

I like them all generally, but the reason I like Carter One more is because the 'D' is probably the most unique, so people will recocnize the 'D' and think of Dopenote and not other logos that start with D. But, if the 'D' has a background/color like the one you did above, it becomes more unique and distinctive.

Looking forward to seeing what you come up with

calvinmorett commented 5 years ago

Haven’t lost interest! But I do feel that I need to focus on one thing at a time instead of trying to be involved with everything on the project :)

Here is where my heads at with how the favicon, more of the logo than just a favicon at this point, and I believe it can influence some of he ui

a.img

On Mon, Mar 25, 2019 at 8:50 AM xy2z notifications@github.com wrote:

Cool, I was afraid you had lost interest :)

I like them all generally, but the reason I like Carter One more is because the 'D' is probably the most unique, so people will recocnize the 'D' and think of Dopenote and not other logos that start with D. But, if the 'D' has a background/color like the one you did above, it becomes more unique and distinctive.

Looking forward to seeing what you come up with

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/1#issuecomment-476182272, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBXDCT1p3H-D_038AHXxq3P0H8n-Tks5vaMX-gaJpZM4am7sI .

calvinmorett commented 5 years ago

Where I’m at with the logo and there is an animation in there somewhere... it has both initials from that one 6x5 grid.

b.img

I thought my phone was able to upload images through email but I guess not, which is a significant bit of context with these posts I'm making. I'll upload them now and add.

On Mon, Mar 25, 2019 at 8:50 AM xy2z notifications@github.com wrote:

Cool, I was afraid you had lost interest :)

I like them all generally, but the reason I like Carter One more is because the 'D' is probably the most unique, so people will recocnize the 'D' and think of Dopenote and not other logos that start with D. But, if the 'D' has a background/color like the one you did above, it becomes more unique and distinctive.

Looking forward to seeing what you come up with

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/1#issuecomment-476182272, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBXDCT1p3H-D_038AHXxq3P0H8n-Tks5vaMX-gaJpZM4am7sI .

calvinmorett commented 5 years ago

xy2z commented 5 years ago

Some quick thoughts

I'd like the sidebar to be in the left side, but as we talked about this will be customizable by the user later
I don't think tags and color will be part of the first release, as I want to keep it somewhat simple, but it's a great idea for later features.
I don't think "App" (settings and updates" should take so much space, Notebooks, notes and the editor should be as primary as possible, and everything else should be as minimized as possible (user, settings, updates
I like the logo, but maybe it's a bit too simplistic to be recognizable?
I think all notebooks should be visible from the layout without having to go through a modal, so users can quickly change between notebooks and notes, and it's easier to drag a note to a new notebook (like the custom layout, like Notejoy)

calvinmorett commented 5 years ago

Have you seen Editorjs?

On Tue, Apr 2, 2019 at 3:19 PM xy2z notifications@github.com wrote:

Some quick thoughts

I'd like the sidebar to be in the left side, but as we talked about this will be customizable by the user later

I don't think tags and color will be part of the first release, as I want to keep it somewhat simple, but it's a great idea for later features.

I don't think "App" (settings and updates" should take so much space, Notebooks, notes and the editor should be as primary as possible, and everything else should be as minimized as possible (user, settings, updates

I like the logo, but maybe it's a bit too simplistic to be recognizable?

I think all notebooks should be visible from the layout without having to go through a modal, so users can quickly change between notebooks and notes, and it's easier to drag a note to a new notebook (like the custom layout, like Notejoy)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/1#issuecomment-479156909, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBYafSFXS72h8hz1Xj28ZFkoN7MMSks5vc601gaJpZM4am7sI .

xy2z commented 5 years ago

No i dont know editorjs

calvinmorett commented 5 years ago

Sorry unrelated to your other comment, but https://editorjs.io. Only brought it up because I thought it would be at least interesting to you, it was to me.

To go over your above points:

Okay, yeah I understand your idea about the side bar, it's familiar to users as well.
I find the best way for me to organize my notes is through color values, easier to ID for me, but that's understandable, it's probably a lot to get involved in adding.
Yeah, I'll run it back and implement your suggestions to the UI
I'll flesh out a better, quality example and we can continue to reiterate - maybe this 'issue' should be Logo instead of Favicon, it's kind of gone past that point wouldn't you agree?
Yeah all notebooks make sense, I guess when I was rendering that sketch that was just a quick-access type idea, and I agree and would want a modal window display for all notebooks too!

xy2z commented 5 years ago

I renamed this issue to Logo / Favicon And I think you misunderstood, i don't like the modal - i'd prefer to show all notebooks. Maybe if the user has ALOT a modal would be good. But if there's just 10-15 notebooks, IMO they should be visible without a modal.

xy2z commented 5 years ago

New Favicon done.

Sorry I had to change the nice "N" favicon you did with a "D" so it's matching the logo and name. I just want to get an alpha out soon-ish, so I just had to mix something together - so I'm very open to new suggestions.. Especially in the app layout and design, which will probably be a never ending story - but also if you have good ideas on improving the logo or favicon :)

Thanks for the work though!

calvinmorett commented 5 years ago

Had some new ideas on logos / identity

xy2z commented 5 years ago

I really like the one on the right in the 2nd row, the orange D with a pen in it. Maybe it should be a bit bigger so it's easier to see from the favicon?

calvinmorett commented 5 years ago

Edits, trying to draw down on that one in variations. Think black and white is nice for revision purposes, will re-add colors for the next preview.

xy2z commented 5 years ago

My favorite is the first (top left) ❤️

calvinmorett commented 5 years ago

Here's the orange versions:

Here you can scale the logo: https://codepen.io/CalvinMorett/full/rNBOmdB

This is the color scheme, the orange is for the branding and some of other parts of the design, mainly creating new notebooks and notes. https://codepen.io/CalvinMorett/pen/RXzqLp

These can be easily integrated with CSS variables, and the best part is we can integrate it over all paths if we're unhappy with the colors later in the process.


    --red:#b00000;
    --orange:#d2482c;
    --orange2:#f66001;
    --orange3:#e69800;
    --green:#018c31;
    --green2:#6c9c6c;
    --gray:#969696;
    --gray2:#6f7477;
    --lite:#d1d0ce;
    --dark:#292a2e;

xy2z / dopenote

Logo / Favicon #1

Favicon based on Brand Logo