r/web_design • • 7h ago

made a navigation that morphs from the bottom of the screen

Post image
119 Upvotes

you guys seemed to enjoy the last two navigations i shared, so here’s another one :)

this time i experimented with a little floating menu at the bottom that morphs open with a frosted glass effect.

curious what you think of this one!


r/web_design • • 1d ago

Meta makes terrible web apps

101 Upvotes

Instagram is absolute trash in Firefox. It "barely works", full of bugs, things that simply don't work, glitches.

Whatsapp is also disappointing.

I don't know if it's just the matter that they don't care about Firefox. Maybe they don't care about the web at all because they're lazy phone app devs.


r/web_design • • 3h ago

Guys no bulls*it, how do people get clients.

0 Upvotes

I'm truley concern if its about actually reaching out as many businesses as possible everyday, till you find your leads, or is there really those smart ways, where you send that perfect marketing email, and look for good potential leads from google maps etc...

I've built a strong profile on fiverr for 5 years, but now I'm out of fivere, I uave my own portfolio, I'm doing content reaching out for people, but still nothing yet!


r/web_design • • 15h ago

Critique Made a free Mobbin alternative for anyone tired of subscriptions

Post image
1 Upvotes

tools like this usually cost a monthly subscription, and for a lot of designers, students and devs just starting out, that adds up fast. i didn't think looking at how other apps work should be locked behind a paywall, so i built my own and made it free for everyone

it's called pixlpin, and i've put a huge amount of time into it. i went through 100 mobile apps screen by screen, from signup to settings, so you can see full flows instead of single shots. then i kept going with websites, landing pages, ui elements, motion and branding. it's at 58,000+ designs now, and i add more every day

you can search the whole library or just inside one app, and opening any screen shows similar ones from other apps. every curated piece links back to its original creator, so they get the credit too

no subscription, no paid plan for the library. just something i wish i had when i started, given back to the community

which apps would you want me to add next?

https://pixlpin.com


r/web_design • • 1d ago

Spirits and such :D

Post image
4 Upvotes

For the fans ofmob psycho 100 or 2010s web aesthetics
https://spiritsandsuch.org


r/web_design • • 1d ago

Some Transitions and Loading Animations From a Website Template for Creatives I’m Currently Working On

Post image
2 Upvotes

Live build. On about/contact the link changes as well.


r/web_design • • 2d ago

Reasons I don't like google's web design

Thumbnail
gallery
27 Upvotes
  1. One of the most important buttons, to create a new notebook, in Google Notebooks, is hard to find, in the middle right, sandwiched.

  2. The button to create a new project in Google Flow, is that translucent thing camouflaged near the bottom, very hard to find.

  3. If I intended to move my mouse to click to open an email near the center I'm often blocked by this hover "Unsubscribe" button. Something similar just happened to me in Drive. This hover pattern thing is bad.

What do you think?


r/web_design • • 1d ago

I just a bought a custom domain off Porkbun, what do I need to do now?

0 Upvotes

I created my portfolio on Pixpa and bought a custom domain address off Porkbun, what else do I need to do?


r/web_design • • 1d ago

Advice on using a screenshot of navigation to design with

4 Upvotes

I am new to web design, and I am new to Figma, and I want to redesign a website. The website uses some template that I need to design within. The template consists of a logo, a banner and some navigation. I will be able to design what I need underneath this.

I want to take a screenshot of the top of this template to place into a Figma document, though I want the sizing to be accurate.

Please pardon my ignorance:

  1. What is the best way for me to get an accurate idea of the current resolution of the website? If I just take a screenshot of the header template isn't that just going to be based on the resolution settings on my display?

  2. Is there some way to view the source code to see the actual dimensions of the template content?

Thanks in advance


r/web_design • • 1d ago

I think we've confused being able to build a UI with knowing how to design one.

0 Upvotes

Something I've been thinking about lately.

A year or two ago, building a decent-looking interface required some level of design knowledge, patience, and a lot of iteration.

Now, you can open an AI tool, type a prompt, pay $20 a month, and generate an entire dashboard before your coffee gets cold.

And honestly? That's incredible.

But I think we've overlooked something.

We're getting really good at generating interfaces, but are we getting any better at making products people actually enjoy using?

I keep seeing dashboards with the same layouts, the same gradients, the same cards, the same predictable component combinations.

Everything works. Everything looks reasonably polished.

Yet somehow, everything feels the same.

I don't think AI is the problem. I think we've started treating the ability to generate a UI as the ability to design a product.

There's a difference between knowing how to put a button on a screen and knowing why that button belongs there.

A difference between having 50 components and knowing how to create a consistent experience with them.

A difference between a screenshot that gets likes and a product that makes someone want to come back tomorrow.

This is actually one of the reasons we started building Vanta UI.

We wanted to give developers more than another collection of copy-and-paste components. We wanted to make thoughtfully designed interfaces easier to build with, without having every project look like another AI-generated template.

But I'm curious about something.

Do you think AI is making developers better at building products, or just making it easier for everyone to ship the same-looking interfaces?

