How do I get better in design?

I am a web developer and I have built many websites. And over the years my designs is getting better but now I can't seem to figure out how to be better in design. I don't know how to draw but I have a somewhat good selection in color combination for a website.

My question is ... How do I get better in design?
It seems like I have the following options:

* Look for great websites on the web and see what they are doing.
* Try to copy great looking websites.
* Play around with some designs and try to figure out how to do it better.

If you have any advice please tell me.
Check out my designs:
1. PicturePunches
2. Memetopia

Thanks,
Farris

 

Well, you could start by correcting all the coding errors for your two sites....

1. https://validator.w3.org/check?verbose=1&uri=http://www.picturepunches.com/
2. https://validator.w3.org/check?verbose=1&uri=http://www.memetopia.com/

This will, at least, help improve your coding, if not your design, skills.

​

coothead

 

both sites are not responsive. learn responsive design.

 

Looking at what you have, the first thing I'd suggest is LEARN TO USE HTML PROPERLY!!!

That means say what things ARE, not what you want them to look like. It also means STOP slapping DIV around EVERYTHING for no good reason, STOP putting static style in the markup, STOP using presentational classes like "ColFFF"... STOP using uselessly and annoyingly vague classes like "MT10" or ""av-3B"... and for the love of Christmas STOP throwing classes at EVERYTHING and bother leveraging semantics and selectors!!!

Your markup is hobbling your ability to have sane and rational development. I mean just take something as simple as this:

            <form action="ex/picture/create.php" method="POST" enctype="multipart/form-data">
                <div class="Upload-3B"><input type="file" name="picture" /></div>
                <div class="MT10"><input type="text" name="title" class="Upload-Textfield" maxlength="140" placeholder="Write title here (Required)" /></div>
                <div class="MT10"><input type="text" name="tags" class="Upload-Textfield" id="Tags" placeholder="Write tags here Max 5 (Required)" /></div>
                <div class="MT10"><input type="checkbox" name="original" class="Upload" id="original" /><label for="original">Are you the original poster?</label></div>
                <div class="MT10"><input type="checkbox" name="nsfw" class="Upload" id="nsfw" checked="checked" /><label for="nsfw">Is it safe for work?</label></div>
                <div class="MT10"><center><input type="submit" name="submit" value="Upload" class="Button-A" /></center></div>
            </form>

Code (markup):

Where's your fieldset? Labels? You do know that placeholder is NOT a label, right? What's with all those DIV for NOTHING? Of course that it's some scripttard show/hide might seem all fancy from an artsy point of view, it's actually bad DESIGN!

But then, I view design from the engineering perspective -- we have rules, specifications, guidelines about things like accessibility, graceful degradation... using proven building techniques like semantic markup, progressive enhancement, separation of presentation from content...

... and you are clearly lacking ALL of these things! Worse, your lack of these most basic of DESIGN concepts means you are instantly hobbled the moment you want to put on the big boy pants of design and deal with actual DESIGN methodologies like dynamic font mated to elastic semi-fluid responsive layout.

Dicking around drawing goofy pictures in photoshop is not design, neither is fancy scripttard nonsense or gee ain't it neat flashy crap -- no matter how many artists DELUDE themselves into thinking that's what "design" means. Appearance is only PART of design, and I think that all the other aspects are where you are coming up WAY short... and in the process telling large swaths of potential users to go **** themselves; possibly introducing crippling hosting costs and hobbling speed in the process as well!

You should also take a good hard look a the WCAG and read up some accessibility articles over at NNGroup. In particular you seem to need to learn about emissive colourspace and how it relates to legibility contrasts (white on cyan? REALLY?), how goofy fancy webfonts can compromise legibility (Tall aspect and all-caps telling users to **** themselves for example), how placeholder is NOT a label, etc, etc... You know, DESIGN.

 

First of all, thank you for reviewing my website. I know I am pretty bad at somethings like CSS classes and IDs naming. How can I improve the naming of CSS classes and IDs? I currently name them Picture-1A it means picture and the first thing in line. Should I use camel case like pictureTitle.

And I know there are some divs that don't belong I will try to work on that. And I now realize that placeholder is not a label but I want to save space. What other advice do you have?

Thanks

 

STOP thinking presentationally, and leverage non-class selectors. We now have nth-child so you don't need a class to say which child it is. ONLY use classes on elements that are DIFFERENT from their siblings -- if you are putting classes on every single one of them at the same depth, NONE of them should even have classes.

This does fly in the face of some rubbish advice coming from Google PageSpeed and CSS Lint where they have this idiocy about "keep your selectors flat" -- but I swear they won't be happy until everyone is using five times the markup they should! Then they have the brass to claim that using two to eight times the code is somehow magically "Faster"...

Let's use a picture from picturePunches as an example:

