My friends who do front-end with me, but aren't designers, don't dare to call themselves designers, because they know the difference between the two jobs. They know what they aren't.

I am a UI Designer, with UX skills who also develops front-end.

The thing is it comes down to what you define as "design". A LOT of people are under the delusion that design == art, to the exclusion of all else. So called "web designers" where all they know how to do is dick around in Photoshop, Fireworks, or some other image editor as their starting place lack the knowledge of HTML, CSS, accessibility minimums and guidelines, to design a blasted thing.

DESIGN is engineering! Specifications, tolerances, guidelines, usability, sustainability, accessibility. Hiring an artist under the DELUSION that they're a designer is almost always an epic steaming pile of failure no matter how good the poor sod trying to turn that PSD into a website is at it. It's a back-assward approach to building a website and the opposite of every sane and rational bit of progress we've had in design the past 20 years!

... AND such ignorance is how you end up with TRAIN WRECK themes like hashnode's current one with the illegible white on teal, illegible white on blue, illegible grey on grey, and a mish-mash of inconsistent font-metrics where they can't make up their mind if they're using px, em, or pt. (hence to even use hashnode now I have to override their design with stylish!)

... AND why we end up with template whorehouses populated by snake oil peddlers and two bit hucksters like ThemeForest and TemplateMonster overflowing with laundry lists of how NOT to build a website.

Which is why I advocate the content FIRST approach with separation of concerns, graceful degradation, meeting WCAG 2.0 guidelines, and worrying more about doing what's really important -- delivering CONTENT to as many users as possible -- than I waste time dicking around with the artsy-fartsy bull.

When I say architectural design, electrical design, mechanical design, do you picture some hipster wearing fake horn-rim glasses they don't need spanking it on a graphics tablet in Starbucks whilst trying to decide between a Leaf or a Prius? Or do you picture a guy wearing actual corrective aviators, a slide rule and TI calculator in their pocket, double-pounding Dunkins cold brew dark roast no ice quadruple sweet, browsing auto-trader trying to find a replacement bumper for their 1982 Saab 99 Turbo?

It's like the difference between Ralph McQuarrie and Chip Foose... McQuarrie may be responsible for some of the most iconic sci-fi art ever, but nothing he ever drew would be practical without breaking the laws of physics -- or even basic geometry. Chip can draw you a picture of a cool car, actually build the bloody thing, and it'll go down the road straight... because he has the underlying engineering knowledge!

As I've said dozens if not hundreds of times the past fifteen years:

1) Start with your content or a reasonable facsimile of future content in a flat text editor in a logical order as if HTML, CSS, and JavaScript do not even EXIST.

2) Mark up that content semantically -- so no DIV, SPAN, ID, or classes yet -- saying what things ARE and NOT what you want them to look like. Use numbered headings and horizontal rules to establish document structure, use paragraphs around ACTUAL GRAMMATICAL PARAGRAPHS (I know, the horrors), lists around short bullet point lists (not as in it has a bullet next to it, but as in a grammatical bullet POINT) or sets of selections, tables around obviously tabular data using ALL the tags and attributes for a table and not just TR and TD, etc, etc, etc... and you REALLY want to do the world a favor, pretend the idiotic halfwit dumbass ignorant pointless redundancies that are the ALLEGEDLY structural HTML 5 tags (NAV, HEADING, FOOTER, ARTICLE, SECTION, ASIDE, NAV, MAIN) and pretend they do not exist. They are universally redundant to H1..H6 and HR, or at least would be if browser makers would finish implementing HTML 4 correctly.

3) ONLY then do you create the layout, adding the semantically nuetral DIV and SPAN as needed for presentation hooks, and again using classes and ID's as needed to say what things are, NOT WHAT YOU WANT THEM TO LOOK LIKE! (this is why halfwit mouth-breathing idocy like OOCSS or Bootcrap is for people who don't know enough about HTML to be making websites!). Don't worry about colouration and so forth, just get stuff in a CSS driven layout that makes sense -- and that layout should be elastic (the WCAG says to use EM, so use 'em!), semi-fluid (max-width) so long lines of text do not become unwieldy, and of course RESPONSIVE.

Said CSS belonging ENTIRELY in an external stylesheet and to be frank, for 99.99% of practical websites if you "need" more than 48k of CSS for your base template, you screwed up. (and that's me Mr. Scotting that number!)

4) THEN you can go ahead and give it the paint by numbers treatment, adding colours, gradients, and presentational images. REMEMBERING that images that are NOT content have ZERO damned business in IMG tags!

5) At which point you should have a fully functioning responsive page, ENHANCE with JavaScript as desired -- if you care at all about reaching as many users as possible and not pissing your own bed, keep that scripting enhancement to a minimum and ALWAYS have a graceful degradation plan should JavaScript be blocked or unavailable. PARTICULARLY as people facing bandwidth caps, overage charges, and so forth continue to increase in numbers.

Much less the paranoid folks running browser extensions like NoScript or Ghostery telling you to take that JavaScript and shove it where the sun doesn't shine!

That's called progressive enhancement, it's how you make a website that gracefully degrades when fancy bits are missing. It's how you make a website that indexes well for search. It's how you make a website that's useful to people on screen readers (software that reads the page aloud) or braille readers. It's how you make a website that's more than just mouse navigation friendly.

THAT'S DESIGN!!!

Now, I'm not saying art doesn't have a part to play -- but it's just ONE small piece of a much larger puzzle. STARTING with the presentational art and pixel metric layouts is putting the cart before horse and is an utterly irrational approach when websites are about MORE than just the perfectly sighted user sitting in front of the same perfect quality 4k HDR display as the "artist". (yes those are air quotes, yes in that case it would be pronounced "arteest")

Bottom line, I don't care how "pretty" what most people under the DELUSION they are "designers" vomit up. If it fails to meet accessibility minimums, fails to follow usability guidelines and advice from legitimate studies by places like nnGroup, is so bloated with art it takes forever to load, so bloated with scripting and garbage 'frameworks' that it takes even LONGER to load, and therefor alienates or excludes large swaths of potential visitors from even BOTHERING to TRY and use the site meaning high bounce... then what the hell good is it?!?

We oft make fun of Ballmer for "developers", but lands sake people, CONTENT CONTENT CONTENT CONTENT!!!

I'm in learning phase. But according to me. For a good front-end user algorithms and data-structure is necessary. Designing is a plus point but not mandatory is you are working with a team. But if u r alone as a freelancer then you should have designing skill.

Well, my friend once explained web development to me like this:

You have three people working on a site:

• First: Designer, who designs how site's gonna look (Using, let's say PhotoShop)
• Second: Front-End Developer, who makes what designer designed and site's functionality (Using HTML, CSS, JS....)
• Third: Back-End Developer, who does his own job (Idk what back-enders do, sorry)

I hope this was helpful :)