Style Tiles

[mushon]

Hi Poli,
These are overall looking good. I think you guys did a good job with rapid prototyping and you're well on track towards a streamlined interaction. I think it would be worth spending some time on a slightly more precise visual design. In fact I think the look and feel of the interface haven't been getting enough attention and I'd like to see you figuring them out now. I would recommend you create 2 or 3 Style Tiles to try a few graphic directions. Try to build the style tiles around the interface elements you will need, let's say:

• app icon
• interaction icon
• list item
• text element
• color palette
• buttons
• keywords

This would help us make sure the design is as good as it can possibly be. Especially now that we see quite nice progress on the code.

Please post the style tiles here on Github as responses to this issue. Please also try to solicit some design feedback from your team mates.

Cheers,
M.

[polinekes]

[polinekes]

[goldido87]

Looks good to me

[yelmam]

Looks awesome

[eranaltay]

Wow it's great!!!

[goldido87]

@polinekes can you tell me what font did you used for the recording name and time ?
Thanks.

[polinekes]

@goldido87
depends which style we gonna use
choice 1 is aviner
choice 2 is Caecilia

[polinekes]

@yelmam
@eranaltay
@mushon

[mushon]

Before I respond I would like to see what the group thinks. Beyond that, I would be happy if @polinekes could explain briefly what led to each of the options and what are the difference between what she tried to achieve for each. That's usually done by combining keywords with each version that communicates what values each option is trying to emphasize.

[polinekes]

[mushon]

Thanks!
What say you?

[polinekes]

lets let the boys choose

[yelmam]

The first choice looks better in my opinion, it has higher contrast, the text is more pleasent to read. The second option also looks great but I think that generally yellow is less readable on white background.

[goldido87]

I also prefer the first choice, looks cleaner and more professional.

[eranaltay]

the first one is nice, good job poly 💯

[polinekes]

@mushon anything to add? before i send the pngs to the guys?

[mushon]

I agree option 1 is better than the second.
I would suggest:

• pack the three options (share, edit, delete) into a chevron button (like a > pointing down). It would clean things up and make more sense
• the attachment icon is not the right metaphor for the note. How about a speech bubble, or a note?
• try to make sure the colors communicate a consistent thing rather than be randomly distributed. Think about interaction color, active color, emphasis color and so on…
• maintain a typographic hierarchy with a limited list of styles, weights and sizes.
• start working on a web page for the extension (make a separate issue for that)
• later (nice to have): Try to think what would best help identify each of the recordings beyond the title, screenshot and date. I recommended the scrub interaction to quickly run through the timeline as you move your mouse along horizontally.

Keep up the good work and good luck!

[yelmam]

Hey Poli,

I am working on recording icons, please send the following images:
-screenshot icon
-take note icon

Thanks!

[polinekes]

sending updated files the all 3 of u

-19*19 icon

• player
• sticky note
• extension window
  @goldido87
  @yelmam
  @eranaltay

[yelmam]

Which font should we use for notes dialogue?

[polinekes]

logo last update

hi guys pls use thr new logo
@yuvadm @goldido87 @eranaltay