Front End Design

Hey guys, I’m currently learning front end web development. I’ve completed a couple of side projects and was now wondering if anyone knew of somewhere I can get design ideas from? I’m not really a good designer, I’m more of a “here’s the design now implement the code to make it look like that” type of guy. Any sort of advice on this would really help beyond belief !

Hi, @chrismorales!!!
Pinterest is a good place to start. There’s a many design ideas to see. In google you can search web design inspiration and you will fine a lot of sites. :wink:

I have just discovered this site: http://codingheroes.io/resources/

1 Like

I often google for websites in the same niche, bookmark those that I like, and then keep them open in a browser window when designing. This way, I can take elements from different websites and combine them into something new.

1 Like

https://www.awwwards.com/
https://www.behance.net/galleries/interaction
https://dribbble.com/
youtube (e.g. https://www.youtube.com/user/DesignCourse)
+1 for pinterest

1 Like

Hey guys, I’m currently learning front end web development. I’ve completed a couple of side projects and was now wondering if anyone knew of somewhere I can get design ideas from? I’m not really a good designer, I’m more of a “here’s the design now implement the code to make it look like that” type of guy. Any sort of advice on this would really help beyond belief !

I’m not a good design either, usually as a front end developer, there’s a dedicated team to come up with the designs to which the developers would come in and implement it.

But what helped me get better at designs is looking on Pinterest and searching up web designs, and you’ll see a plethora of different ideas from designers.

From there, you can pick and choose to create some of the landing pages that you find, and over the course of each project you’ll slowly pick up and implement those modern designs to put into your own projects.

Web design is a whole other subject, if you’re looking to dive more into modern design principles , while staying fresh on coding, I would highly recommend looking up advanced css/sass by Jonas on Udemy. Not only will you come out with a more confident outlook on designing, but your css skills will grow as well.

@s0ukke05 this actually really helped a lot, thank you very much! I really appreciate the advice and help!

I have combined your two topics. Please do not create multiple topics for the same conversation.

Hey, @chrismorales I hope you are well. :slight_smile:

I know my answer will go in a different approach, but I hope this will give you an idea. This will be long, though!

To have a good design skill is to understand the “why”. Let me give you a few examples of what I have meant:

  • Why is the fire drill alarm is red?
  • Why that Nike Ad poster always has that slanted and bold sans-serif font?
  • Why is the navbar is always placed at the top of the page and never at the bottom?

By having a decent understanding of how design work and why it is that way, you will literally be over half-way of being a good designer. See, the biggest misconception of being a good designer is you have to have a “good eye” or have the “natural talent”. Seriously, not true.

Design is like web development in its own way. It has rules, it has structures, and it also workflow process too. For example, when I was creating my tribute page on John Steinbeck, I would google these questions:

  • Best traditional font
  • Best masculine font
  • Fonts for western-style design

So, there is no way we would simply guess what style would work for our work (even I have decided to change a different font at the last minute for my tribute page because it involved finding the right ‘feel’ for it).

All you need to do is learn the basic fundamentals of them. There is this book called “The Principles of Beautiful Web Design”. I have started on it, but haven’t finished it yet. I think it is decent enough. The good thing about web design is it is the same as graphic design so if you prefer to watch videos, search on Youtube for “learn the fundamentals of graphic design” or web design. But, make sure this is more toward design principles, not how to create a booklet or poster or web design via Photoshop.

Having said that, the other members have given great advice, you can go the resources that they provided and see the design of websites. But, what I would do is screenshot their work and copy their design via coding. If you do, take notes on why they have implement elements in those styles (such as why did they create them, did it relate to the product message? Or is it to do with legibility?).

I have watched this video on Youtube the other night and this guy explained the similar concept of I have mentioned above. He has explained it well on this.

Also, even if you are not sure, you are always welcome to discuss and ask questions on here on the Design forum, whether it is asking what is the best font for a Landing page on vintage cars, or if you have done any work and you want ask for feedback on design, it would be great! We are here to help each other. :slight_smile:

I am sorry that this was too long, but I hope this will help you and give you ideas.

PS: The course mentioned by @s0ukke05, I have tried it, finished it, and LOVE it. It is definitely a recommend!

3 Likes