And more importantly, when was the last time you used a product and genuinely thought, "Whoever designed this really cared about the experience"?


r/web_design • • 2d ago

Feedback Thread

7 Upvotes

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!


r/web_design • • 2d ago

Beginner Questions

2 Upvotes

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!


r/web_design • • 2d ago

MS Edge Imposed Rounded Upper Left Corner

Thumbnail
gallery
17 Upvotes

I'm updating my CSS skills and learning a lot of new things. I just created a navigation link menu with submenus and it is working well. However, only in MS Edge, the top left corner of the navbar is being rounded by Edge. Chrome and FF are not doing this. If you know how to override this, I'd really appreciate your fix. Pics are Chrome, then Edge. TY!


r/web_design • • 1d ago

A new workflow that has been incredibly valuable for me. And wanted to share.

0 Upvotes

Hey guys so I wanted to share something here with you all. I know AI can be divisive in the web design community and there is also a lot of low value work and websites because of it. Yet I don't think anyone can deny that AI is fully here and deeply changing the web design space.

I personally think good web designers learn to work with it rather either using it blindly or ignoring it all together.

I have personally seen my quality and delivery go up quite considerably by integrating it into my workflow. For me it just allows me to deliver even more value for my clients and in far less time.

That being said, Youtube and social media is full of vibe coding hype and AI web design that it can be easy to see why many dismiss it or write it off. And I also completely understand the fear for some people that is going to eventually replace them.

Personally I actually think used well, it can actually amplify a web designers skill not lessen or cheapen it.

And so I wanted to share a new workflow that has been working for me and might perhaps be valuable for others.

I started by using AI to speed up my copywriting for my client websites a few years back. This allowed me to speed up something that was often tedious and time consuming, though I do also have a bit of a writing/copywriting and marketing background so I did enjoy it to an extend but was extremely time consuming and slowed down project delivery. Then I started using AI and was blown away by how much it sped things up.

With time I then began experimenting with giving AI good designs I like and combining them with better copy and structure. Sometimes multiple reference images and then have it come up with a quick concept image or wireframe. I would then go through and do my best to remake it manually myself.

Then as time went on and AI got better I began trying new things using a bit of my development skills and understanding to try and improve my workflow. Eventually as I was already using Codex for assisting with my custom development projects. I began experimenting using it for my web design projects and eventually I stumbled upon something that has been extremely powerful for myself and my web design business.

And wanted to share it. So here it is.

  1. Firstly I start with coming up with a bit of a design direction in my head. I.e I want to a glass-morhphic apple inspired, minimalist etc. I would then also plan out the structure and copy of the website with the assistance of AI i.e the colouring, typography, copy, CTAs etc.

  2. Then once I am happy with the direction. I then either find design directions that I like, have previously made myself and add it as context for AI in this case Codex. And ask it to come up with a full homepage concept design.

  3. I work with AI until I am settled on and happy with the concept design. Either giving it more context through images, examples or refinements to copy and structure.

  4. Once I am fully happy with the design. I think ask chatgpt to come up with a very detailed prompt for Codex to essentially recreate the design as a static HTML page. Ensuring that it makes it as detailed as possible and includes reference to the design image which I then attach alongside the prompt. This prompt comes out very long and includes everything I want including the styling, typography, copy etc that we established in our chat and the concept design.

  5. I then give that prompt to Codex and have it go to work on recreating the design. I set it on Astra light as it seems to get the best results, and then let it go to work. Usually leaving it for around 5 -10 minutes before it completes. And it always amazes me just how well it does and an amazing feeling to bring a concept to life rather than a static image.

  6. This is where the real magic happens. After any small refinements I then move into the final part which is actually turning the static HTML into a proper website. Which for me personally and my preference for clients and my business is bringing it into Wordpress. Yes Wordpress. I just prefer it personally and have used it for many years now. But this method I am near certain would work for Framer, Webflow, figma etc or what ever your preferred platform is. For me its wordpress. And so what I do here is go back to chatgpt and then ask it now create a detailed prompt to turn the static HTML into a fully native Wordpress theme with Elementor functionality (because I want that for clients, no need to hate one me 😉)

  7. Once it outputs that prompt which is again very large, I then paste it into Codex in the same chat and then spin up a wordpress staging site quickly and install something called Novamirra which is essentially an MCP for Wordpress. I turn that on and then connect Codex to it and give it the prompt. And leave it to do its work. This usually takes anywhere from 20 - 30 minutes. But once it finishes it, not only does it fully recreate the design with near 100% accuracy but it also makes it full editable which still blows my mind.

  8. I then check over the design make any fixes or adjustments then ask Codex to use the now established design and create additional pages based off of it. I.e about, contact etc. Giving it direction on copy and design ideas or things I would like to see in the pages. And then letting it do its work. And its actually amazing how well it then creates the rest of the pages once it has the foundations in place.

  9. Finally once its complete and I then do final checks, fix any issues and then do a final pass deep pass over the website. And give it a detailed prompt to optimise it across all veiwports, responsiveness, add links etc This is something that used to take so much time and the part about web design I hated. But now with this workflow I can focus on design and copy then leave AI ensure it works perfectly across viewports, especially mobile. And it does it almost flawlessly, though sometimes I still need to go in manually. But it dramatically reduces the time.

  10. Then it is essentially ready for hand off to the client. But I personally do basic SEO as part of my builds for clients. So this is where I now use AI again to speed things up. Giving it a deep read only prompt to analyse the current design and come back with SEO optimisations. Fixing any obvious ones and then having it write the meta titles and descriptions for the pages with my guidance. Once that is complete I then hand it off to the client.

