Need a better layout/design

[staranbeer]

Hey! i would like to work on this issue and also the pages. are there any framework/design requirements for the project?

[getify]

Thanks for volunteering, would love help!

We're intentionally avoiding/minimizing frontend tooling (frameworks, libraries) wherever possible. There are a few libraries already that were unavoidable, but we want there to be as little third-party code as possible so that auditing the behavior of the app is as straightforward as it can be. Since we're not expecting this app to be a very complex app nor are we expecting rapid and active development on different parts of the UI by different teams, I don't think we need any frameworks.

I also personally would like to avoid complicating the dev setup too much with lots of build-tools, so I don't think we should have typescript or webpack or any of that stuff involved, at least not yet (perhaps later).

I like the logo I designed, and the placement of the outer dot kind of partially off the top of the page. But other than that, I don't have any design constraints at all, except that it's a mobile-first app (rarely used on a desktop), so the design should be friendly to that. We'll need a simple nav for the basic pages:

• About
• Privacy
• Registration
• Login
• Dashboard (once logged in)

A lot of the design challenge will come once we start actually building real stuff for the controls (calendars, graphs, dashboards, etc) in the logged-in pages. I don't have a great handle on all that functionality yet, but for sure:

1. we're going to need a way to easily see ranges of dates in the future for projected/expected periods, as well as the ranges in the past for actual periods (and compared to what was projected).

2. There will also be a sort of "daily check-in" during a period (or the days leading up to it) for self-reporting any symptoms or status of the menstrual flow, etc.

Hopefully this gives us enough to get started. :)

[huynhicode]

Hi, I would like to help out as well. Thanks for setting this up.

[luisorbaiceta]

Hi everyone! I think It would be a great idea to start a Figma project before getting hands on the code. But imho this issue totally depends on #5

[prabhpreet-code]

Amazing initiative @getify ... Would love to contribute in any way I could !!

[getify]

@luisorbaiceta sounds useful, I don't know how to do that, but if you can take the lead in doing so, please do!

[prabhpreet-code]

One thing to add that shouldn't we first do some brainstorming on ideas and make a small software requirements document along with wireframes of designs and all?? I hope it could provide us a kind of a roadmap to follow...

[getify]

@prabhpreet-code absolutely, I filed a separate issue #5 on planning out features.

[staranbeer]

Hi everyone! I think It would be a great idea to start a Figma project before getting hands on the code. But imho this issue totally depends on #5

that's a good idea, i can set up a project and share the link here

[getify]

@staranbeer I think that's already been done. I saw an email invite about it just a minute ago.

[luisorbaiceta]

Already did yes. This is a view only link. If anyone is interested in editing please state so and I'll send a private invitation

[staranbeer]

Already did yes. This is a view only link. If anyone is interested in editing please state so and I'll send a private invitation

Can you share the link with me please?

[luisorbaiceta]

I sent an invitation to your email. You should be able to edit the files. The main pages have been created as written by @getify in the description of the issue

[Gynko]

I made some little tests on my own with my meager design skills, to try to start a brainstorm around the concept. I like the softer, more organic font for the logo on variant 3. I wondered also about having a darker theme, more discreet, feeling more private / shielded. Would be interesting to tryout some colors, as long as accessibility is respected of course.

Can I have an invite so I can maybe put these in the Figma project?

Will continue when I have more time :).

[luisorbaiceta]

Already did yes. This is a view only link. If anyone is interested in editing please state so and I'll send a private invitation

Access with that link and I'll change your permissions

[Gynko]

I am Yoann in the members list.

[staranbeer]

I made some little tests on my own with my meager design skills, to try to start a brainstorm around the concept. I like the softer, more organic font for the logo on variant 3. I wondered also about having a darker theme, more discreet, feeling more private / shielded. Would be interesting to tryout some colors, as long as accessibility is respected of course.

Can I have an invite so I can maybe put these in the Figma project?

Will continue when I have more time :).

i think @Gynko 's design is a good starting point, although i think we should experiment with colors and alignment a bit

[getify]

Looks like a great start!

Do we think we should have a light and dark mode theme (with a selector) or just stick to one mode?

[getify]

Also, for color selections, keep accessibility in mind, such as color contrast:

https://contrast-ratio.com/

We should strive for at least AA compliance, and in places where possible, AAA compliance.

[Gynko]

@getify

I am using the plugin "Contrast" in Figma, which tells you all about how compliant you are, whether your element is normal text, large text or a graphic asset :)

[Gynko]

