Temp. Interface

[calvinmorett]

Would this be a direction you would want to go for the interface? Was thinking the action buttons can be moved away from the note section and keep the 'action' items to the side bar.

https://codepen.io/CalvinMorett/pen/qgKqWz https://gist.github.com/calvinmorett/98b2cc4f9dc6f97ee823247e7b6b40b8

[xy2z]

Overall I really like it. It's calm with good contrast and colors, and looks good with action buttons in the sidebar.

Some minor things:

1. Menu links should be <a> tags instead of <button> so it can be right clicked and opened in new window, etc. (not the action buttons)

2. I'm not a fan of the blinking circle on the active note. I don't think it's needed and feel like it's saving or loading when it's blinking, it's a bit distracting for me.

3. The hovering fade on note links should be instant (:hover) and not faded (keyframes), it just makes the app feel faster imo. Looks good on the action buttons though.

4. I'd prefer not to use !important unless it's really neccessary.

I'm not sure about the logo animation - but just keep it for now and I'll test if it's too big a distraction when writing.

[calvinmorett]

Appreciate the direction, I'll make sure to reiterate what you're saying to make sure I'm going in the right direction and we can keep building it closer towards your vision. I'll address issues and if this isn't the best place to discuss possible design decisions then we can move this off of here.

1. This initial design was not directly a copy of what you have in terms of structure, I was just trying to layout some things in terms of styles, default, active and starred links for notes. With that said and with this initial design path you are free to switch up at anytime, moving forward I'll try to build directly into the structure so it's less confusing. Knowing you want them opening in a new window is great input and makes me consider ways to visually communicate that to your users, perhaps we can figure that out.

2. Okay animations removed, I can see how they can be distracting.

3. Okay more direct feedback on hovers, it was a little jarring so I made it less of a transition. This should make it feel faster.

4. Yes, bad form. Sort of point 1, just the initial design without structure. Removed.

• Logo animation removed, reiterated.

New Revisions

• v.02 https://codepen.io/CalvinMorett/full/Odwxqx

• v.03 https://codepen.io/CalvinMorett/full/xMaZGd

• v.04 https://codepen.io/CalvinMorett/full/daqRVO

[xy2z]

Personally I actually prefered the v.01 and v.04 revision :) I think v.02 and v.03 links have way too much height but I appreciate the effort! But I have actually decided to start implementing notebooks, and like the way Notejoy and Evernote has done it with the notebooks on the left, then the notes, and then the editor.

I think I want it to look something similiar, at least for the default theme. Altough the note content should not be displayed, only the note title (like now). The plan is to implement more themes in the future.

I'm currently working on this and almost finished - maybe you could give a shoot at that when it's done?

I'm not sure where to put the rename/delete actions for the notebooks - maybe it will just be when right clicked.

And about the actions there have to be space for more buttons to come in the future for something like "Share note", "Duplicate" etc. That will only come much later, but still the layout should prepare for it so maybe we shouldn't have the note actions in the sidebar. This could also be on right click, but if you have any ideas for note actions like Star and Delete let me know.

[calvinmorett]

@xy2z Excellent plan, let me know if this correct. I'll try to combine the best elements of v.01 and v.04, for a default theme then after you're done we can figure out more themes.

Todo: [ ] Review what Evernote + Notejoy do and try to implement some of their interface ideas

Needs:

• Keep note heights small, (default)
• Default theme
• Ability to include more themes later (best future style implementation for theming: Sass?)
• Include the takeaways after reviewing the interfaces of Evernote + Notejoy into the new combination design

@xy2z Consideration:

• Only show note title, no note body (Would this be considered uninformative, visually, for a first-time user? Perhaps, at least create some visual for when hovering? Fade in placeholder then, but not initially.)

Some quick notes after reviewing the two sites.

Evernote

