/r/web_design

Photograph via snooOG

Web Design

/r/web_design is the place for exploration and discovery of all things web design, development and the life cycle of the web designer. We welcome beginners and veterans alike to contribute useful and informative posts, ask questions or engage in discussion.

Posting Guidelines

Review our posting guidelines before submitting new content.

/r/web_design

899,795 Subscribers

1

Best Tool for A/B Testing?

Been out of the game for a few years. What’s the best way to split test landing pages, overall site design and individual elements?

Free is good but not required. I read that Google’s optimize is going away- is that still a good option for now? Optimizely? Can analytics do anything?

Thank you!

5 Comments
2024/11/10
20:24 UTC

7

Can some tell me how to achieve this affect with text(image is behind some text and the text on top of the image is a different color than the text that is not covering the image)

https://preview.redd.it/b5agj60umxzd1.png?width=1170&format=png&auto=webp&s=476acfe6b71bacbce695063a9c7b95b83ca70b47

Pretty much the title, how is this done? Is it done with css only or is some JS added?

10 Comments
2024/11/09
20:08 UTC

52

After months of procrastination, I've finally finished my portfolio

22 Comments
2024/11/09
19:47 UTC

0

Dynamic QR code question

So many website are using the terms Static QR codes and Dynamic QR codes. I can’t change the destination for a static QR code after it’s created but I can change the destination for dynamic QR codes.

The more I look into this, it just seems like Dynamic QR codes are just the same as static QR codes, the only difference is that dynamic QR codes are attached to a redirect url. So when the customer changes the destination of the dynamic QR code, it’s just changing the destination of the redirect url; am I understanding it correctly?

8 Comments
2024/11/09
14:06 UTC

1

Need Design Help for My Family Tree Website!

Hey everyone! I'm working on a personal project—a family tree website—and I could really use your help to make it look amazing!

The concept is simple: it's a platform where admin users can add pictures and share the stories of their family members and ancestors. I've attached a screenshot of the current design, but I feel like it could be a lot more visually appealing.

Here's how it works:

  • The first card at the top shows the selected member with their name, date, and story—essentially, it's the focus card when you click on someone.
  • The other cards (with the 'on sale' pill tag) represent related family members like parents, siblings, or children.
  • You can click on any of these related cards to select a new member, and their details will be displayed at the top.

I want this to feel warm, engaging, and easy to explore—something that truly honors family stories.

If you have any ideas, inspiration, or suggestions for how I can make this website look beautiful, I'd love to hear from you!

Any design mockups, thoughts, or even feedback would be incredibly appreciated. Thanks in advance for helping make this project special!

https://preview.redd.it/d5y2edhqtvzd1.png?width=1080&format=png&auto=webp&s=1aa5e76744bc37cee403ea49d7c6ab6db1ad6866

1 Comment
2024/11/09
13:59 UTC

0

Trying to find a base template similar to this website

All,

I am trying to find a base template similar to this website that I can then build out from. Does anyone know where I can find one. So far my google searches have come back with no help :-/

https://preview.redd.it/s6nai4cukqzd1.png?width=1906&format=png&auto=webp&s=ba840dfbbe358390d1f4d5a8214c9118e6785051

https://www.lovettcommercial.com/

6 Comments
2024/11/08
20:20 UTC

44

Website design for Architecture Firm. Revamp this site but Passion project. What do you think?

26 Comments
2024/11/08
19:02 UTC

8

Stylescapes in Product design

Hello all,

I would love to know if some of you use stylescapes for presenting design directions for clients when designing a digital product (Web or App). I have seen them used for branding but not necessarily for product design and I would love to see how you guys exploit stylescapes for this purpose !

If however you don't use stylescapes, I guess moodboards are also welcome, I want an idea of how people present design decisions for product design.

9 Comments
2024/11/08
12:24 UTC

0

Hello there im a noob and want your opinion

So im running a web shop for my products in Japan. Im making chocolate and as you can see im not an expert and im running ads on Meta ( Instagram and Facebook). Ads lead to my website and i want to improve it but don't know what would be wrong because im new to this. website is chocoforest.jp

10 Comments
2024/11/08
11:12 UTC

5

Beginner Questions

If you're new to web design and would like to ask experienced and professional web designers a question, please post below. Before asking, please follow the etiquette below and review our FAQ to ensure that this question has not already been answered. Finally, consider joining our Discord community. Gain coveted roles by helping out others!

Etiquette

  • Remember, that questions that have context and are clear and specific generally are answered while broad, sweeping questions are generally ignored.
  • Be polite and consider upvoting helpful responses.
  • If you can answer questions, take a few minutes to help others out as you ask others to help you.

Also, join our partnered Discord!

2 Comments
2024/11/08
11:00 UTC

