UI Design

[davcortez]

I’m wondering how to approach the UI design for the entire site. I was looking at the Figma, but the design doesn’t cover many aspects. What about responsive design? It’s worth thinking in a mobile-first way.

@nsandoya @IvanM9

[nsandoya]

Hi @davcortez ,

I understand and share your concerns. I'd like to share with you a redesign I was working on early in the morning, based on our current website and the volunteer's proposal shared with the group a couple of days ago:

• New prototype: https://www.figma.com/proto/x7GTNPvqJwtyzjfKX5NqH9/ECinTech?node-id=431-13687&t=sCOgDXjo3cLo8kHR-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1
• Volunteer's proposal: You can find the link in the core group chat

Meanwhile, it would be great to know:

• Which design aspects are not covered in the prototype?
• What core concepts do you want to materialize in the website through design? What is the idea you want to convey to the public? (Can we use the core concepts I've just share with you in my last PR?)
• Does the new prototype mean any progress in that?

About mobile:
I have some ideas about it. I hope to work on some wireframes tomorrow, early in the morning (power outage is approaching).

Thank you for sharing your thoughts, and your patience and support during these hard days 🌱

[davcortez]

The Communities page should use a grid design, meaning everything should be aligned. You should avoid centering two items at the beginning and placing the others below. I’m referring to consistency— all team members should be placed next to each other, and the layout should adjust properly for smaller screens.

[nsandoya]

The Communities page should use a grid design, meaning everything should be aligned. You should avoid centering two items at the beginning and placing the others below. I’m referring to consistency— all team members should be placed next to each other, and the layout should adjust properly for smaller screens.

Hi @davcortez

Thank you for your feedback and recommendations 🌱

I’ve taken the mobile-first approach into account while working on the UI design, particularly for the community landing page and event landing page.

Here are some updates:

• Community Landing Page: I’ve focused on ensuring that core interactions are intuitive and content is accessible on smaller screens.
• Event Landing Page: While I’ve implemented the mobile-first framework, I believe the header section (event info) still needs improvement. It would be great to hear your thoughts on this and explore ideas for refining it further.

Feel free to check the current progress here (you can tap on an event icon to navigate to community landing page, and vice versa): https://www.figma.com/proto/x7GTNPvqJwtyzjfKX5NqH9/ECinTech?node-id=446-2588&node-type=frame&t=jL9w1FVUKH66gKk9-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

Feedback is always welcome 🙂

[nsandoya]

Which design aspects are not covered in the prototype? The event card component and the communities card. The communities card should include a small logo. I don’t think it’s a good idea for it to look like the current one.

About this topic:

What do you think about this idea @davcortez ?: https://www.figma.com/proto/x7GTNPvqJwtyzjfKX5NqH9/ECinTech?node-id=431-13837&node-type=frame&t=79pGwQF9S9PBu09N-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

[davcortez]

@nsandoya

I was thinking of something like this.

[nsandoya]

@nsandoya I was thinking of something like this.

Hi @davcortez ,
Maybe we can merge the simplicity of CoDeAr reference, and some of our own style elements (drop shadow, rounded corners...). This way, we can complement communities communication efforts through design, aiming to convey better what are their core themes and values.

What do you think about these ideas? :

[davcortez]

I like this one. I would like to see the tags included to make filtering easier for users. @nsandoya

[nsandoya]

Here's a new card variant --tags included :) @davcortez

[nsandoya]

I’m wondering how to approach the UI design for the entire site. I was looking at the Figma, but the design doesn’t cover many aspects. What about responsive design? It’s worth thinking in a mobile-first way.

@nsandoya @IvanM9

Hello @bjgavilanes @davcortez @IvanM9 ,

I hope you're doing well. Over the weekend, I worked on the website design mockups, and I wanted to share my progress with you. Due to time constraints, the mobile and desktop versions (both part of a sole responsive design) are still in separate mockups:

• Desktop mockup
• Mobile mockup

I apologize for not having them fully integrated yet, but I wanted to make sure you could review the current progress. Feedback is always welcome 🙂

Thank you!,
Nataly