• Full screen note, slide out the side bar
• Smaller font sizes
• Notes section has a tagging at the bottom for searchable notes
• Two side bars, one for functions + organization, one for notes
• New Note button, very clean.
• Search bar left side bar
• All notes, share, trash, shortcuts, upgrade
• Top right menu for note actions; remove hamburg menu on desktop
• Hover note for note styling
• Icons for left most sidebar, for notebook org. (Twitch does a smaller sidebar for just menu icons when smaller, could be interesting design-wise)
• Slight color on hover

Notejoy

• Drop down new note, for different types of notes
• They love highlighting where people can upgrade their note plans, good attention draw
• Left visual border on active notes of the similar initial ideas on Codepen
• Small branding top left
• Notification area
• Very tight layout
• Untitled note, followed by Date
• Not a whole lot of visual information where to type, but I suppose it's not rocket science if you're actually there to write notes. :writing_hand: (click anywhere to write notes)
• Note filters, alpha, date
• Popout on double click of note, very interesting feature

Take aways

• Large area for notation on note panel to click anywhere [notejoy]
• Tight note sidebar [both]
• Dark sidebars, light note area
• Search
• Filter
• Share button
• Duplicate note
• Highlight upgrade path

---

My thoughts and questions

I think it would be best to focus on the users experience for the most used device that you yourself were planning to this for, I feel this is important because then we can really refine that device state and it will be a sort of nexus for all other parts of the layout. What device might you want to focus on initially? Desktop, mobile, tablet?

You should also consider what separates the value of DN to something quick that a user might already use, such as the simplicity of Notepad, Word, or Apple iPhone default Notes. I can open those up, already installed write something and save it to a folder, why do I need to use this? Can I import my desktop notes without a bunch of copying and pasting? What value would this be providing over something else they might already be using for quick notes?

Granted these might be overarching and too broad of questions, but maybe it should be a least a part of the train of thought to make something that considers a lot of view points while trying to avoid creating pain points as working through the initial stages of fleshing out the functionality and layout. I think my focus will be to try and make the interface as easy as possible to dive right into and start writing, while maybe providing something that is familiar, but better than the other tools they've used in the past.

New Revisions

• v.05 https://codepen.io/CalvinMorett/full/bzQmVP

• Notebook Full-view Grid Concept https://codepen.io/CalvinMorett/full/OdrawR

[calvinmorett]

I think responsive design is a part of this so possibly the issues can be merged.

What do you think of a bar that is able to be arranged from the top, left, bottom and right sides of the screen. With the note being, of course, the main feature. Being able to adjust the sidebars position based on personal preference seems like it could improve the UX and be an interesting feature.

Also, I think styling the sidebar off of another familiar element in Notepad would be something interesting for the top and bottom smaller, action bars. I think focusing on making it as easy as possible to understand, taking notes should be a breeze. Also organization should be just as easy.

[xy2z]

What do you think of a bar that is able to be arranged from the top, left, bottom and right sides of the screen.

If you mean the sidebar, then absolutely yes. I think customizing is very important; color-scheme, layout, font, font size and more.

Also, I think styling the sidebar off of another familiar element in Notepad would be something interesting for the top and bottom smaller, action bars.

Sorry I'm not sure what you mean. Do you mean the sidebar should be around the Notepad with a top-bar and bottom-bar with same background color as the sidebar?

I think focusing on making it as easy as possible to understand, taking notes should be a breeze. Also organization should be just as easy.

Yes! It should be very easy to start and intuitive for new users. That's why I'm looking alot what others are doing. This will always an ongoing task, I don't think we will get it perfect from the first go. Listening to user feedback is also important (maybe there should a feedback option/link in the first releases)

[calvinmorett]

Okay let’s put it into a better format so we can stay organized and measure the progress. I should’ve maybe made this from the start, because I’m sure we could discuss all day about the what ifs. Let’s get something concrete outlined as a bare minimum for a first release.

• overall tightening of styles(performance over bells+whistles)
• full responsive layout
• theming (first lets do minimum of a dark+light theme switch)
• mailable sidebar for positioning

On Thu, Feb 28, 2019 at 10:38 AM xy2z [email protected] wrote:

What do you think of a bar that is able to be arranged from the top, left, bottom and right sides of the screen.

