/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

887,670 Subscribers

8

Should I go freelance?

The current company I work for I do web design. Figma. Some front end stuff with elementor.we outsource the main builds to a guy in India. We have some short turn around times. Getting out a full site live within a month. We sell Design/dev sites for about $1200. These are 4-7 page sites. My paychecks are about $1900, twice a month. But sometimes I feel like I could do things on my own and escape office life. Sitting in a dark office for 8 hours mon-fri

5 Comments
2024/07/11
02:54 UTC

0

Need Logo

Hi, I need LOGO for my new website.

8 Comments
2024/07/10
23:54 UTC

0

What are the best YouTube Channels, blogs, etc., for keeping informed of the latest AI developments?

As the title implies, are there any YouTube channels, blogs, newsletters, etc., that you enjoy reading to keep on top of the latest tools, resources, developments, etc. related to AI for web design, development, SEO, writing, etc.?

3 Comments
2024/07/10
19:11 UTC

143

Does this look like an early internet website? Or does it look like im trying too hard?

94 Comments
2024/07/10
13:55 UTC

0

Why the image not displaying

https://codepen.io/Rajeev-Bagra/pen/MWMWPBq

While this image displays as intended on the left side of the Google Search bar:

https://www.google.com/images/branding/product/ico/googleg_lodp.ico

When replaced with:

https://drive.google.com/file/d/1pWgv3s933hlojitdPhjkyeaZItGkUC8a

The image does not display.

Is it due to image type or size or some other reason?

1 Comment
2024/07/10
10:04 UTC

4

What technologies to use as freelance web designer/dev to scale business?

Hey guys, I'm a CS student with a background in design and want to scale my web design small business. During college, I've been working with 1-3 clients per year (small businesses, little to medium pay, all clients because of word of mouth). I've mainly set up existing WordPress themes for them and filled them with their content.

The pay is good for what I'm doing but honestly, it's boring and I want to design and code again and also want to scale up my small business to a full-time income in the future (I know this takes a bit of time but I want to do this for a longer time and I'm willing to put in the work).

Also, I want to move away from setting up WordPress themes and start designing websites again by either building my own themes or creating custom websites using HTML, CSS, JS, and frameworks I know from my work at as a part-time software developer.

I'm still figuring out what are the best ways/technologies to use for this kind of work. I've heard of people

  • creating WordPress themes from scratch with HTML, CSS, JS, PHP
  • using PageBuilders like Divi or Elementor for WordPress themes
  • using plain HTML, CSS, and JS
  • using frameworks like React or Angular

What are your experiences when designing and coding websites for your clients?

P.S.: I'd say I'm pretty good at HTML, CSS, and Angular and have a solid knowledge of JS, databases, and php

4 Comments
2024/07/10
09:23 UTC

113

This is the third time a web design client has refused to pay for my work

Hey everyone,

I'm feeling really frustrated right now. I have fixed prices and don’t negotiate much, and this client had previously worked with me without any issues regarding payment. Because of this, I didn’t ask for a deposit on this project (which was a smaller one). Now, with this second website, he's just disappeared and isn't responding.

I'm tired of having to consider legal action. Even though he can’t use the website, I’ve still put in the work and it’s incredibly annoying. It’s already challenging for me to find clients since I work full-time in a completely different field during the day and don't have much time for cold calls or other marketing activities. I can only focus on web design projects in the afternoons and evenings.

Do you have any tips for finding more reliable clients and avoiding situations like this in the future? Any advice would be greatly appreciated. Thanks!

56 Comments
2024/07/10
06:19 UTC

2

Is the below chunk of code inline or block while understanding absolute position

#top-right {
    position: absolute;
    margin: 100px
    padding: 50px 100px;
    top: 10px;
    right: 10px;
}

https://codepen.io/Rajeev-Bagra/pen/MWMWPBq

It is mentioned by others that choosing absolute is not the right design. It will help to know the implications of choosing position as absolute. What are the other alternatives? Also, it is not clear if the above menu generated will be inline or block. There is neither mention of inline or block or flex! Is this feature then inherited from body (but body too do not have any mention of inline/block/flex)? Can it be modified to make it either of the three (inline/block/flex)?

6 Comments
2024/07/10
03:06 UTC

5

Is this ID selector redundant?

#top-right {
    position: absolute;
    margin: 100px
    padding: 50px 100px;
    top: 10px;
    right: 10px;
}

#top-right a {
    margin: 2px 5px;
    padding: 5px 5px;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    line-height: normal;
    height: auto;
}

Given whatever will be included in the menu will have an url, is it not that defining #top-right is redundant and everything can be rather defined under #top-right a? In case of conflict, which one will prevail?

https://codepen.io/Rajeev-Bagra/pen/MWMWPBq

4 Comments
2024/07/10
01:44 UTC

0

How to make "Rate My Professor" website

Hi!

