Which one is the best way to learn web design, BFS or DFS?

21:30 Aman 0 Comments

I would suggest a modified BFS. It's much more fun and practical to learn HTML and CSS at the same time. I would highly recommend though for you to learn and have a good foundation in graphic design first before jumping to web design so that you won't have to deal with unnecessary frustrations (visual design frustrations) when you start learning to code.

Here's a modified and simplified list with bits of details if you want to dive into web design.
  1. Graphic Design. Make sure you get a good solid foundation in this one before jumping into coding. Web design needs to be beautiful, functional and organized. Without the proper knowledge in this will just keep you at bay to produce outstanding work. Web design heavily relies on 3 major things in graphic design. That is Typography, Grid and Color Theory. 

    I highly recommend the following books to get you started:

    Once you have a grasp on those things, read a few more things about web grids. In my estimate, around 90% or more websites nowadays are using grids. Grids such as 960 Grid System. Famous frameworks like Twitter Bootstrap (http://getbootstrap.com) and Zurb Foundation (http://foundation.zurb.com/) uses web grids. Why? For modularity purposes, design and code wise. It's been proven over the years that it's easier and faster to code designed web pages that uses grid.

    Make sure to practice and get your hands busy with what you learn in this stage. Design web page mock-ups using Photoshop or Sketch. You will definitely have a hard time at first, but don't be discouraged. If you're having a hard time, try replicating or redesigning your favorite websites or create a web page about yourself!

    Lastly, If you're planning to do this for a living, you have to be passionate with it. Like everyone else in graphic, visual design. You need to learn to see. You need to continually develop an eye for good and great design. You have to be immerse yourself in the vast ocean of visual design. Check out the works of the talented passionate designers all over the world. You can see them hanging out on Dribbble, Behance and the likes. Create and follow pin boards on Pinterest. This is going to be your fuel to be able to produce outstanding work.  
  2. HTML & CSS. After spending a focused month or two learning the basics of graphic design. You're probably more than ready, even itching to start implementing your designs to actual code. Learning HTML alone is boring and since you already have designed web pages and layouts, you probably want to see those designs come alive section by section, element by element. 

    There are bunches of ways to start learning to code HTML and CSS at the same time, but before doing that, make sure you have a decent text editor like Sublime(http://www.sublimetext.com/). I highly recommend the split code view so that you can see your html and css code simultaneously. (see screenshot below)


    In my experience, It's easier to learn HTML and CSS through series of experiments. Bit by bit, element by element. Test out css declarations to see what happens. That's actually how I learned. At first, It will be magical when you see text, borders and background change its color.

    I've been hearing a lot of good reviews from friends that HTML and CSS: Design and Build Websites by Jon Duckett, is a good book to learn HTML and CSS.

    You can also try learning HTML and CSS interactively through Codecademy's HTML & CSS track.
  3. Javascript. This is where much more fun part of doing web designs happens. It's awesome to see your design from photoshop, fully coded using HTML and CSS but it's much more magical to see things happen on the top of it. You can consider Javascript as the icing on a cake. HTML and CSS is definitely much more important since they're the foundation, but it's nice to add a layer of interactivity to your webpages.

    Javascript can help you add animations and cool things such as sliding banners, carousels, and lightboxes. Though some of this are now attainable using CSS3. Javascript is much more dynamic.

    I definitely recommend you to read Eloquent JavaScript. It's discusses much more technical stuff about javascript than what you need as a starter, but It will definitely help you in the long run since you're now diving into real programming. HTML and CSS are for presentation purposes only most of the time, but Javascript can build way more awesome stuff.

    One popular JS frameworks you might want to start to play around with isjQuery. If you liked Codecademy, you can start learning through theirJavaScript and jQuery tracks.

    To be honest, you actually don't have to be a hardcore JS programmer if you're having a hard time grasping the concept of programming it. There's been a lot and still expanding libraries of easy to use plug-ins all over the interwebz (Ok, internet.) 

    You can also check-out CodePen and Github for awesome JS or jQuery plugins.
Once you learn those 3. You can gradually learn more advance/technical topics about web design. Usabilities, UI/UX (user interface and user experience), Information Architecture and similar stuff will definitely take you further in this endeavor.

 Source: Quora(Jan Harold Diaz).

0 comments:

Subscribe to: Post Comments (Atom)