If you mean the sidebar, then absolutely yes. I think customizing is very important; color-scheme, layout, font, font size and more.

Also, I think styling the sidebar off of another familiar element in Notepad would be something interesting for the top and bottom smaller, action bars.

Sorry I'm not sure what you mean. Do you mean the sidebar should be around the Notepad with a top-bar and bottom-bar with same background color as the sidebar?

I think focusing on making it as easy as possible to understand, taking notes should be a breeze. Also organization should be just as easy. Yes! It should be very easy to start and intuitive for new users. That's why I'm looking alot what others are doing. This will always an ongoing task, I don't think we will get it perfect from the first go. Listening to user feedback is also important (maybe there should a feedback option/link in the first releases)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/11#issuecomment-468319297, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBRIrbBZjNROIY9sYc9Z4o-XC_Ka2ks5vR_fugaJpZM4a4bJg .

[xy2z]

Agreed By theming I'm thinking color-scheme, and not layout changes. I think that's too big for the first release. So it's purely CSS color changes - that would be cool to have in the first release. When you say dark theme do you mean dark notepad theme? This would require the rich-text editor we're using (right now it's tinymce) has support of dark theme.

Also i think action buttons are necessary because users can't right click on mobile/tablet. So these action buttons are needed for first release

Notebook actions

• New notebook
• Rename notebook
• Order notebook (or move up/move down in menu order)
• Delete notebook

Note actions

• New note
• Star (toggle)
• Delete note

And for the trash view there should be a Restore button for each note, but that's part of #21

[calvinmorett]

I’m in the same page for theming, no pun intended. No drastic big changes, just preference, ornamental. Was thinking css variables, embedded no extra, besides maybe some JavaScript.

Adding these, will refactor list later this weekend.

• Action buttons
• trash view

On Thu, Feb 28, 2019 at 1:46 PM xy2z [email protected] wrote:

Agreed By theming I'm thinking color-scheme, and not layout changes. I think that's too big for the first release. So it's purely CSS color changes - that would be cool to have in the first release. When you say dark theme do you mean dark notepad theme? This would require the rich-text editor we're using (right now it's tinymce) has support of dark theme.

Also i think action buttons are necessary because users can't right click on mobile/tablet. So these action buttons are needed for first release

Notebook actions

• New notebook
• Rename notebook
• Order notebook (or move up/move down in menu order)
• Delete notebook

Note actions

• New note
• Star (toggle)
• Delete note

And for the trash view there should be a Restore button for each note, but that's part of #21 https://github.com/xy2z/dopenote/issues/21

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/11#issuecomment-468389765, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBQr6Snscoe9WpMQF7_GDV1_GXSnEks5vSCQGgaJpZM4a4bJg .

[calvinmorett]

Any possibility to assign classes to a lot of things in the interface to make it easier to customize and theme?

[xy2z]

Can you give some examples where there's missing classes?

[calvinmorett]

Yeah just off the top of my head because I can't remember what I was trying to style and was unable to, but, the sidebar, the main section, both inputs separately; title and body text, any icons/buttons. I can give you a better list sometime this week or later.

[xy2z]

• The notebooks sidebar is the <nav>
• The note sidebar has class notes-list
• The main section (the editor?) has ID #note
• Buttons have an action class right now

You can see the whole app html here: https://github.com/xy2z/dopenote/blob/master/resources/views/app.blade.php

If classes is missing please make a list here or a PR :)

[calvinmorett]

Would like to address this again, and say that I think there should be classes for Starred Notes, and Trashed Notes so in the future you can style these easier in case you wanted to say add a tooltip or icons. Related, will there be a trash in the future for notebooks too?

Also, I was thinking instead of Starred it could be Pin instead. https://fontawesome.com/icons/thumbtack It's an icon that I think would make more sense, but what do you think?

I will make a pr soon for the css updates I've made, but if you have stylish you can see them now, by adding these class edits.

`body { margin: 0; font-family: sans-serif; font-size: 15px; } nav { position: sticky; top: 0; flex-shrink: 0; width: 210px; background: #333; padding-top: 0; color: #eee; } nav button.action { background: #535353; border: 0; border-radius: 0; font-weight: 500; padding: 2em; display: block; margin: 0; width: 100%; font-size: 11px; color: #e3e3e3; cursor: pointer; transition: background .17s ease; } nav .logo-wrapper { display: block; margin-bottom: 0; text-align: center; } nav .logo-wrapper .logo { font-size: 2em; position: absolute; bottom: 0; left: 10px; } nav button.action:hover { background: #5e5e5e; } /* end nav + notebook button */

/* start starred + trash links / / nav .nav-notebooks a:nth-of-type(1):before{ content:''; width:6px; height:6px; background:#0aea4c; border-radius:100%; display:inline-block; padding:0; margin:0 10px 3px; } nav .nav-notebooks a:nth-child(2):before{ content:''; width:6px; height:6px; background:#c10808; border-radius:100%; display:inline-block; padding:0; margin:0 10px 3px; }/ / start note list edits */ .notes-list { position: sticky; top: 0; flex-shrink: 0; width: 300px; background: #f5f5f5; padding-top: 0; } .notes-list button.action { background: #e0e1df; border: 0; border-radius: 0; font-weight: 500; padding: 2em; display: block; margin: 0; width: 100%; font-size: 11px; color: #6f6f6f; cursor: pointer; transition: background .12s ease; } .notes-list button.action:hover { background: #e7e8e7; }

.notes-list a { display: block; padding: 2em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e5e6e5; letter-spacing: -.01rem; transition:background .076s ease,color .4s ease; color: #999; font-size: 0.9em; } .notes-list a.active { background: #e6e6e6; color: inherit; font-weight: 600; letter-spacing: -.01rem; } .notes-list a.starred { border-left:0; box-shadow: inset 5px 0 0 #00ff04; }

/* / / change star to thumbtack for pin note */

/* empty note list message font size + spacing */ .notes-list .empty-note-list { text-align: center; color: #999; padding: 2.5em; font-size: 1.5em; }`

https://i.imgur.com/YdedLiW.png

[xy2z]

Would like to address this again, and say that I think there should be classes for Starred Notes, and Trashed Notes so in the future you can style these easier in case you wanted to say add a tooltip or icons.

The starred notes does get the starred class, in the sidebar Trashed notes does not, but it can be done :)

