search

holdex / holdex-venture-studio

https://holdex.io
5 stars 19 forks source link

Problem: Cover image is not displayed in the Article Hero #415

Closed predrag-us closed 1 year ago

predrag-us commented 1 year ago

Problem

We would like our articles to support a separate cover image from the content image (#369). Typically, cover images are not displayed in the content. However, we would like to leverage this new approach and display the cover image in the article hero to make the article visually pop out and be more appealing to the reader.

Please note that this implementation is valid only for articles, while the rest of the pages (e.g. For Startups, Careers...) should keep the same look as is.

Figma Design

Note: In case there's no image provided, everything stays the same, except without the image.

Figma Design ⏤ Cover Component

Updated with the Hero variation.

Figma Design ⏤ Link Component

Updated with the Subtitle variation. Also, I've defined a new text-style for Subtitle ⏤ Large.

Figma Design ⏤ AuDaCo ⏤ Hero Component

predrag-us commented 1 year ago

@markholdex

In which scenario(s) does this problem happen?

I haven't noticed this problem.

Here're a few example articles where we do have the header image, and they're displayed:

markholdex commented 1 year ago

@predrag-us you're right. I updated the description with more context to understand what we are aiming here for.

markholdex commented 1 year ago

@Snixy-Designer have a look at this Problem statement in the description. Make a local copy of our Figma file and share a link with us. Let me know if you have other question. 🙏

Snixy-Designer commented 1 year ago

Just for the record, I'm not strong in graphic design, and my creativity level for banners is too low, but If you (@markholdex ) want to see default preview images (OpenGraph imgs), for articles, when they are being shared on other resources (telegram, whatsapp, viber), I have prepared a few variants for you. https://www.figma.com/file/RbxiwvA6wBVtbEdmHj3nSj/UI-Design-(Copy-Stefan)?type=design&node-id=3207-39798&t=TpkUAQKI5OLRskah-11

Tell me if something is wrong please.

markholdex commented 1 year ago

@Snixy-Designer that was quick but, the problem and solution here is not related to designing the banners themselves. But to the fact that there are articles which don't have a cover/header image. We currently only support Article image which is part of the Article body. We imitate the cover/header image by using the Article image as the first item in the article. This is not the best solution as we want to have a dedicated Cover and Article image.

For the Cover image, we will use the OG image that we will implement in #369

Let me know if you have any question.

Snixy-Designer commented 1 year ago

@Snixy-Designer that was quick but, the problem and solution here is not related to designing the banners themselves. But to the fact that there are articles which don't have a cover/header image. We currently only support Article image which is part of the Article body. We imitate the cover/header image by using the Article image as the first item in the article. This is not the best solution as we want to have a dedicated Cover and Article image.

For the Cover image, we will use the OG image that we will implement in #369

Let me know if you have any question.

Hey Mark @markholdex , May we have a call in tg? Just for 5 mins My tg: @ciryx777

Snixy-Designer commented 1 year ago

Look, once I met the same situation on the web site of one web studio. There we have followed only two solutions:

  1. Article must have one Cover image, one header image, and one image what user can't see on the page with article, but might see it, while he's sharing art. link on other platforms. And if article have not uploaded image for share/Open graph, then open graph just must use default/placeholder img. (like I prepared)

So in this case we have designed 2-3 different size images for every article - But here may be a problem: Our backend is setted up to upload 3 images, for these 3 places or not? Our project manager says that is a good decision for SEO optim., but IDK if it is.

  1. If we have 0 images uploaded, open graph will parse default/placeholder image (like I prepared)

I can't get how else I can help here. 🤔 @markholdex

markholdex commented 1 year ago

@Snixy-Designer sorry, I'm a little to busy to have a call right now. Let's try to keep the discussion in GitHub for now.

Article must have one Cover image, one header image, and one image what user can't see on the page with article, but might see it, while he's sharing art. link on other platforms. And if article have not uploaded image for share/Open graph, then open graph just must use default/placeholder img. (like I prepared)

What you prepared is an OG image itself. Which is not required at the moment. But what the task requires is to design the place in the article where this OG will be displayed. Because right now we only have article images and we don't have any cover image.

So in this case we have designed 2-3 different size images for every article - But here may be a problem: Our backend is setted up to upload 3 images, for these 3 places or not? Our project manager says that is a good decision for SEO optim., but IDK if it is.

The way it currently works is that:

We are trying to go away from this implementation and have a dedicated OG image. Once we have a dedicated OG image support, we want to display the same OG image inside the article somewhere as a header/cover image. Does it make sense?

Snixy-Designer commented 1 year ago

https://www.figma.com/file/RbxiwvA6wBVtbEdmHj3nSj/UI-Design-(Copy-Stefan)?type=design&node-id=3225%3A39804&t=TpkUAQKI5OLRskah-1 - Easier than a banner ^^, try to take a look @markholdex

predrag-us commented 1 year ago

@Snixy-Designer Please make sure to assign yourself to your working issue. Also, make sure to move your issue to In Design when you're working on it. Thank you!

Snixy-Designer commented 1 year ago

@Snixy-Designer Please make sure to assign yourself to your working issue. Also, make sure to move your issue to In Design when you're working on it. Thank you!

Thank you for info, but it seems like I don't have permission to doing something with this Task

markholdex commented 1 year ago

@Snixy-Designer I left you comments in Figma file. Have a look. Thanks!

Snixy-Designer commented 1 year ago

.

Check please, and if you have a few min, we can make a call. Thanks Mark.

markholdex commented 1 year ago

@Snixy-Designer I left you comments. Let's keep the discussions in GitHub for now. Looking forward! 👀

@predrag-us you can also have a look from time to time. Thanks! 🙏

Snixy-Designer commented 1 year ago

UPD Hey! @markholdex, @predrag-us Now, I used as references the popular designer's blogs platforms, and made a few variants of design for one article page. Also, I found some design issues on this page:

  1. https://i2.paste.pics/10cef0ac2a59d7b8b26d1cdfb21b22a3.png - This element seems like input
  2. H1 should have MAX width as other content 604px. - https://i2.paste.pics/6e2076de4aba21d7aba2ce685f0e8ba7.png.
  3. What kind of suggestion I can tell you, if I haven't read yet the article? https://i2.paste.pics/942dc4781801aa8230aa68f7c7c63d35.png
    Why we need to see this CTA right on the first screen. I can't get the logic? I guess we need to make it in the middle, or the end, of article.
  4. Holdex actually have excessive articles, it means, that is a lot of text → lengthy scroll, and that's sad for mobile users. We can solve the situation, if element with table contents will be pinned on top, while users are scrolling page, It will simplify user navigation on page.

I interned with several designers, among them was a designer of Telegram platform, he also was a strict mentor, and he would beat me for such jambs.😅

So here is design versions: A — More work for developers B — - like in UX.pub C — - like on vc.ru

Your turn.

markholdex commented 1 year ago

Will have a look and let you know.

predrag-us commented 1 year ago

@Snixy-Designer Left you a few comments. They're not necessarily feedback on your work but you may find them helpful.

predrag-us commented 1 year ago

@Snixy-Designer

  1. I can't agree these elements are looking like inputs, although I may understand why one would think so. Can you please let us know about your perspective?
  2. Can you please elaborate on your opinion?
  3. This may be a good point. But, we've given deep thought to this and decided this is the best option for the time being.
  4. Good thinking ⏤ we had ToC pinned in the previous version of the website. But, we've got some analytics proving that only a small number of people used ToC on small devices. Therefore, we decided against this option, since it takes some valuable real estate, with barely anyone using it.

Thank you for your feedback and feel free to continue. We're not claiming we've nailed everything, therefore there's always room for improvement. 👍

Snixy-Designer commented 1 year ago

@predrag-us Thank you for your time, i really appreciate that.

  1. I swear, I wanted just to click on this "Input", enter some text, and just after to press on Edit article. Also many times users may see on other websites bad UX text in btns, so this is why, text "Edit article" didn't changed my plan to enter something in that "Input" . Maybe https://i2.paste.pics/077734ec5b2f67cc1e724b903e3336ba.png or also it's enough to make text bolder image

  2. Already did in figma - look at screenshot

  3. Well, if you already decided about this moment - Good for you )

  4. Analytics it's a good think, I like it))