<div class="Picture-1A">
<span style="display:none" class="PictureID">3398</span>
<span style="display:none" class="UserID">1</span>
    <div class="Picture-2A">
    	        <div class="Picture-4A">Because black people are good in basketball</div>
                <div class="Picture-5A"><img src="pictures/users/Farris/3398-Farris.jpg" title="Because black people are good in basketball" alt="Because black people are good in basketball" width="630" /></div>
    </div>
    <div class="Picture-3A">
    	<div class="Picture-6A">
        	<div class="Picture-7A"><span class="rateUpdate">Not Rated</span></div>
            <div class="Picture-7A">copied</div>
            <div class="Picture-7A"><span style="color:#D80000">0</span> Comments</div>
            <a class="TDN" href="picture.php?picture=3398"><div class="Picture-8A">View</div></a>
            <div class="Picture-9A MT5"><a class="Link-White" href="user.php?user=1">Farris</a></div>
                        <div class="Picture-12A MT5">Log in to vote</div>
            <div class="Picture-12A">Not Funny <span class="FR">0</span></div>
            <div class="Picture-12A">Okay <span class="FR">0</span></div>
            <div class="Picture-12A">Funny <span class="FR">0</span></div>
            <div class="Picture-12A">Hilarious <span class="FR">0</span></div>
                        <a class="TDN" href="https://www.facebook.com/sharer/sharer.php?u=http://www.picturepunches.com/picture.php?picture=3398&display=popup" onclick="return !window.open(this.href, 'Facebook', 'width=500,height=300')"><div class="Picture-15A MT5">Share on Facebook</div></a>
        	<div class="Picture-20A MT5">Tags</div>
            <div class="Picture-18A">
            	                <div class="Picture-19A"><a class="TDN ColFFF" href="tag.php?tag=basketball">basketball</a></div>
                                <div class="Picture-19A"><a class="TDN ColFFF" href="tag.php?tag=black">black</a></div>
                                            </div>
        </div>
    </div>
</div>

Code (markup):

Endless pointless DIV, endless pointless classes, title attributes for NOTHING (on elements like IMG that shouldn't even have TITLE), and nothing remotely resembling semantics! That's 2.36k of HTML doing what leveraging semantics and selectors should be around HALF that.

<div id="picture3398" class="picture">
	<div class="content">
		<h2>Because black people are good in basketball</h2>
		<img
			src="pictures/users/Farris/3398-Farris.jpg"
			alt="Because black people are good in basketball"
		>
	</div>
	<div class="info">
		<ul class="details">
			<li>NOT RATED</li>
			<li>copied</li>
			<li><span>0</span> Comments</li>
			<li><a href="picture.php?picture=3398">View</a></li>
			<li class="user"><a href="user.php?user=1">Farris</a></li>
		</ul>
		<table>
			<caption>Log in to Vote</caption>
			<tbody>
				<tr><th scope="row">Not Funny</th><td>0</td></tr>
				<tr><th scope="row">Okay</th><td>0</td></tr>
				<tr><th scope="row">Funny</th><td>0</th></tr>
				<tr><th scope="row">Hilarious</th><td>0</td></tr>
			</tbody>
		</table>
		<a
			href="https://www.facebook.com/sharer/sharer.php?u=http://www.picturepunches.com/picture.php?picture=3398&display=popup"
			class="facebook"
		>Share on Facebook</a>
		<h3>Tags</h3>
		<ul class="tags">
			<li><a href="tag.php?tag=basketball">basketball</a></li>
			<li><a href="tag.php?tag=black">black</a></li>
		</ul>
	<!-- .info --></div>
<!-- .picture --></div>

Code (markup):

There are MORE than enough hooks in that markup to do ALL the styling you were doing there.... LEVERAGE the MEANING of tags. ONLY use classes when a tag is receiving DIFFERENT styling than i's siblings. When you have a list of information, use a list... when you have columns of uniform data where each row has the same semantic relationship, use a TABLE... leverage table headings and imply SCOPE of those headings. When you have text providing information about that table or instructions relating to it, use a CAPTION. When you have a new major section with an obvious heading, USE THE APPROPRIATE LEVEL HEADING (h2 in this case).... When you have a new subsection that has a clear sub-heading, start that section with the next lower order heading (like a H3). Then you aren't wasting your time bloating out the markup with meaningless DIV and endless vague classes.

Likewise if you're not going to show some data, don't huffing waste time sending it!

The only reason I have DIV in there is as the major section divider for nesting selectors (.picture) and the two sections that for desktop layout would be floated into two columns. (.content and .info) ALL my other tags are there to say what things ARE, and NOT what I want them to look like. I think only .user got a distinct class to tell it apart from its siblings, and .details and .tags to tell those apart from each-other. I want to style the anchors inside .tags I say ".tags a {" in my css. I want to style the h3 for .info instead of all h3 on the page, I say ".info h3"... usually ends up no more or less CSS than throwing classes at everything, and always ends up a fraction the markup!

... and anyone telling you to "keep your selectors flat" because of "render speed" -- like the folks over at CSS Lint -- are talking out their arse. When a 386/40 could handle rendering complex tables in an acceptable amount of time, complaining about complex selectors when handhelds are pushing into the ghz range is ignorant idiotic nonsense and promotion of sloppy development habits!

Oh, and good scripting should hook the markup, NOT the other way around. 99% of the time you use an onevent attribute in the markup -- like onclick -- you're inviting clickjacking, and just generally using sloppy code. That's why the onevent attributes are BLOCKED in the new content security policy methods when/if you dive into that.

https://www.w3.org/TR/CSP/

One of those things that IMHO is a nasty case of "Well about ****ing time!" since I said those attributes should have gone the way of the dodo a decade and a half ago.

 

Thank you for your insight. I will try to fix these issues. But I have a small question, why did you use tables not divs? Do you think it's better to use tables? because I like divs

And by the way your code looks much cleaner

 

He used a table because the data/content is tabular data - hence why he's trying to make you understand that you never use tags for what they look like, but for what they represent.