: Developer to Designer path: How To Being a developer wanting to be a designer, I'm really interested in learning how to create top notch UI for websites, mobile apps, etc. However, I know nothing

@Kimberly620

I'm really interested in learning how to create top notch UI for
websites, mobile apps, etc.


Okay, that's a broad topic. You want to create "beautiful", "top notch", professional looking" websites. So, you need to know what makes people perceive something as "beautiful", right? Luckily for you, beauty isn't really subjective.

One of the keys to a beautiful visual design is harmony.

The lack of harmony is what makes your designs look amateurish.

And, the best thing is that visual harmony comes down to maths. It's not about having a gut feeling.

Like others have pointed out, I'd recommend designing websites on your own. Try to apply the design principles you learn about instead of using a ready framework. It might be hard at the beginning, but it will help you become better.

How to embed harmony in a website design

Following is a practical example and a funny little exercise you can do now.

One way that I personally prefer is to use a modular scale to size the website elements in harmonious proportions. A website that can help you generate a modular scale is this one: modularscale.com

The benefit of using a modular scale is that it can make sizing decisions as easy as picking a number from the scale.

For example, let's size a website's headings (to communicate visual hierarchy).

Let's say we have this modular scale based on the 19px body font size that I chose (19px because it looked best with the font I was using, but you can skip this step and go with the default 16px size) and the ratio 1.412 (No need to go into details why I chose this ratio. Just any ratio will do better than no ratio for your projects.):



Looking at it, I’d pick the H1 to be 2.815em, the H2 to be 1.994em and the H3 to be 1.412em. First 3 numbers bigger than the body font size. Easy-peasy, right?
The body text would be 1em (in my case 19px). Then, I’d size the H4-H6 at 1em and use contrast (different font weight or style) to differentiate them from the body text.

So, try this now:


Generate your own modular scale
Get a plain HTML document (real content, please no Lorem Ipsum)
Use the scale to size the headings.
Then try using the scale for other sizing decisions (margins, paddings, etc)


That's just a small step towards better designs, but I hope that it will help you.

If you found this helpful, you can read my other list of 7 tips for beginner web designers who know HTML and CSS

P.S.: You really have a lot of reading to do

Like others have said, read:


The Elements of Graphic Design by Alexander White
The Elements of Typographic Style by Robert Bringhurst
Don't Make Me Think by Steve Krug


Also, here a huge list of online resources like blogs and communities to keep an eye on: enboard.co/webdesign/

Vote Up Vote Down

@Shelley591

Just like learning Visual Studio does not make one a good software developer, neither will just learning Photoshop make one a good UI designer.

If you want to go the formal route, an education in Art/Graphic Design, Human Factors, Psychology, Information Artchitecture/library sciences would all be places to look.

Informally, get to work! ;) Best way to learn is just do it.

I'm a formally trained graphic designer who has picked up software development skills on the job. I started out of pure necessity.

Personally, I think the best UX team members are those that have a mix of both skills. So, I think you are on the right track.

Vote Up Vote Down

@Welton168

I've been mixing design & development for a long time. But in the early days I spent more time learning the editing tools than what makes a good design. There are plenty of tutorials to be found to learn how to use Photoshop, Illustrator, Fireworks, etc. But it's nice to have some design sense & direction. This is something I still want to become better at.

One of my inspirations is a guy named Robby Ingebretsen, because he does both development and design extremely well. His website is at nerdplusart.com.

There are a few things I'd take a look at from him...


My (very) Short List of Must Read Books for Designers
Design Fundamentals for Developers
10 Ways to Attack a Design Problem and Come Out Winning


As he talks about in all his presentations, I think it's critical to find inspiration for your designs. Even the best designers don't simply come up with this stuff out of thin air. One of my bookmarks is a collection of "New Graphic Design", mostly seen in print work. Most of them are very simple, often using the typography itself as the main graphic elements. As simple as it seems, just browsing through stuff like this can help you shape your design.

Vote Up Vote Down

@Lengel450

I'd start with reading the book "Head First Web Design" by Watrall & Siarto (published by O'Reilly). It's pretty no-nonsense, easy to digest, and walks you through everything that a designer has to consider. It's not an in-depth study, but gets you started to know what questions you need to answer next. It does cover navigation, organization, layout, writing, color, and accessibility.

Also, before you jump into Photoshop, Adobe Illustrator, or whatever, wireframe your design to make sure everything is in the right place before you commit the extra time to making it look pretty. You can sketch it out on paper or whiteboard, or you can use a tool. A tool that I found really helps in this step is Balsamiq Mockups. It lets you think about the site organization and layout first.

Vote Up Vote Down