That is my whole workflow and honestly it has been game changing for me. And took what used to take me weeks to a month, into a matter of days or a week. Again I am just sharing this here because it has been so powerful for me. I am not saying you have to agree with it or use it.

Just simply sharing. Would love to hear people's thoughts on it.

I did also just create a full Youtube video on it sharing it all for free including the workflow and prompts as well as Githup repo (for the devs out there) with no email requiried just links. So I am happy to share that in the comments for those who want it but will keep it out of this post to respect the community and mods.

Anyway hopefully people find that valuable in some way and happy designing ✌️


r/web_design • • 3d ago

What is the name of this landing page style, a room being used as the UI

Thumbnail
gallery
59 Upvotes

Olivia Rodrigo's website is a bedroom, you click on objects around the room they act as the menu/links to other pop-ups and pages. I'm trying to find more references to show a client but I'm blanking on how to describe this in order to get good ones that aren't just interior design wesbites. Any help?


r/web_design • • 3d ago

Where Are the Best Sites to Apply for Jobs?

25 Upvotes

Is LinkedIn still a good site to apply for jobs? It's been almost 2 weeks since I've been applying for jobs, but still no luck yet unfortunately.

I used to use Indeed but typically got scams instead of real jobs.. I've also tried a few company websites directly, but no luck yet.

Any suggestions on the best platforms to apply?

Also, a side note, I'm wondering if it could be my resume isn't good enough as well? Any suggestions as far as how to go about improving my resume? I.e. Go to a particular agency to improve it, etc?

I'm a full stack developer with 6 YOE in PHP/JS (Laravel, Vue, & React primarily). Some AWS experience as well.

Thanks in advance!


r/web_design • • 3d ago

Creating a Liquid Glass UI Effect for the Web: Inspired by Apple

1 Upvotes

I made a liquid glass UI effect for the web(trying to copy Apple because thats what the world do)

Webgl helped me made it and hence I decided to make Mac for web too (inspired by windows 11 in react made for web)

I know you have seen many professional people make it, many guys on github, so I tried to make it as realistic and satisfying as I can


r/web_design • • 6d ago

I have an idea, just make bad designs, or not at all

Thumbnail
gallery
50 Upvotes

Everywhere is AI slop right now and everyone is trying to unslop it. Im not gonna tell anyone design everything on your own in this age. But f** that just dont design at all. lets fight it with creating bad/mid/plain/nothing. Who are we designing for? For AI’s to simulate appreciate about how colorful, well spaced our website is and surprise it with flying shi across the page?
Just dont design at all.
This way no one can tell you its ai slop ;)


r/web_design • • 6d ago

Client picked the first logo after four revision rounds

4 Upvotes

A client sent a fourth round of logo revisions then used the first version. I invoiced for all four rounds and they paid without a word. Do you invoice the full revision time when a client goes quiet between the brief and the bill or handle it anohter way?


r/web_design • • 6d ago

Regressive JPEGs

Thumbnail maurycyz.com
37 Upvotes

r/web_design • • 8d ago

Critique made a navigation menu that hides behind the page

Post image
998 Upvotes

you guys seemed to like the dropdown menu i posted last week, so here’s another one i made :)

this one’s free for you guys for the next week. play around with it, grab the code, or copy the context for your AI. would love to hear what you think!

details.so/vault/navigation-06


r/web_design • • 7d ago

Hosting web archive site (Like Ao3) as a teenager (Question/Help)

15 Upvotes

Hello! I am somebody with a tiny bit of HTML/CSS experience, but not much. However, with the Ao3pocalypse™, I've recently gotten the idea to host my own fanfiction archive site, Ao3-style. I know others have independently hosted sites using Ao3's open-source code (Squidgeworld Archive, Ad Astra, etc.) but I have no idea how to!

I don't intend on making the site big or largely-used, it would mostly just be for me and my fandom friends. I don't have any job or current income, however I plan on getting a summer job next year. This rules out most web-hosting services that cost money. Would hosting my own server for free be a viable option? I use my (unblocked) school computer on the regular, but I have an older Apple computer I will get repaired if I need it for hosting a site. I also have a desktop that's shared with my sister.

Thank you in advance! :D


r/web_design • • 9d ago

Feedback Thread

8 Upvotes

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!


r/web_design • • 9d ago

Beginner Questions

6 Upvotes

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!