I have absolutely no web dev experience whatsoever, but some ppl and I are really interested in creating a "Rate My Professor" esque website where undergrads can essentially rank and assess mental health resources at their given school.

We have all the stuff ready for it, but we have no idea where to start in terms of actually creating the website and setting things up.

How hard would it be for someone knowledgeable to create? Are there existing platforms we can use instead?

Would massively appreciate any advice!

20 Comments
2024/07/09
20:06 UTC

5

I'm a frontend developer by trade but I want to start creating sites for clients which involves something I don't have - design skills.

I can create basic designs but when I try to put pen to paper (or hand to mouse), I often struggle to find a good creative layout that I'm happy with. I would like to go freelance eventually but without a good foundation in design then I'm not going to be very successful.

Are there any tools, resources, tricks and tips available for someone like me?

I use Bricks and custom JS/html/CSS

12 Comments
2024/07/09
19:02 UTC

3

What are some good examples of well-designed music venue websites?

It seems like a lot of music venue websites seem a little dated. Do any modern-looking ones come to mind?

9 Comments
2024/07/09
18:35 UTC

0

TIL: I can design spatial UI for Vision Pro and test it on my iPhone in AR mode without code

I had some cool ideas for Vision Pro apps, but I didn’t want to spend weeks learning Xcode and then pay $4K for a headset just to test them out 🤑

I figured out a way to prototype these ideas in just a few hours without writing code using Figma and Reality Composer, then exported them and ran them natively on my iPhone and iPad to run in AR mode, without needing a headset or additional apps.

https://preview.redd.it/lpfqbpppdjbd1.jpg?width=1170&format=pjpg&auto=webp&s=ca481e19f7806225ef308d858f206c783ece1f8e

Here is the process that I used:

  1. Design the UI in Figma using Apple's Vision Pro UI Kit

https://preview.redd.it/ek9qidibdjbd1.png?width=5220&format=png&auto=webp&s=bda409543ca257cfb998535b1a1e1b7cc2d68374

  1. Export the UI components as PNGs

https://preview.redd.it/7cu80wgddjbd1.png?width=2072&format=png&auto=webp&s=6dcd4822e42298263d5b4298df84ebf2337812bb

  1. Import PNGs to Reality Composer (iPhone, iPad or Mac), and adjust their positions and rotations. Each UI screen in Figma corresponds to a new scene in RC

https://preview.redd.it/c8ctnkwzdjbd1.png?width=3008&format=png&auto=webp&s=dce9038444b6bba4b4072235d065a18fa080ce2e

  1. Add tap hot spots and transitions between scenes

https://preview.redd.it/34ldbjmydjbd1.png?width=3024&format=png&auto=webp&s=d14e0996b3a3440dd007cadb773eb60dbef37e95

  1. Add animations to hide/show different UI components when each scene starts, and when a specific hot spot is tapped.

https://preview.redd.it/on1pxd93ejbd1.png?width=3024&format=png&auto=webp&s=29b0f3931cc90064039d796c5b27bbf36d88ec19

  1. Export as .reality file, and send it to your iPhone or iPad.

https://preview.redd.it/ykxq6tw9ejbd1.jpg?width=1170&format=pjpg&auto=webp&s=669e01e76d817a817f02e9cef8ea94d2b10568ec

Let me know what you think, and if you have any questions!

4 Comments
2024/07/09
18:34 UTC

0

Web designers, what trackpad for windows have you found to be very similar to Mac's Trackpad responsiveness?

I can't install drivers. It's a company desktop. However, I can plug in a mouse though.

7 Comments
2024/07/09
17:46 UTC

38

Any good YouTube channels to learn from?

I’m pretty much an absolute beginner at design. I’m pretty deep into learning full stack development, but I kinda just wing it and make a mess with tailwind, and I completely blank out whenever I open Figma. Are there any good YouTube channels to follow to learn the fundamentals?

Edit: looking into some of the suggestions, I guess I’m looking more for UX than UI. Thanks everyone for the suggestions and helping me get there!

28 Comments
2024/07/09
15:51 UTC

27

Is it okay to change password of wordpress site if client is paying after work is done?

I have a client who wants to pay after I finish a website for him, he sent me a wordpress site with all the plugins, theme and so on, but I have no assurance that he will actually pay me after the job is done. So is it ok to change the password to make sure they pay me?

30 Comments
2024/07/09
11:45 UTC

0

Designers & Developers. No-code website builder.

Have you created a website using a no-code platform? Which is the best no-code website builder for long-term thinking and why? Share your experiences below.

31 Comments
2024/07/09
11:02 UTC

9

How to know from Inspect distance between two elements

While it appears relatively straight-forward to know fonts, font size, color and similar details of an element using Inspect, not sure how to know stuffs like distance between two elements such as header menu and Google logo below:

https://preview.redd.it/jddvts2yvfbd1.jpg?width=1920&format=pjpg&auto=webp&s=b10b3cf6e7957264ff97b42274211054f740cf17

8 Comments
2024/07/09
06:44 UTC

8

Why text align = right has no impact while other attributes effective

While other attributes such as font and font size are controlled from the below chunk of code, unable to figure out why text align is centered by default and changing to right/left seems no impact.

.buttons input[type="submit"] {
    margin: 11px 4px;
    padding: 0 16px;
    font-size: 14px;
    color: ##3c4043;
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: right;

https://codepen.io/Rajeev-Bagra/pen/MWMWPBq

9 Comments
2024/07/09
06:13 UTC

4

Display of submit button controlled from which class

        <div class="buttons">
            <input type="submit" class="google-submit" value="Google Search" />
            <input type="submit" class="google-submit" name="btnI" value="I'm Feeling Lucky"     />       
       </div>

On first look, it appeared that font size of Google Search and I'm Feeling Lucky buttons will be controlled by this:

/* Styling for the submit buttons on index.html and googleimages.html
.google-submit*/ 
{
    background-color: #f2f2f2; /* creamish color */
    color: #000000; /* grey text */
    border: 1px solid #dfe1e5; /* light grey border */
    border-radius: 0px; /* rounded corners */
  
    font-size: 100px;
    padding: 20px 20px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s;
}

However, the same is controlled from here:

.buttons input[type="submit"] {
    margin: 20px 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #1a73e8;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

Full code: https://codepen.io/Rajeev-Bagra/pen/MWMWPBq

My query is what is the role of this chunk of code:

/* Styling for the submit buttons on index.html and googleimages.html
.google-submit*/ 
{
    background-color: #f2f2f2; /* creamish color */
    color: #000000; /* grey text */
    border: 1px solid #dfe1e5; /* light grey border */
    border-radius: 0px; /* rounded corners */
  
    font-size: 100px;
    padding: 20px 20px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s;
}

.google-submit:hover {
    background-color: #e8e8e8; /* slightly darker creamish color */
}

.google-submit:active {
    background-color: #dadce0; /* even darker on active */
    border-color: #d2d3d5;
}

Also why despite class="google-submit" value="Google Search" , font (and other similar properties) managed by .buttons input[type="submit"]? I thought "google-submit" will take precedence over "submit".

7 Comments
2024/07/09
04:54 UTC

2

Which chunk of the CSS code determines the vertical distance between header menu and below Google logo?

https://codepen.io/Rajeev-Bagra/pen/MWMWPBq

It will help to know which chunk of the code determines the vertical distance between header menu (Image Search, Advanced Search) and below Google logo?

https://www.canva.com/design/DAGKa3nZrFg/aYYZnKjh7dQazkoPj7dIbQ/edit?utm_content=DAGKa3nZrFg&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

4 Comments
2024/07/09
03:19 UTC

2

Bringing my old blog design up to date -- seeking advice!

For many, many years, I've kept a travel blog. It's a purely noncommercial thing, mostly a way for friends and family to know what we are up to and a way to keep track of our travel writing and photography for our future selves.

It's time for a re-design and I'm hoping for advice on what aspects of layout, fonts, color use, etc. will make the site look fresher and more up to date.

Front page: https://theslowroad.org

Post page: https://theslowroad.org/back-to-asia-and-back-to-penang/

Category page: https://theslowroad.org/places/asia/malaysia/

Misc page: https://theslowroad.org/about-us/

Thanks in advance!

Edit to add: yes it’s slow. I didn’t know what I was doing when I built it several years ago. The redesign will definitely address this, but what I’m asking for here is advice on the visual design.

2 Comments
2024/07/08
19:27 UTC

22

Received request for horizontal site design. What's the general consensus these days?

Hello! I'm looking for some self-affirming answers, but I'm willing to hear out the other side of things and I will stand corrected if I'm wrong ;)

A large non-profit wants a new website and they LOVE a random horizontal scrolling site they found. They want us to do something like that. It's not even a creative use of horizontal scrolling, its just a full mouse takeover and static scrolling using the system scrollbar and everything.

Everyone at my firm hates it, but ultimately we will do what the client wants if we have to. However we want to try to explain to them why it's not a good idea. Back in the old days, this was a no-no because of the early gen screen readers for disability and all that. But is that still the case? Are there any other reasons I can point to that have facts to support why it's not suggested? I have good instincts and some clients listen to that, but I'm trying to do my due diligence. Google helps a little but most of the info that comes up is HOW to do a horizontal scroll.

Am I totally wrong and horizontal is the new thing going on? I am ok with small elements or sections of a longer page having some kind of horizontal scrolling element, but not the entire site!

Thanks in advance!

29 Comments
2024/07/08
15:07 UTC

13

Please suggest what can I do to improve my website design? I am offering web development services and the content is not done yet

25 Comments
2024/07/08
12:05 UTC

Back To Top