6

Feedback Thread

Our weekly thread is the place to solicit feedback for your creations. Requests for critiques or feedback outside of this thread are against our community guidelines. Additionally, please be sure that you're posting in good-faith. Attempting to circumvent self-promotion or commercial solicitation guidelines will result in a ban.

Feedback Requestors

Please use the following format:

URL:

Purpose:

Technologies Used:

Feedback Requested: (e.g. general, usability, code review, or specific element)

Comments:

Post your site along with your stack and technologies used and receive feedback from the community. Please refrain from just posting a link and instead give us a bit of a background about your creation.

Feel free to request general feedback or specify feedback in a certain area like user experience, usability, design, or code review.

Feedback Providers

  • Please post constructive feedback. Simply saying, "That's good" or "That's bad" is useless feedback. Explain why.
  • Consider providing concrete feedback about the problem rather than the solution. Saying, "get rid of red buttons" doesn't explain the problem. Saying "your site's success message being red makes me think it's an error" provides the problem. From there, suggest solutions.
  • Be specific. Vague feedback rarely helps.
  • Again, focus on why.
  • Always be respectful

Template Markup

**URL**:
**Purpose**:
**Technologies Used**:
**Feedback Requested**:
**Comments**:

Also, join our partnered Discord!

7 Comments
2024/11/08
11:00 UTC

0

