Which one looks good ?
Which one looks good ? A or B, or maybe there's something that need to be redesign?
11 Replies
Box "A" definitely lacks contrast with black text on blue.
Also textured backgrounds behind large chunks of text is generally a bad idea.
Are you going to present us every layout and design you're planing to make here for people to tell you which one they believe looks better? Also w/o much context for the market and clients this is supposed to be used.
I recall there was something similar for a hospital site in one of your other posts.
Learn about your user base and what they typically prefer and expect to see and what fit's the market or niche of your client.
Just saying.
Okay thanks , so i want to give it article and a picture , what a good idea should i do? Without the picture to be background?
I don't have any ideas to put an image yet so I put it as a background, and that's not very interesting
definitely no bg image with that many text to read.
images and textures are ok with just one large fat headline on top.
Yours looks very 1990-ish when bg images were introduced and textures had to be everywhere 🙂
if there's going to be a photo next to this article, that should be more relevant to look at, not some texture.
You might also increase the line height a tad.
Try a more subtle level of dark blue, like a nudge darken than the page background, then you may get away with the blacktext.
Check your text and background contrast with the color picker in Chrome devtools or something like
https://www.siegemedia.com/contrast-ratio
Siege Media
Contrast Ratio - WCAG Color Contrast Checker
Check the contrast ratio between your website’s background and font colors with our free interactive tool based on WCAG guidelines.
So isn't using an image as a background any better than before?
background images are ok for posters, card headers, and things like hero images with just one large headline on top and where the image is basically "the subject" or helps to transport the message of that headline.
behind a big chunk of text like in your sample it's generally a bad idea 'cos it hurts readability. Especially with the borderline contrast ratio of these text and backround colours.
Okay, maybe do you have a idea where should i put if there's a photo on my article 🤔?
you could use the "hero image design pattern" with the heading and oneliner you have,
or keep it as is (definitely drop that background) and just make it a right floating image inside the content with the text wrapping around it. That'd turn the upper section into a two column layout: text left, photo to the right. It'd also fit the retro look of the current design.
It might depend on how and by whom the content is created and whether images ought to be added by editors from a curated pool managed within the CMS, or only appear as presentational design tokens w/o any much relation to the article (i.e. boring, free, stereotype stock images).
As a user I'm not a fan of hero images, 'cos they're usually irrelevant, way-to-large stock photos and always force me to scroll down in order to get to the content I'm actually interested in. It's a very persistent design fad.
Why not spend the weekend and skim the web for inspriration on article and (maybe) blog designs?
I sometimes click through some of these template and theme sites to look at random stuff and once in a while there's something I like and adopt or build upon to work with what I already have or believe could work for a project.
I don't see diff
Hey WebMechanic! I see you a lot talking about researching the user base... how do you go about this? Can you literally just type in Google something like "ux for <target demographic>"? I was under the impression researching a target demographic was independently done but I'm really new to this stuff
it kinda is independent, but whatever and however insights one gets helps to design a "product/service" that serves the needs of these users and potentially pleases them using/buying it. Which also pleases your client.
There's certainly content out there about different audiences and personas, so a web search might be a good start to get a broader picture. Then dive in.
There's nothing new under the sun, so always check out the competition in different media.
And don't be afraid to ask your client about their clients if you're new to their market segment.
DON'T ever ask them for their design ideas! If they give them, nod and smile. If they have a logo and an established coorporate color scheme, try to use it. It might however not always be useful for screen + mobile design. If you need to change something (i.e. shades) explain why + the benefits of that change.
It's your job to figure out how to represent them and their services once you know what their customers want, need, seek, and eventually enjoy finding on the site you're hired to create.
For example: learn if is it a more content heavy subject (health) or more fun and casual (games, holidays, sports). Should it be journalistic, have interactive content or use gamification to make contents more digestible, usable, understandable for the target audience and demographic.
If none of this does: ditch it and don't show off with your animation skills.
For a stereotypical fashion site you'd likely use some elegant type face (not Comic Sans or Courier), loads of professional photography of the products and "moods" the site wants to sell/promote. It's all about beauty so make a "beautiful site" and learn about seasonal fashion colours that might be used on the site and change whenever Cosmopolitain and Vogue say it's time to change colours... Look at Fashion Magazines.
If it's Sports: same difference. Look at Sports sites, shows and magazines. There's more "energy" involved.
Then bill them 😀
From other posts I believe this design would be part of a hospital site. So we're talking health care, patients, possibly life changing circumstances, a source to trust.
It's content heavy articles with presumably little colloquial language, so any distracting elements is not helpful (like this textured background).
People consult hospital and health case sites to get information quickly and easily. They're either sick themselves or seek information for someone they care for who is sick. Articles need to be well structured to make them scanable. Someone in a hurry or under stress doesn't have the time or nerves to read a big blob of text. Design and content architecture need to work together.
Colours should not be "loud" (red, pink) and overly saturated -- having a stress migraine or anxiety one doesn't need the screen to yell at them and stuff moving around --, but rather calming (subtle nature tones, pastels) and neutral and "clean" (white, light greys).
Greens appear to be common for healthcare sites 😉
UX is crucial, i.e. questionnaires and forms must be simple to use, use "normal language", support resuming, and w/o interrupting the task provide assistive instant access to explain terminology where required (i.e. in popups).
However, that's how I worked over the last two decades.
Wow thank you so much for the detailed answer and practical example! I appreciate it a lot 🙂 I still have a lot to learn 😂