/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

881,066 Subscribers

0

Data engineer - Need your advice on FE things

Hi all,

I collect all sorts of interesting data then pipeline it all into a SQL db. I then do some neat stuff to make the data easier to digest, time series, aggregations etc.

Now I'd like to start offering insights from that data back to people.

  1. What's the easiest way I could create some kind of front end / microsite that would make it easy to display this data?
  2. I'd like some form of email sign up too as I'd love to release a monthly newsletter on data insights.

Data really is my 'thing' and I'm not good on Front End development and TBH don't want to get bogged down on building and admin of FE.

  • Any products/Services out there I can utilise for this FE? Or some easy frameworks I can use to achieve the above?
  • Ideally I'd want something like a streamlit dashboard displayed as a site with some different sections for different data displays but with a sign up email form too.

Thanks for any and all advice.

0 Comments
2024/03/31
18:00 UTC

0

The only reason I remove the focus outline...

...is because my inputs haven't got borders, only shadows. The focus outline is good for keyboard use, but they get it even when selected with the cursor, which is not that nice.

9 Comments
2024/03/31
08:04 UTC

0

Something for coding

Looking for other things. Something for coding. Light use for css and js

In regular apps like google docs, when you resize window, text overflows within the size of window, is responsive to window. Vscode doesn't do that

Also when have multiple subwindows or split windows or whatever else they're called, it also doesn't do that.

Try it. Make window small, it doesn't do that

There's also a huge empty space where the text cannot flow to if you change one of the settings. How the text fits within the windows does not work in a good way like in other apps

It's settings are overly complicated. Vscode has endless problems. What are other things better

If suggestions can set a color for all code words that are the same type, example css selectors that begin with a . like .input-field or <body> or the word "function", and other things

What things come closest. Things that just works after install

6 Comments
2024/03/31
07:09 UTC

5

Non-Profit Cat Shelter Website

Building a website for a non-profit cat shelter in Montreal. About 75% done so far, and could definitely use a designer's eye from some improvements. Building with Next.js and Tailwind.

Shoot me a message if you're interested in taking a look. Obviously not a paid job, as it's a non-profit and I'm working for free, but will be a solid portfolio piece, and for a good cause!

2 Comments
2024/03/31
04:33 UTC

0

I want to build my own wordpress website can someone recommend me good yt tutorials??

So I wanna build a website where I have to blog and write about myself so I just need a yt tutorial for it.. any help would be appreciated

6 Comments
2024/03/30
12:27 UTC

11

Spacing social media icons

Hey,

I just finished up my email template in html and everything works in Outlook desktop besides the spacing of the social media icons I put at the top.

code:

CSS
.socialicon { margin-right: 20px; }

____________________________________________________________________________________________________

<tr>
     <td style="background-color: #e8e8e8; padding: 12px 0 5px; 
				    text-align: center;">

<a class="socialicon" href="https://polarisautoliners.com"><img src="https://i.ibb.co/hY0Kzzg/Website.png" alt="Website logo" 
					   width="30"></a>	
<a class="socialicon" href="https://www.linkedin.com/company/polaris-autoliners/"><img src="https://i.ibb.co/C9BCLNy/LinkedIn.png" alt="LinkedIn logo" 
					   width="30"></a> 	
<a href="https://www.instagram.com/polarisautoliners?igsh=MXd4eG9ibjk0OWJhZw=="><img src="https://i.ibb.co/G9ny8V4/IG.png" alt="Instagram logo" 
					   width="30"></a>	      

     </td>
</tr>

This is what it looks like in VSCode:

https://preview.redd.it/4khclg0svfrc1.png?width=759&format=png&auto=webp&s=66ba00283ac0622fef72c902f68b1d25d63f0b5e

Outlook on Desktop:

https://preview.redd.it/apoj6wj7xfrc1.png?width=743&format=png&auto=webp&s=2dab06b59d038cea1e67222a248fe09f3512dd04

I tried a couple different ways like adding the margins directly to the icons or adding display:inline-block + margins both to the css and to the icons separately with the same result.

Appreciate any tips on a solution for Outlook Desktop 🙂

5 Comments
2024/03/30
09:26 UTC

1

Need Feedback :)

URL: https://www.carrelinarctic.com/

Purpose: Landing Page for an app that I'm working on as a personal project.

