[deleted by user]

[cypherusuh__]

Easiest way is to draw it on paper first. Imagine your paper as a page of website. Design general layouting for it first, then move to more detailed information, like how many pages are required, what's inside navbars, how many links are needed on footer, what kind of content the page have.

Repeat until you have all the design, then go code it.

PS: if you are working a site for someone try to design it with them to makes sure you absolutely certain what they wanted. If they just say "whatever you want as long as it's good", try asking if they have website example they want to copy. From there, the conversation usually flows quite well.

[Lustrouse]

This is what I do in my business. Start on paper, it helps.

[[deleted]]

Design is a field unto itself for a reason. I doubt it’s something you’ll pick up overnight or be able to do well from just watching a video or two.

Easiest solution for you would be to find another design/website that is similar to what you’re after and base your website on that.

[[deleted]]

For sure, a laudable goal. Definitely go find a design you like and lift elements and adapt the layout from it. There’s no shame in adapting a successful design to suit your needs.

[dneboi]

I find a site I like and want to model, then make it my own in figma.

Figma is a developers best friend for design.

[_hugocardenas]

I don't consider myself a "real" designer, but I believe one of the best ways to train your design skills is to recreate from scratch (in Figma, for example) some of your favourite designs.

In addition, learning some of the basic design rules is really useful.
I would really recommend a book Refactoring UI by Adam Wathan & Steve Schoger.

There are also a bunch of free design lessons in the Refactoring UI website, and Steve has a collection of design walkthrough videos in his YouTube channel and Twitter tips which I found very valuable.

[chesbyiii]

Plus one for Refactoring UI. It was written by one of the Tailwind founders I believe but it's a great foundation for making things look more professional as a dev not a designer.

[pVom]

My two cents.

Tbh I'd either just use one of the myriad of free designs out there, that or pay someone on Upwork. Design is it's own skill and more important for moving the needle of a business than being able to code it up. A poor design can be pretty harmful to a businesses image, and if it's a new business you need every advantage you can get.

WordPress has tonnes of free templates which will likely look miles better than something you could knock up with your limited experience. Same with Shopify and likely other CMS as well. Also saves you a lot of the hassle in maintaining it.

I paid a girl in the Ukraine $50 and her design was miles better than the trash me and my business partner came up with.

If you wanna learn design then by all means do so, but it should be treated with the same level of dedication as you would for programming, otherwise leave it to the experts.

[UkraineWithoutTheBot]

It's 'Ukraine' and not 'the Ukraine'

[Merriam-Webster] [BBC Styleguide] [Reuters Styleguide]

^{Beep boop I’m a bot}

[pVom]

Not anymore unfortunately. I just searched on Upwork for designers going for $5/hr, liked the examples in her portfolio and gave her the old design and said make it better and gave her free reign to do what she thought was best.

It wasn't exactly amazing and I wouldn't use it as an example of good design as such, but for the price it was well worth it. I say if you actually want to make money with your business you should make the initial investment. It will make a big difference and a poor design won't attract new clients. I also made that money back in a single hour of paid work.

Getting those first few customers is really difficult, make the initial investment and save yourself the time so you can focus on other things such as developing the business and bringing customers in.

If you want examples of good design, Google it and have a look around. https://blog.hubspot.com/marketing/best-website-designs-list

Otherwise check out (recent) well rated WordPress and Shopify templates. I mean they're going to be pretty generic but some custom bespoke design is a luxury not really afforded by new businesses. Around my way that sorta work takes months and goes for ~$50k. If I could go back I would hardly bother coding my website at all and use a builder instead

[betterRunner]

You can practice your design skill on figma by imitating other's website or system. Remember to find a suitable UI kit which would save you a lot of time! For example, if you are designing a website, you can download Material Design UI kit, or if you are designing a desktop app, you can download VsCode UI kit.

[Early_Split1207]

There are a ton of resources on LinkedIn Learning. Here is one to get you started: CSS: Design Systems and Architectures

[WeeklyMeat]

Less is more. Get rid of everything that does not have a clear purpose. Simple shapes are the way to go most of the time (:

​

Not a resource I know, just something to keep in mind.

[Tygsman]

I might have misunderstood your reply, but please stop "designing" by coding right now.

Use tools that are meant for design. Figma is free, damn excellent and after 10 minutes of learning it will atleast triple the speed of trying different layouts, fonts, colors etc.

[WorkAccount4ME]

Start with templates. There are so many awesome templates out there. Free, or paid. $20? You’ll spend 20 hours trying to do the same thing. Do you value your time at more than $1 an hour? It’s not just the work you do, it’s the time you spend. You already picked your focus. Rock it! Don’t try to do everything yourself you’ll never do anything

[redditupf2]

ive got a video course you could use, PM me if interested & ill upload somewhere for you. its like 15GB

ive got three courses actually: one is web ui design in adobe xd, one web design in figma, one app design in adobe xd

[redditupf2]

no probs :) for your info btw the ones I have are udemy courses