Well.

@predrag-us I guess you don't wanna see on the list of articles page one image , and when we are going to one article page, you wanna see other image from OG (In case that for OG was setted another one). - It may confuse user.

And tell me please what do you think about this one,

I can't present to you other examples, because I making only those things, for that I'm sure, it will be convenient for the user, since, unfortunately, the project does not always have enough time for experiments.

predrag-us commented 1 year ago
  1. I understand your concern and you're probably not alone, but you have to be aware there's no perfect UX. There will always be a group of people that don't agree with the specific UX, and that's fine. The goal is not to satisfy anyone, because that's impossible. The goal is to satisfy the majority.
  2. I'm aware of the solution, but that's not what I asked for. My question was ⏤ why do you think the title should be the width of the container?

I guess you don't wanna see on the list of articles page one image , and when we are going to one article page, you wanna see other image from OG (In case that for OG was setted another one). - It may confuse user.

I believe I saw comments in Figma of Mark explaining to you how the system works on this point. Don't worry about it and focus on your issue.

And tell me please what do you think about this one,

You already proposed a similar solution and got your feedback from Mark.

My suggestion for you is to keep iterating by thinking out of the box but without manipulating other elements unless you have to in order to achieve your goal.

Hope this helps and I'm looking forward to your next iterations! 👍

Snixy-Designer commented 1 year ago

@predrag-us

  1. Consistency: By aligning the title's width with the container, you establish a consistent visual structure throughout your interface. This can create a sense of harmony and order, making it easier for users to scan and understand the content.