Technologies Used: HTML, CSS, and a little sprinkle of JS from GitHub for the form.

Feedback Requested: General Feedback.

Comments:
Hello sub,
This is my first post on this sub. So kindly forgive me if I get any format or anything wrong. I've tried my best not to though...

This website was something that I designed ages ago, like when I was in high school. Now, that I seriously need the website as the official landing page for an app I'm working on, I thought, I must fix the website first.

So all kinds of feedback and even roasting are absolutely welcome... :)

Thank you... :)

1 Comment
2024/03/30
06:26 UTC

2

Moving from a portfolio site to... something else because my professional roles have changed. Looking for advice!

Hey webheads,

Back in the day I did HTML design, moved in to Flash, moved in to After Effects, and had a portfolio site that I built through wordpress template. The site seems to be clunky on the server and I often get notices of it being down for one reason or another even though I pay extra.

At any rate, I'm less of a motion designer now and more of a video producer/editor that incorporates motion and design work. I write a lot of scripts, plan rollouts, work with production schedules, manage talent etc.

So a portfolio site isn't really for me so much anymore, but I'd love to hear any suggestions of a relatively simple modern (2024) solution for making a professional site. I know of the big names of template sites and hear good and bad things about all of them. Ultimately I just want something I can customize a bit for aesthetic reasons and that will be something I can build / populate and then be reliable going forward.

Any suggestions are welcome!

TLDR Used to have a wordpress portfolio site for motion graphics,looking for an easy-ish turnkey site I can customize for my new broader video production role, that doesn't purely rely on portfolio stuffs.

10 Comments
2024/03/30
02:19 UTC

40

Freelancers and agencies selling website services. What sales or general lessons have you learned over the years?

They could be related to anything: project management, SOPs, prospecting, pricing, niche, etc.

28 Comments
2024/03/29
17:41 UTC

10

Sailing Schedule email template

Hey, I want to create a responsive e-mail template for sending out sailing schedules for our shipping company.

Since I have pretty much 0 experience with coding, I read up a bit and watched a couple videos to the point were I managed to piece together a template in mjml.
It looked good in my browser and on Cleverreach and worked fine:

https://preview.redd.it/ed8iqbvxz9rc1.png?width=436&format=png&auto=webp&s=ed4423cbc24f3bf65de8111b10c76067f1cc16bb

Looks mostly fine on mobile outlook too but Outlook on PC just botches the whole thing:

https://preview.redd.it/25skmrbwx9rc1.png?width=579&format=png&auto=webp&s=7e787ae8048627e122141f0bc8e31dec37a5d59e

I read beforehand that writing a mail template is a mess due to the lack of standardized client-support and expected some issues but since the converted html code looks nothing like my mjml code, I'm completely lost on how to fix those issues.
Since I at least want to understand my own code so that I can fix future issues myself, I think it'd be better to start from scratch in html.

Now the mail itself is pretty basic and just contains two schedule tables without any fancy features so I would think it should be manageable to write this straight in html.

Just wanted to check with someone more experienced if there are things I should avoid/keep in mind.
Any tips are appreciated, thanks !

8 Comments
2024/03/29
13:34 UTC

7

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!

6 Comments
2024/03/29
10:00 UTC

4

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!

2 Comments
2024/03/29
10:00 UTC

8

Git gud

Hey Redditors of Web Design.

I'm looking for advice, I'm a backend Django developer and htmx front end developer with a bit of bootstrap.

But I can never make websites look as good as y'all!

I want to learn design but further to that I want to learn how to implement it (code it).

I learn best by doing.

I'm asking you a favour, can you tell me the best courses paid/free (sub $1k USD) where I can learn design and implementation?

I've just been mocking up websites in figma (very much a noob) then trying to recreate with bootstrap and CSS.

But I feel like I would be better if I found a course that can explain tips and tricks instead of me just banging my head against the wall because I can't figure out how to make things be where I want them to be. 😅

Thanks in advance team!

14 Comments
2024/03/29
07:29 UTC

36

New Website Acquisition Questions

I'm online fairly often, but I have a very limited/nonexistent understanding of web development. I have a lot of questions and would be grateful to anyone who can answer them in depth as I'm considering hiring someone to design a website.

Where would you go for help getting someone to professionally design a website? The only guess I'd have is fiverr, and trying to find someone with a decent portfolio. Most of them look pretty low end though, are there any websites or resources dedicated to finding someone to hire for creating/maintaining a website?

