Redesign the Community Page

[dennyabrain]

Overview

Redesign the community page on tattle's website to add more information about what is it like to work at Tattle.

The current webpage has our team member's names, designation and links to their profiles (linked in, website etc). We can make this page more fun. We can also add images, videos from tattle IRL work trips to it. Consider talking to current team members to collect ideas about what else can be added.

Warning

Not everyone is comfortable putting their pictures in public, so consider ways to hide faces if needed.

Some Visual Inspirations

source : https://amasty.com/blog/30-best-meet-the-team-pages-examples-and-trends/

Scope of Work

• Start with collecting ideas and inspiration for what all can go on this page and make a mock visual design in canva
• Make a prototype of it using html, css and p5.js

[Preetiaarya]

Please Assign too

[Preetiaarya]

[khushboo-102]

Please Assign too

[khushboo-102]

[dennyabrain]

@Preetiaarya @khushboo-102
Sharing this online tool for applying effects to images. See if you find it useful - https://www.tooooools.app/

[Preetiaarya]

We are designing a proof of concept of Exponent page for community page in which we will use physical sketch and duplicate face app.https://amasty.com/blog/30-best-meet-the-team-pages-examples-and-trends/
We don't know any such app right now but we are looking for it.
Our goal right now is to make a sketch of an image

[khushboo-102]

We will use the proof of concept for the Exponent page for the community page in which we will use physical sketch and duplicate face app. Right now we don't know the app to edit the image but we are searching for it. Our goal right now is to make a sketch of the image and hover it in the sketch.

[aatmanvaidya]

@Preetiaarya @khushboo-102 if I understand correctly, by a duplicate face app you mean, an app that will generate a face image and give it to you right? if that's the case while designing a proof of concept, in the first draft's don't feel the pressure to have an image using some duplicate face app.

What I mean is, say in your proof of concept design, there is a place to store the photo of a person, for time being, you can start by using a standard image/sketch of something like this

[dennyabrain]

@aatmanvaidya since the style they are going for is like a sketch of a real person, as part of the proof of concept we also want to explore if the effects they choose look good to begin with. So they are going to use their own photos to do this or photo of a public personality.

[aatmanvaidya]

@dennyabrain right makes sense, I thought that duplicate face app meant, we do some AI generated photos,
but its more like turning an existing image to the sketch style image

[Preetiaarya]

I am attaching some photos (proveOfConcept) which I have edited

[khushboo-102]

I am attaching images (proveOfConcept) which I have edited.

[khushboo-102]

[dennyabrain]

@Preetiaarya and @khushboo-102 Some suggestions

1. Use a tool to remove your image's background so that the style only applies to the person's body and not the entire picture. An example tool to use for the prototype is https://removal.ai/
2. Try to find a simple effect, so that the person is recognizable and clearly visible even after applying the effect.

A sample proof of concept with my feedback is here.

community-page-2025-01-20_17.25.35.mp4

Continue trying more.

[dennyabrain]

@Preetiaarya will try the 360i design from the link
@khushboo-102 will continue trying different filters.

[khushboo-102]

hovereffect1.mp4

hover2.mp4

I have tried these effects using p5.js. In which I have edited the image from picsart to make the sketch and I have edited the image from the phone and used https://www.fotor.com/features/background-remover/upload to remove the background.

[dennyabrain]

@khushboo-102 can you try reuploading the videos? they don't seem to be working.

[khushboo-102]

hover2.mp4

[khushboo-102]

hovereffect1.mp4

[khushboo-102]

I have sent my videos again. Can you see my videos now ?

[khushboo-102]

https://github.com/khushboo-102/CommunitypageTattle
This is my github link.

[Preetiaarya]

I made the last breakdown(card) POC of 3601. here I am attaching
their github link.https://github.com/Preetiaarya/community-page-poc-

[dennyabrain]

@Preetiaarya @khushboo-102 you can pause on this project for this week. Focus on the book. We will discuss this project later.

[dennyabrain]

Found a similar community page idea using sketches to what you all were doing earlier

https://github.com/user-attachments/assets/8b4e0968-28e1-4193-b4b0-863ee49f7a34
source : https://www.southparkcommons.com/