Related, will there be a trash in the future for notebooks too?

I'm not sure but don't think so. Right now when you delete a notebook, all notes inside will be moved to trash. But this can of course always be changed later.. I just think it will be more confusing to have a trash for notes and a trash for notebooks... What do you think?

Also, I was thinking instead of Starred it could be Pin instead.

I personally don't agree, but this could be customized later so the user can select what they want to call it in the "user settings" if it's a problem for some. Google Drive, Dropbox, Paper, etc. all uses "Star" so I think that's what people are used to.

As far as the design changes from the image you posted, can you type exactly what you changed so I can comment on it all? Here's my thoughts so far

Buttons: I think the buttons should look more like buttons, maybe add a "plus" icon in front of the text would help?

Logo: We can put it in the bottom, but that would maybe require we had a scrollbar for the notebooks, so it will always be visible if the user has alot of notebooks, or no? I think it should be center aligned though?

Green: The green color for starred notes instead of orange. I picked orange so it matches the logo color. But this should be a user setting / theme setting so we can have alot of different (customizable) themes. For the default theme I would stay with orange since it has better contrast with the lightgrey background and matches logo and star icon color. But this will def. be a theme setting. I just don't want to focus too much on themes right now, first priority is to get a good functioning note editor, and the it can be "pimped" later :smile:

Btw good work :+1:

[calvinmorett]

Yes, a lot of my changes are subjective and not really a big deal in terms of usability.

Would it be simpler if I created new issues for individual elements instead of the overall interface? For example, Nav Design, Editor Design, Icon Design?

[xy2z]

Yes 👍

[xy2z]

Removing this from version 1 milestone - hopefully we'll get it done in the near future