After someone creates a website for you, how do you go about gaining ownership of the website while removing the employees ability to further edit or access the website? If I want someone to continue making updates on the website, is there a common payment method people use to continue paying people, or do I just say, I need 1 additional page on the site, here is x amount of money?

I have noticed from a lot of websites, that if I am on chrome, or another web browser, certain things do not function properly. Submitting certain forms does not work and certain websites seem to lag when browsing, even under what should be a pretty low load of information on a page, is there a reason for this? Does this have to do with the server hosting the site, the company used to create the website, money/resources allocated to upkeep of the site?

Also, if anyone is looking for work designing a website, I already know a great deal of what I want and would be happy to pay anyone who has extensive experience.

8 Comments
2024/03/28
18:44 UTC

31

I'm curious how other web devs preview a design with the client

I'm curious how other web developers design and/or preview the design with the client? Do you use a software like Figma to mockup the whole site, Illustrator for all pages, or just 1 or 2 pages, or do you only purchase premade themes or....what else?

47 Comments
2024/03/28
16:50 UTC

1

Is this bad user experience?

I'm a freelance web & print designer, and I'm redesigning my website. I've coded the home page so that each row is full browser window height, every time the user starts to scroll down they automatically get taken to the next row, which fills the page. It flows really nicely with the design and I'm happy with how it turned out.

However, on the secondary pages, there's too much content, and the rows are taller than the browser window height, so I was going to just remove that snippet of JS and have the scroll behavior be normal.

Is that considered bad UX? Is it confusing for a user that all of a sudden they have to manually scroll down a page?

1 Comment
2024/03/28
15:02 UTC

23

Feeling overwhelmed by my new position !

I recently joined a company that specializes in creating interactive digital learning platforms for organizations as a junior full stack developer, promoting interactive learning solutions. This is my first job, so I'm essentially a junior. The company is a startup with only three developers including myself and maybe 2 in management and planning, . I've been overwhelmed by the workload and the tight deadlines. When I started, they were already working on a website that was about 70% complete in terms of frontend development, using only HTML, CSS, and JavaScript. It's quite large because it's a complete learning platform. Over the past two weeks, I completed the remaining 30%, which involved around 20 pages with responsive design. I had to use some pre-made components that weren't always reusable and encountered some strange UI behavior that required hours of debugging or even restructuring entire pages.My official working hours are from 8 to 4 (8 to 12 fixed) and from (12 to 4 flexible) meaning that its depending on the task at hand i can finish late or early and at first this was great and i finished maximum at 3 but two weeks in, this rarely happens. It's a remote position, and my supervisor sometimes assigns new tasks at 3 or 4 o'clock that take hours to complete. To cope, I've been sleeping from 4 to 7 and then waking up again to finish the tasks while listening to podcasts or music to alleviate the stress. However, this pattern has been repeating over the past few days and he acts like this shouldn't happen saying " you shouldn't work beyond your shift hours " but at the same time does the complete opposite , and I can sense that my supervisor wants tasks completed faster, although he doesn't explicitly say so or his flexible hours start from 3 o'clock where my shift is about to end and this makes me so pissed because he can literally ask me anytime but he always chooses late and when i talked to him about it he said something about him bieng very pressured by workload too that he doesn't have time like WTF he doesn't have time to assign me new tasks?.Today, I received surprising news that the backend for the entire platform needs to be finished in just 4 days for a demo. I was frustrated because this was the first time I heard about it, and my supervisor seems to downplay the short timeline, insisting that we can adjust pre-made backend logic to meet the requirements. I feel immense pressure as a junior, especially during my three-month observation period, not wanting to appear unqualified. Yet, I'm also feeling unsatisfied with the rushed work, often thinking we could do better given more time.I raised my concerns with my supervisor about the unrealistic deadlines, but he attributed them to changes made by the client. However, I believe it's essential for the client to understand that these deadlines are unfeasible. I'm frustrated and find it challenging to maintain a normal daily life, only finding respite on weekends. Even at night, I watch sitcoms in picture-in-picture mode while working.

17 Comments
2024/03/28
01:45 UTC

1

How would you create a page listing a projects ?

