Web Design - Looking for tips

#1

Hello guys!

So, I’ve been coding for a while, and I really enjoy it. But the thing that most captivates me to building a website, is the design, how good it looks, how accessible it is for users, and just how pleasant it is to navigate there. And also, with the objective of freelancing, I want to be able to transform a “typed idea” website from a client and design it before actually developing it.

For this, I was planning to start to learn how to use photoshop to do that. I would like to know

  • If you also use photoshop?
  • If not what software do you recommend?
  • Resources that you’ve used to learn to design your websites / to learn photoshop
  • Any kind of tips that you find useful

Thanks in advance!

1 Like
#2

I personally and definitely recommend that you use Visual Studio Code. And if your building a website just start with the skeleton of it and then worry about designing it.

#3

Since it’s a creative process, you need inspiration and the best way to get it is looking for and copying other designers.

There is different software that can fit your needs. If you don’t care about Free Software, you can get Adobe XD for free (legally) and it’s awesome. You don’t need Photoshop.

Accessibility is really important, and you need to keep in mind different conditions such as blindness, epilepsy, deafness, slow internet connection, etc. There are books about it but you can just read the documentation in W3C web page: https://www.w3.org/standards/webdesign/accessibility

#4

I use a few different tools depending on what part of the process I’m doing. I prefer code to be the last thing I write, so I like prototyping with something thats not code. Once I know what things are supposed to look like, then I’ll move onto code and crack open the editor to start writing HTML.

I personally use Sketch for visual prototyping. Its easy to add all sorts of rectangles and colors - thats most of what a website is anyway. They have easy to remember keyboard shortcuts, as well as some standard page sizes like mobile/desktop if thats what you’re working on. You can also export your finished page so you can send someone a quick PNG of your idea.

Photoshop might be a bit overkill for your purpose, although, it is also easy to drop screenshots and create things on a page. I’ve used the open-source GIMP before, but I’m much faster with Sketch. Photoshop also comes with a license @ 20/month which sucks.

In terms of resources to get better - the best advice I ever heard was just “copy a site that you like”. Recreate it in Sketch, its a way of practicing and learning how to use the tool. Once you know how to use the tool - you can start designing your own pages.

#5

Nooooo! Save your money and don’t follow the sheeple who don’t look for alternatives! Learn GIMP and Inkscape. Ignore those who say they’re harder to use than package x because they are USED TO package x. Both programs are extremely good programs that will do everything you need for web design, and they are free. There are lots of tutorials around. Davies Media Design has a great YouTube channel for GIMP, and Logos by Nick is great for Inkscape. It is his paid Udemy course but free. Adobe is a cash trap, don’t fall into it.

Yes it does. The Photography plan, PS + LR, is still $9.99/m. Still, it’s a needless hole not to go down.

#6

It’s not much cheaper than Adobe by the looks of it @ $99/year. Does it downgrade to a restricted version after the full-version trial? It looks good, though.

#7

Yeah, VSCode is a great editor.

Don’t you still need an idea of what your going to include in your skeleton, which is a design in itself? Maybe that’s what you mean. I think the design, or at least an idea comes before any code. I find that the fastest way to get a wire-frame idea digitally is this freehand in Inkscape:

image
image1920×1080 238 KB

#8

Thanks for all the replies!

Since this was 22 days ago, i already made some progress i guess. I started using Adobe XD and i fully recommend it. It is so easy to catch up on how to use it, even for people who never done this. It’s really interactive, everything is well organized and the prototype where you can deal with the flow of it is just amazing, and you can also share for people to see. I just love it!

#9

Do you know how to work with HTML and css.
Its very easy to make a web or anything front end using those two

#10

Yeah , it’s been a long time since i code, i also know sass and javascript and stuff!
But when working for clients, you should be presenting the design prototype before, and actually it makes you a worse designer if you code while you design. Normally on a team you have the UI guy, the UX guy and other stuff, but since i want to work as freelancer , and i actually like to design stuff, i want to start doing it myself :slight_smile:

1 Like
#11

ok have fun with that

#12

I feel the same way…

While you improve your design skills maybe you can work as a team with a web designer who has no experience in coding!

#13

You need to learn either Sketch or Photoshop. Sketch is only used for macOS. Photoshop works for both macOS, and Windows. I would recommend Photoshop.

You can find lots of useful information and free video lessons on the official website of Adobe, the company which created Photoshop.

If you need free software, then try Gimp.

Also, take a look at Udemy courses. There are some good free and paid courses on web design.

Good luck. You can do it :slight_smile:

2 Likes
#14