How do I make this (the greatest website i've ever seen)?

I'm making a website for myself and I stumbled upon a really creative site:

https://dotby.jp/

I want to copy the crazy animations. But when I look at the code it's just one giant js -file. I have limited understanding of javascript, but this file seems crazy to me. Is there a way to just copy a snippet where the animation is?

48 Comments
2024/11/08
08:15 UTC

63

Roasting myself for the stupid “scale for big monitors” CSS code I wrote 6 years ago

In 2016, I saw someone writing a kiosk mode web application. He connected a big ass touch-screen monitor to his dev machine and, of course, we browsed the web.

Man, many websites looked so tiny.

2 years later, I thought I'm clever and wrote this for one of my websites:

:root {
    font-size: 16px;
}

u/media screen and (min-width: 1024px) {
    :root {
        font-size: calc(16px + 1.33 * (100vw - 1024px) / 1024);
    }
}

Smart solution. Smart for the very common case of someone connecting to a big-ass monitor and not changing any font sizes or zoom factor in his browser.

Yes, that's the stupid part: Whoever uses big monitors knows to change the browser settings to make most websites readable.

I'm in the middle of a redesign and copied some old code without thinking. Looked at it again and felt embarrassed.

39 Comments
2024/11/07
16:14 UTC

0

I earned $1000 by selling website design templates built in Framer, here's my story!

Hi, I’m Erfan, a UI/UX designer with over a decade of experience, and I recently embarked on a new adventure with Framer. I started learning Framer in April 2024 to build and sell templates, and it’s been an exciting journey!

Here’s how I reached my first $1,000 in sales—and my plan for reaching the next one within this month (November).

### Getting Started with Framer

The initial challenge was steep. I had to learn Framer from scratch, build a template that met the platform's standards, and get it approved in the official marketplace. That process took about two months—learning, iterating, and refining until my first template ClayAI was finally ready and approved.

### Leveraging Social Media for Early Sales

Before my first template was even approved in Framer’s marketplace, I began sharing my journey on my personal Twitter (X). The response was amazing! I received multiple sales just from the posts I made, which motivated me to push harder and create even more templates. The community’s response showed me the power of marketing, even before a product is officially available.

### Launching My Own Template Store: Pentaclay

Fast forward to the last week, I took a big step and launched my own Framer template store, Pentaclay. This gives me full control over my products and allows me to offer unique perks, like an **All-Templates Lifetime Access** plan. Now, customers can access every template in the collection with a single purchase, which has been a game-changer for driving new sales.

### Building a Template Collection and Expanding Categories

I currently have a collection of **7 premium templates** on Pentaclay, with 15 more designs ready for launch. My goal is to add two new templates each month, covering a wide range of categories, including SaaS, AI, service-based businesses, directories, portfolios, and agencies. I aim to make Pentaclay a go-to destination for high-quality Framer templates across industries.

### Hitting $1,000 in Sales and Planning for the Next Milestone

https://preview.redd.it/3iebeqkbsgzd1.jpg?width=1199&format=pjpg&auto=webp&s=3886fe4f52d41f7354310503b8dccf1277f2aced

Just three days ago, I hit my first $1,000 milestone! Now, I’m aiming to reach $2,000 in sales by the end of November. To make this happen, I’ve planned a **360-degree marketing strategy** that includes social media, partnerships, content marketing, and more.

I’ll be around for the next 12 hours to answer any questions—let’s chat!

11 Comments
2024/11/07
12:44 UTC

6

Roast my bookshelf design

I built a responsive bookshelf: https://www.dianguo.info/bookshelf

I really like the hollow, digital book shelf I've built, but how can I improve it?

Any suggestion is welcome.

39 Comments
2024/11/07
11:57 UTC

3

need to update my site - mostly video clips of my work - Blocs or Rapidweaver? (OSX) Any pro's I can hire at reasonable cost?

I have an older website I built in Rapidweaver (MacOS) that I would love to update. My skills are rudimentary, but I know some very basic HTML for titles and embedding clips hosted on Vimeo. I'm not opposed to hiring someone to make me a new site, but as I add new clips, descriptions, etc, I need to be able to update it myself.

Should I consider switching over to blocs? I have found very few people that use Rapidweaver.

Thoughts?

8 Comments
2024/11/07
04:56 UTC

1

I am really struggling to layout this screen - please help

The flight table scrolls to the right and the airline names become acronyms to give the flight details more room. I'm happy with how that looks. I'd also like to limit the information on screen to what is there now.

It's everything outside of that I'm stuck on. Do I need to put the dates and times into cards?

What does it need? Please help. I have a designer who helps me build things in Figma, but the ideas really need to come from me.

https://preview.redd.it/fwgtdmrg79zd1.png?width=405&format=png&auto=webp&s=c41da6fa4969a77c2eebb5e7d1c9278e1794d324

4 Comments
2024/11/06
10:03 UTC

20

How do I learn to create beautiful web animations?

Hey, r/web_design. I've been learning to create and design websites for over a year now, and I think I've become all right at it. Whenever I make a new website, I wireframe it on Figma, consider things like the color scheme and whatnot, and then program it out. However, all of my websites have been pretty "static," almost lifeless. Every now and then, I'll add some "fade in" component or little scale on hover—but nothing more.

My question is, where can I learn how to start building nicer websites with nicer animations? I'm talking more than the simple scale, transition, transform, etc. Stuff like as you scroll, text changes, and images transform. I've also seen websites where as you scroll down, there's like an "explainer" that's moving alongside the scroll - which I've always wanted to learn how to do. Basically, animations that make landing pages much nicer and just something for me to improve on my skills.

Thank you! I hope I'm making sense 😅

14 Comments
2024/11/06
02:14 UTC

0

Looking for well-designed auto parts e-commerce sites for inspiration

Hey everyone!

I've been searching for inspiration for an auto parts website project, and I'm honestly surprised how difficult it is to find well-designed examples in this niche. Most sites I've found are either cluttered or seem stuck in the early 2000s design-wise.

I'm specifically looking for real-world examples, not templates from ThemeForest or Template Monster. I want to see how actual businesses handle their product presentations, real product photos, and the overall user experience. Stock photos and template designs don't really show how these sites work with actual inventory. The main challenge I'm facing is finding sites that maintain a clean, professional look while handling thousands of products. It seems like many auto parts websites sacrifice design quality for functionality, but I believe we can have both.

Has anyone come across any auto parts e-commerce sites that actually look good and work well? Would love to see some examples that successfully balance aesthetics with functionality.

Thanks in advance!

7 Comments
2024/11/05
21:14 UTC

1

How much would a Wordpress website redesign cost, UK? And how to find someone!

Hi, I am looking for someone who can help me with my Wordpress website. It's already functional, and simple, and I made it myself with a theme. But I'd like to update it and sort out a load of stuff.

ideally I'd like someone who can work with me on the redesign and then once it's done be there when I need for any changes

Is there a daily/hourly rate you'd expect for something like this in UK? Is it worth working with someone from abroad who could do it cheaper

in either case, how would I find someone suitable?

Also, I'm currently using Vimeo for embedding all my videos (I'm a videographer), but it's expensive now and gone downhill. I'm looking using something like Bunny.net but don't really understand it!

Any advice would be great,thanks

47 Comments
2024/11/05
17:46 UTC

0

Wtf?? $250 to renew? What should I do?

I made my simple website using Godaddy a long time ago. It wasn't even close to this amount. I didn't expect they would ask this much to renew. What should I do? Do I have other options?

If I use a similar website builder to make my site again what do you recommend when it comes to flexibility & affordability?

30 Comments
2024/11/05
15:37 UTC

11

I spent an hour on this redesign, not very satisfied

What would you have done differently?

Before

After

36 Comments
2024/11/05
14:03 UTC

0

What's the deal with cookies?

Why do they all look kind of ugly? Genuinely curious on why they take up so much space and look clunky on most sites. I'm sure EU has some regulations, but do they apply to the aesthetics?

8 Comments
2024/11/05
13:58 UTC

Back To Top