Me and my friends started a group in which we develop open source projects together. I would like to create a page listing a projects (around 12 projects at this time) but every design I do is bad in some way.

I tried:

  • just basic list - very uninformative
  • create flexbox where every projects has its own "bubble" - page looked weird and inconvenient to read

How would you approach it ? Do you know any good pages listing a projects ?

Thank you for help

8 Comments
2024/03/27
22:30 UTC

4

Typography and layout terminology

I’m working on naming things in a design system.

Looking for guidance in terms commonly used to describe typographic elements used in page layouts.

For example, I’m looking at a component for landing page headers. The actual page title is a small font at the top. There’s a large text line and a medium large chunk of intro text.

I’m inclined to call these title, headline, and intro. The standard header title used elsewhere is page title.

I’m wondering if there’s any standard terms I could start with that are more recognized by designers. Does “headline” have a specific meaning in layouts, or are these labels more arbitrary?

2 Comments
2024/03/27
22:14 UTC

9

Free E-commerce Icons (SVG, Webflow, HTML)

I stopped a hobby of mine while ago and this may be well used by someone!

https://www.pageblock.io/library/icons

2 Comments
2024/03/27
22:13 UTC

68

Software engineer, worked with many designers at work, but where can I contract one for my own tiny project?

I'm in the US. For tax purposes, I'm just some dude. I can pay a beginner-to-average professional's hourly rate. But the job is tiny; a logotype, a little microsite, and not much certain after that. I just want somebody aesthetically gifted.

The boards I used to get jobs on a decade ago are mirror-world nightmares of their former selves. The search engines are obviously broken.

Where do I find good freelance designers these days?

31 Comments
2024/03/27
13:52 UTC

9

Question about possible malicious page design on legitimate sites.

Using my phone both my bank and work sites do this page "jump" thing where I try to touch either to see my bank account or look at my work paycheck and the page will move and make me accidentally click on something they are promoting or trying to get me to enroll in. I will even take my time in letting the page load before trying to select, and it still does it most of the time. Is this something intentionally designed or am I just imagining it?

8 Comments
2024/03/27
13:05 UTC

110

Too basic layout?

95 Comments
2024/03/27
12:01 UTC

6

What analytics affects page speed the most?

What website analytics platforms affect lighthouse/page speed tests the least? I’m able to build a 100/100 website but adding google analytics / tag manager brings it down to 95+.

Anybody been able to load and know of a analytics js that has better caching policy or is smaller than google? Or tips on how to load it? (Tag manager servers side uses the same js)

Edit: cannot edit the title. But obviously meant “the least” ;)

2 Comments
2024/03/27
06:06 UTC

8

How long does it take to create the web design portion of a site and what are the costs? So far I’ve had 6-8hrs of meetings

I’m a developer flailing around trying to figure out how to do this freelancing thing.

I hired an offshore designer who’s done a great job, but the amount of time I spent meeting and going over everything with the client was surprising.

I think I’ve been on 7 hours worth of meeting time for about 7 pages of work.

To be fair, we broke it up into a few chunks, like we only did the homepage and a shop page at first, then we paid for more pages, so… I definitely think it would have been more efficient to pay for everything at once, but I’m still surprised at how much time has been spent reviewing the design. It even feels like things were fairly efficient. The client has been easy and the designer has done a good job and it still took all this time.

How much does it cost, how long does it take, or how much do you charge to get to a completed Figma design?

7 Comments
2024/03/27
02:19 UTC

47

How much should I charge as a freelance web designer?

I am an undergraduate Computer Science student who has done a few side projects and two paid internships/contract jobs in the past, mainly focusing on web design and software development. I am considering taking on a side gig in freelance web design. I received my first work proposal recently which is a Europe-based coding bootcamp who wants me to redesign their website. I am struggling with deciding how much to charge as I'm seeing a wide range of pricing on the internet. I am based in California if that changes anything. Any advice would be appreciated. Thanks!

Also, I am happy to share my portfolio if that helps. Feel free to shoot me a dm:)

66 Comments
2024/03/27
01:16 UTC

11

IONOS forcing to buy SSLs from them only?

So, I'm having issues connecting CloudFlare with my site that is in IONOS domain and hosting. I have tried few methods after the standard with CF with no success. Is IONOS intentionally blocking other SSLs so user have to buy theirs?

10 Comments
2024/03/26
20:39 UTC

Back To Top