Do we think we should have a light and dark mode theme (with a selector) or just stick to one mode?

As much as possible, I like the idea to have just one mode for the sake of simplicity. But we can see where the brainstorming will take us?

[Ritik-gh]

Hey, I would love to contribute on this project, I can work on the frontend the frontend part you mentioned, @getify.

[Gynko]

I added a bunch of possible inspirations on the Figma project / Graphic design | Brainstorming https://www.figma.com/file/BJZxTbsXzMPXqFD4vhvquq/Graphic-design%3A-brainstorming?node-id=0%3A1

They come from dribble, picked on the theme "health" "yoga" "meditation" and "nature". I found that they all contained one or more interesting parts, whether it was the layout, the colors, the mood, etc..

Would love to know if people have a personal favourite, and tell if possible what they liked in the image(s) they picked

[staranbeer]

i really like number 2. it's simple yet elegant and the soft color scheme kinda matches the vibe of the project

[aditiranka27]

From the inspiration board I really like number 2 and 4. For a period tracking app, I would suggest using cool and calm tones, more on the light/pastel color shades.

[aditiranka27]

Looks like a great start!

Do we think we should have a light and dark mode theme (with a selector) or just stick to one mode?

@getify For starters, we should keep light theme for MVP.

[staranbeer]

From the inspiration board I really like number 2 and 4. For a period tracking app, I would suggest using cool and calm tones, more on the light/pastel color shades.

wait is it a period tracking app or its name is just period as in the character '.' i'm confused

[aditiranka27]

From the inspiration board I really like number 2 and 4. For a period tracking app, I would suggest using cool and calm tones, more on the light/pastel color shades.

wait is it a period tracking app or its name is just period as in the character '.' i'm confused

@staranbeer : the first line of the Readme- it is a period tracking app. https://github.com/getify/youperiod.app#:~:text=yesterday-,README.md,-YouPeriod.app

[staranbeer]

i read the whole thing except the very first line i guess.... :rofl:

[artmarydotir]

If we want to add multilingual functionality later. We must consider it in the main theme now. we need a lang switcher in header.

[Gynko]

@artmarydotir Agreed :). You should mention this in the main features plan. https://github.com/getify/youperiod.app/issues/5

[ricardoaguiar]

Hi everyone That is an awesome initiative @getify. I would like to contribute to the project.

[luisorbaiceta]

@getify could you put the link in the issue description? It would be useful to add the link and then something like "This is a view only link, to contribute to the Figma project request access in the comments"

[uttej-vsk]

I made some little tests on my own with my meager design skills, to try to start a brainstorm around the concept.

I like the softer, more organic font for the logo on variant 3.

I wondered also about having a darker theme, more discreet, feeling more private / shielded. Would be interesting to tryout some colors, as long as accessibility is respected of course.

Can I have an invite so I can maybe put these in the Figma project?

Will continue when I have more time :).

I think, what we are doing is a bold move with a bit of privacy to be in control of individuals. So why can't we have a bold theme with lots of imagery which would resonate with users for expressing themselves?

[luisorbaiceta]

I have taken the references from @Gynko and started some design. I'll put it on hold till #5 is settled

[Gynko]

Like I said on the Figma workspace the designs of @luisorbaiceta are really spot on for my taste :). The colors and mood, the simplicity are really working imo. @aditiranka27 do you think that the tones work as well?

I do like the idea of boldness that @uttej-vsk mentionned. I thought of the motto: "Your body. Your data. Your choice." which probably could resonate with the strange things happening in the US at the time. What do you think @getify ?

[getify]

@luisorbaiceta good idea, can you make a PR for adding the link in the appropriate section (probably under "For Developers" or maybe a "Contributing" sub-section) of the README? :)

[getify]

On designs and graphics, lets make sure we consider inclusivity where reasonable. Not all utereus-having people identify/project publicly as women. If all the graphics show traditional representations of women-identifying individuals, this might feel a little exclusive of others who don't. Delicate balance to strike, for sure, but let's try to either be inclusive in such imagery or simply avoid imagery that is suggestive of too specific of normative identification.

[getify]

On the word "choice" (in a tagline/motto), I want to be careful not to create too much division in the hot-button "pro life" vs "pro choice" debate. I know we wouldn't mean "choice" in that sense, but it could certainly feel like that message is being sent, which I don't want.

I want for anyone on all sides of such an issue to feel comfortable using this app for any of their own personal reasons/needs, and not feel like this app is forcing them to pick or identify on such a deeply complicated issue.