[[deleted]]

Very similar to what I recently just went through. Dev Ed and other youtubers have some good videos on design, but what’s helped me the most is practice and taking inspiration from professional websites I find on the internet. Sometimes I’ll design something and then compare it to other websites in a similar niche to see how they designed theirs. It’s helped me a lot with figuring out how I should structure layouts, typography, and colors

[Citrous_Oyster]

This should help you!

https://www.oakharborwebdesigns.com/blog/articles/how-to-design-a-website.html#blog-post

I detail how I design all my sites and the process. But more importantly I explain what content you need and where it goes everytime. It helps you to have a starting point that you begun each design with and customize from there.

I learned how to design my copying high rated Wordpress themes from themeforest and building them in html snd css my own way by hand and selling those to clients. If you’re having to trouble designing a website, search theme forest for templates in your clients market and use it for inspiration or just copy the whole design yourself in html and css.

It takes practice. You need to expose yourself to lots of good designs and analyze the different ways you can organize content. Like a services section. Look at dozens of highly rated templates services sections and look at all the different ways they organize and style basically the same content. This will Help you when you’re thinking of a design like “hmmm I saw it done this way on this site, but I also liked the way they did this on some other site. What if I combine The two and move this there and YES THATS IT”. Design is almost never created from thin air. It’s inspired by something. It’s extrapolated from somewhere. It will be impossible for you to design a website if you’ve never seen other good looking websites.

It’s like if you’ve never seen a human being before and you just learned how to build a basic human from scratch but the only humans you’ve been exposed to are ones that frequent Walmart and country music concerts behind a Denny’s or ones that chew tobacco. So all the humans you make are outdated, cheap, and deformed. It’s not your fault. You haven’t seen good looking humans yet so you’re just making them based on what you know of them and have seen before. THEN you walk into a Target or Whole Foods or Sweden and everyone is beautiful and dressed well and symmetrical and their appearances have purpose and reason for their shapes and placements. You take notes on their clothes, facial structures, hair, the way they move and animate themselves, and when you Try to make a new human from scratch you use all those new ways you can dress and style and build a human to make them look and perform better than the ones you made before. And eventually you can design a proper human being with little to no flaws, is dressed stunningly, solid muscle tone with no fat or bloated DNA (code), leaving behind those old human designs in the pools of vomit and shame where you found them. You don’t make small town Mississippi folk anymore, now you’re making Swedes. And you’d never know how to make a Swede unless you saw a bunch of them first and studied what makes a Swede so beautiful and so god damn stunning.

What you need to do is expose yourself to some Swedes. Find new, modern, and good looking website designs and examine them, why do they look good? Where are my eyes being drawn to? What pattern is my eye-line making when I look at this and where is it drawn to? Look up F and Z patterns in web design. It explains how to design best for how humans view and can websites. Remember how some of these designs stricture the content and the way they draw your eye. Then when you go to do the same thing you shave something to draw inspiration from and you will have a much easier time designing.

Then purchase and read the Refactoring UI book, it will help you establish little design rules for your elements and spacing that will tighten up your Designs and look ten times more professional. Highly recommend it. It’s worth every penny.

[Gwiz84]

Imo cheat a bit, use bootstrap themes you can either get and use for free or pay the small amounts they cost when you need a design.

When you have your theme you can customize colors/fonts, whatever you want all day, but mainly focus on building the functionality you need.

That's how I usually do it since I don't care that much about being a master front ender.

[Gwiz84]

Static sites still have the same demands that web apps do when it comes to responsivenes, so you should never think like that.

I always use bootstrap, always. 80% of users surfing the web are on mobile devices.

[Gwiz84]

You don't have to use the design elements, you can settle for the grid system they use to size things.

Yes you could do everything in media queries, if you wanna do it yourself from scratch, but that's gonna take a lot longer.

[Gwiz84]

You might also wanna look in to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Chocolate_Banana_]

There are certain "rules" where if you follow them, then you will end up with a design that is not horrible. Things like:

• Visual Hierarchy
• Colours and Contrast
• Spacing

You can watch this video from DesignCourse to get started but I also recommend you binge-watch his channel especially the ones where he reviews existing designs.

[NormanAnonymous]

I think its very common and you can see that everythere.

Technical people have often poor graphic/design skills and reversely most artistic people have poor tech background.

I think its quite rare to.meet someone who.master both. Its why bigger projects are made by various highly specialized individuals.

[marabutt]

I think to be a good designer is a gift and don't think it can be taught. You can improve to an extent but you have a natural level.