Aesthetics and Balance: Aligning the title with the container width can create a visually pleasing and balanced composition. It eliminates the potential for uneven spacing or awkward gaps that might occur when the title has an arbitrary width.

I thought it's a base 🤔, and that you as a designer should know about that. 🙂 But it's okay. Thanks.

markholdex commented 1 year ago

@Snixy-Designer we MUST keep our discussion here focused on the current Problem statement and the Solution only. If you noticed any real Problems on our website, report them as separate Problem issues. Thank you!

I wanted to review your work but for now, I'm blocked. I left you comments in Figma. https://www.figma.com/file/RbxiwvA6wBVtbEdmHj3nSj?node-id=3253:43131&mode=design#479429171

Snixy-Designer commented 1 year ago

In conformance with your guidelines, I want to add to this task tag #HELP, I guess here we need a Senior look.
Just assign me to another task, because here I'm wasting time, guys.

Sry, it was for @markholdex
I guess you don't wanna see on the list of articles page one image , and when we are going to one article page, you wanna see other image (from OG) - It may confuse user.

markholdex commented 1 year ago

@Snixy-Designer

In conformance with your guidelines, I want to add to this task tag #HELP, I guess here we need a Senior look. Just assign me to another task, because here I'm wasting time, guys.

Didn't understand your reply here. Did you got what I wanted to say in the comments I left in Figma? What about the Problem statement, is it clear? Because I can't see anything in the Figma file and the previous screens seem to be deleted.

I guess you don't wanna see on the list of articles page one image , and when we are going to one article page, you wanna see other image (from OG) - It may confuse user.

You're right, it will be confusing. But no one asked to display a different image (vs OG image) inside the article.

Snixy-Designer commented 1 year ago

@Snixy-Designer

In conformance with your guidelines, I want to add to this task tag #HELP, I guess here we need a Senior look. Just assign me to another task, because here I'm wasting time, guys.

Didn't understand your reply here. Did you got what I wanted to say in the comments I left in Figma? What about the Problem statement, is it clear? Because I can't see anything in the Figma file and the previous screens seem to be deleted.

I guess you don't wanna see on the list of articles page one image , and when we are going to one article page, you wanna see other image (from OG) - It may confuse user.

You're right, it will be confusing. But no one asked to display a different image (vs OG image) inside the article.

Sry, I didn't get it, actually that's weirdness task.

predrag-us commented 1 year ago

@markholdex

Please check the description ⏤ I would appreciate your opinion on this one.

Thank you!

markholdex commented 1 year ago

@predrag-us looks good. as agreed, let's try with more vibrant images to test and maybe fix the contrast issues.

predrag-us commented 1 year ago

@markholdex Done, as agreed. Please have a look. Although it isn't the most sparkling, my vote goes to the simplest solution. A few reasons:

markholdex commented 1 year ago

@zolotokrylin would also love your input here. I have my own preferences but would like more opinions.

zolotokrylin commented 1 year ago

@predrag-us @markholdex I think the problem statement is not correct here. Why are we worrying about OG image being displayed in header? Originally, the problem is that we actually need to put in the thread body the image, so it displays as OG. While what we actually want is to have an OG image that is custom and is not displayed in the article.

If we are solving here another problem which is "header is visually boring and doesn't entertain the eye" then it is not related to the OG image. Unless, we want to take the header background and take the title of the thread and generate the OG image programmatically https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

So let's agree here, what problem are we solving within this issue?

markholdex commented 1 year ago

@zolotokrylin I was looking for this one: "header is visually boring and doesn't entertain the eye". because I wanted to create more emotional impact as part of our website upgrade.

Because we have a dedicated Problem for the first one.

zolotokrylin commented 1 year ago

@markholdex I agree with the problem statement, but the title of this issue is confusing then.

zolotokrylin commented 1 year ago

OG image and header image are not the same things

zolotokrylin commented 1 year ago

@markholdex I agree with Predrag points here: https://github.com/holdex/holdex-venture-studio/issues/415#issuecomment-1614531206 No matter how much I would love to see the background behind the text (title), but I think it will bring a lot of problems.

What's your idea you were thinking about?

@predrag-us I left few comments in figma

surajsharma commented 1 year ago

log: the way things currently are, there needs to be an identifier with the cover image as such. otherwise it is hard to tell which message block is to be interpreted as a cover image.

that is, unless i am to interpret message blocks as a linear stream wherein, if the first block is image, it is to be treated as the cover, which is the assumption i am continuing with.

surajsharma commented 1 year ago

log: although here i have provisioned for the hero image, the assumption is that, at least going foward, any google doc wanting a cover image, has for its first block, the url of said image.

in the absence of an image, it is assumed that there is no hero in this article, thus no image is rendered

cc @predrag-us @zolotokrylin

surajsharma commented 1 year ago

log: unassigned myself from here to move to higher priority #317 please feel free to talk to me about progress here

markholdex commented 1 year ago

move to: https://github.com/holdex/holdex-venture-studio/issues/526