Design Tips

A general set of Tips regarding Design

•
#design #typography
Tips on design

Tips on design

Hi, I have been practicing the art of designing web pages for a long time (a few years at least). And I have made some (objective term) progress. Here I would present some resources that you can go through to help in designing websites. Also, I would recommend a few tips which would help you boost your design.

Observation

The first good skill that you need to obtain to start designing is Observation. Look and Observe how others have designed their websites. Also, do not limit yourself to a standard site such as Google or Facebook for design inspiration. You can browse these sites for a taste of what good design looks like:

Another amazing tool to help you in the task of observation is Developer Tools. These are available in all major browsers. Chrome DevTools and Firefox Developer Tools. A cool tip to note: you can add new styles in DevTools and see them updated live on the webpage, Awesome for testing different colors padding etc to see what fits right. (Note that changing code in DevTools does not change it in your files)

Understanding color

Color

While I agree that color theory is a vast topic and I don’t quite understand all of it, I still can recommend a few websites from where I have developed my sense of color:

Enough about theory what about Tools?

Using Fonts

Font

The most dramatic effect of any one thing on design is that of the font. (Just think of designing something in Comic sans except of course Comics). I really like typefaces. And here are some sites to learn more about them:

Getting the right fonts is not a headache, thanks to Google Fonts. It’s an amazing site from where you can download and even link your fonts through CSS/link tags so that the font is shown in your client’s browser even if they haven’t installed it!

There are a few other sites that provide free fonts but most of them either are free for personal use or cost some $Dolla.

I also compiled a set of great fonts available on Google fonts when I created the FontStaller script. You can find them here.

Tips n Tricks

Minimalism is the way to go

Minimalism is not a lack of something. It’s simply the perfect amount of something. — Nicholas Burroughs

By having a lot of things on the website at the same time confuses people and gives a sense of clutter and disorder. Put something there only if it needs to be there. Simplify Reduce Iterate. Just look at Wikipedia. It isn’t quiet aesthetic as other sites and looks like a mess in the modern age. Whereas a quick look at Google explains the point of simplicity.

Wikipedia

Google

But don’t remove everything. As once a great man said:

Everything should be made as simple as possible, but not simpler. - Albert Einstein

Test different screen sizes

Responsive

I know it is hard to design for your own screen size, much harder to design for several. But that is what makes or breaks a design. People would not just be browsing your website from your specific machine. They might use a phone a tablet or unfortunately a smart-TV. Make your website at least a little mobile friendly by adding a few media tags.

Advance stuff : Sass

Ever since I learned about Sass, I have used it everywhere. It is a CSS preprocessor. By that I mean, it is a language that compiles to generate CSS. But why would we need something else? Because it simplifies things. Here is the official guide if you are feeling curious.

Use some extensions

I know editing CSS files is not that hard, you don’t need extra debugging stuff and linters. But a few extensions do make the job easier. These are a few extensions that I use in Atom:

Thanks for reading, Hope I might have been of some assistance in your Aim to nail down the best design ever!

❦

Sooner or later, everything ends.

Comments