<!doctype html>
<html>
  <!--
  Hello, This is Muhammet, I am a product oriented from-scratch
  web-developer. It's my hobby to think about new ideas and
  implement prototypes.

  Some of the things I like: Python (Django/Flask),
  Linux, Emacs, Restful Services, Data Science (R/Python),
  Html, SASS, Javascript (React/Jquery) and Sketch.

  PS. Yes you are reading the source markup of the page you are
  looking at. If you want to learn the details look at the repo
  @ https://github.com/jeffisabelle/my-blog-engine-2
  -->
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- higlight.js styles -->
    <link href="/static/css/highlight/solarized-dark.css" rel="stylesheet"/>
    <!-- fonts -->
    <link href='https://fonts.googleapis.com/css?family=Actor|Advent+Pro:400,300,500,600,700' rel='stylesheet' type='text/css'>
    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
    <!-- main -->
    <link href="/static/css/main.css" rel="stylesheet"/>
    <title>Muhammet Can :: Why programmers think that they dont have talent for web-design?</title>
  </head>
  <body>
    <div id="left-container">
      <pre><code></code></pre>
    </div>
      
    <div id="profile">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12">

            <div class="avatar">
              <del>my awesome picture</del>
              <img alt="" src="/static/img/thuglife.png"/>
            </div>
            <div class="nav">
              <ul>
                <a href="/">
                  <li>home</li>
                </a>
                <a href="#"> <!-- implement later -->
                  <li>projects</li>
                </a>
                <a href="#"> <!-- implement later -->
                  <li>about</li>
                </a>
              </ul>
            </div>
            <div class="social">
              <a href="https://tr.linkedin.com/in/muhammetcan" target="_blank">
                <i class="fa fa-linkedin-square l"><del>linkedin</del></i>
              </a>
              <a href="https://github.com/jeffisabelle" target="_blank">
                <i class="fa fa-github-square l"><del>github</del></i>
              </a>
              <a href="https://twitter.com/jeffisabelle" target="_blank">
                <i class="fa fa-twitter-square l"><del>twitter</del></i>
              </a>
            </div>
          </div> <!-- /profile -->
        </div> <!-- /col-xs-12 -->
      </div> <!-- /row -->
    </div> <!-- /container -->
  
    <div id="right-container">
      <article class="animated fadeInRight">
        <!-- dont put the source of actual blog here.
        ugly markup makes it hard to follow. -->
      </article>

      <div class="container">
        <div id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the
          <a href="http://disqus.com/?ref_noscript">
            comments powered by Disqus.</a></noscript>

        <a href="http://disqus.com" class="dsq-brlink">comments
          powered by <span class="logo-disqus">Disqus</span></a>
      </div>
    </div> <!-- /right-container -->
  </body>

  <!-- jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <!-- highlight.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
  <!-- bootstrap.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
  <!-- main.js -->
  <script src="/static/js/main.js"></script>
</html>
my awesome picture

Why programmers think that they dont have talent for web-design?

This semester, I am taking web programming course and many clever programmers that I know complain that they don't have enough talent for creating cool web designs.

No, that's not about talent. It was at past, but it's not `all about it` anymore. You just need to use right tools when working on web-design. As a programmer I'll try to explain some cornerstones that you should keep in mind when working on something that runs within browser.

notice that; this article is not for programmers who wants to be a web-designer but for programmers that already know enough JS and basic HTML/CSS but can't create fine designs for their projects/blogs etc.

1 - Where is The Right Color?

Anyone knows that colors for a web design is the most important thing. And, we, programmers are really bad at choosing some colors. Many of us just using randomized #dcdcdc" or just simply "color: yellow; background-color: black;"

No! please don't do that, many programmers have tried that, it's just not working. (yay, my headlines are color: maroon;) Instead, just head to http://colourlovers.com. Then, search for a pallete which contains yellowish colors. You can instantly change the look and feel of your web pages.

from this;

yellow-color

to this;

color-lovers

a nice hack here is to use text-shadow css attribute. It will make your colors more bright.

2 - Use Better Typography

Typography plays a major role to make any graphical design successful. You need to think about measures, font-faces, text-alignments and even white spaces. If you are bad at choosing good font-faces look at google web fonts, where you can find many high-quality fonts. (remember to import at most 3 different fonts (2 is better actually) for site speed)

If you are still can't decide what to pick for your types, use my technique! brute force http://www.typetester.org/ for picking up some cool fonts that don't suck. You will be able to compare font faces and decide the most appealing one by using typesetter in a few minutes.

There are awesome css tricks for fonts. just google `css font tricks` and you will get many examples of good fonts. If you apply some of theese rules to our earlier example, you can easiliy get something like this in a little of time.

web-fonts

3 - Play with CSS Gradients, Shadows and Boxes

One of the main reason for me to say that talent is not important to create simple web pages that looks good is that, you don't really need to open up gimp/photoshop or similar graphic tool for layouts anymore. You can create many beautiful pieces with only using CSS. Since these attributes are not web standard, you just need to be careful using them for browser-compability, thankfully there are tools like;

that let's you create browser-compatible css without having a headache.

gradient-css

4 - Learn Some Front-End Frameworks

This is the yet another reason for not worrying about the talent. I'm pretty sure that, when I was `writing` this article, many people out there working on creating some javascript or css framework for us. Frameworks are great, even if you are creating a single paged web design, don't be lazy and put it inside gumby framework, twitter bootstarp or something similar. You will get craziest button sets, forms, tabs and navigations; plus, your design will be responsive to the mobile phones and tablets without doing any extra work.

If you want to dig some frameworks have a look at this article before googling. http://net.tutsplus.com/articles/web-roundups/20-javascript-frameworks-worth-checking-out/

5 - Collect Resources for Designing Purpose

If you think you are going the create some web pages at some day, create a folder, and a bookmark folder. The internet itself is your resource, when you see some interesting pattern img or web design icon save it to your folder, or if you hit some awesome looking web-pages, save it to your bookmark folder for inspiration. Don't just look something when you need it, save resources that matches your taste.

Wrap Up of The Tools Mentioned Above

Choosing Colors: Typography: CSS Generators: Front-End Frameworks:

Summary

If you can think a web page is looking good, then you can create something similar with enough time. Stop thinking that you can't design because you don't have talent. With the tools above you can create elegant web designs for your projects, just by some practice. Web Design is not all about drawing something to paper and working with photoshop/illustrator anymore.

comments powered by Disqus