So, let's avoid "choice" in particular, for now, to be more safely distanced from the division.

[getify]

I named the app "You" (not "Your") -- which grammatically is a bit more awkward for mottos, admittedly! -- with more active phrases in mind that emphasize the "You" (person) directly.

I had hoped that naming theme could carry throughout the app, not just the tagline but into feature names, etc.

For example, "For You", "You Decide", "You Own", "You Control", "Only You", etc.

In fact that's where "You Period" (besides the obvious double-meaning) came from, is like, by the end of describing the app's purpose, it comes down to "You and only you, period."

Not that we can't vary with "Your", and maybe that's indeed the way to go. But I had hoped we'd center ("marketing" wise) on specifically "You" where possible.

[Gynko]

@getify All these points make sense! I am especially looking forward to work on how we will tackle the full inclusivity aspect, and see which symbols, wording and images that we will choose. There are so wild cultural differences to take into account!

[aditiranka27]

Like I said on the Figma workspace the designs of @luisorbaiceta are really spot on for my taste :). The colors and mood, the simplicity are really working imo. @aditiranka27 do you think that the tones work as well?

I do like the idea of boldness that @uttej-vsk mentionned. I thought of the motto: "Your body. Your data. Your choice." which probably could resonate with the strange things happening in the US at the time. What do you think @getify ?

@Gynko the tones are really spot on, I really like @luisorbaiceta 's designs.

[aditiranka27]

On the word "choice" (in a tagline/motto), I want to be careful not to create too much division in the hot-button "pro life" vs "pro choice" debate. I know we wouldn't mean "choice" in that sense, but it could certainly feel like that message is being sent, which I don't want.

I want for anyone on all sides of such an issue to feel comfortable using this app for any of their own personal reasons/needs, and not feel like this app is forcing them to pick or identify on such a deeply complicated issue.

So, let's avoid "choice" in particular, for now, to be more safely distanced from the division.

I totally agree on this part, let's not get the debate started and make this app accessible for all whether pro life or pro choice.

[luisorbaiceta]

I have reached a point in which I think we can open separate issues for the different pages. Dashboard shows some stats with a calendar with basic start/end period functionality.

A proper ui state to show whether a period is currently being tracked needs to be implemented yet

[staranbeer]

hey! i think we have a decent looking ui at this point, should we start working on the markup and css for layouts or should we wait a bit more?

[staranbeer]

and are we going to use any preprocessors or any libraries ?

[artmarydotir]

I was thinking before jumping to the designing: first talk about the user flow. think about the entities /categories/ Authentication/ menu, ..... without having a flow we cant have a proper UX. It is not possible to design without proper analysis.

And Designs must be prioritized. something must design before the other things ( like a user profile ) OR setting and etc. And the dashboard should be the last thing to implement.

[uttej-vsk]

It is better if we get into the shoes of probable target audience:

They might know about this website either from social media or google search.

Once they click on the link or download this app, they must be presented with “Home Page”.

Then scroll down to find information about what exactly we are talking about.

Once they are convinced and confident about this app, they might reach out for login or more customised dashboard for themselves, where they enter:

1. Name
2. Age
3. Period date
4. Bleeding information
5. Medication
6. Side effects etc

Next, we tend to show them some cool analytics using charts to track their periods.

This is what I’m thinking. Please add on to this if this made any sense.

Regards, Uttej.

On 05-Jul-2022, at 8:10 PM, Art Mary @.***> wrote:



I was thinking before jumping to the designing: first talk about the user flow. think about the entities /categories/ Authentication/ menu, ..... without having a flow we cant have a proper UX. And Designs must be prioritized. something must design before the other things ( like a user profile ) OR setting and etc. And the dashboard should be the last thing to implement.

— Reply to this email directly, view it on GitHubhttps://github.com/getify/youperiod.app/issues/2#issuecomment-1175141059, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AT6ZF4SRHBP747JSYENG54TVSRCMPANCNFSM52RWULAA. You are receiving this because you were mentioned.Message ID: @.***>

[mendo94]

Hi Kyle! I found you on Linkedin and am beginner to intermediate level in javascript and was hoping to get better by working on your project!! I am commenting here to get the permissions.

[laurelthorburn]

Love the softer tones @luisorbaiceta's figma design offers. My first thought for overall design is there is a lot of red and when I'm on my period, I see plenty of red. @aditiranka27 made a good point on cool, calm tones. For me, I favor the greens and blues, for example, instead of an entirely red/pink color scheme.