0

I'm a senior back-end developer. I have a sister who's a designer, and she really struggles to get to the end of the month. I see how successful web designers can be in agencies and software companies - I suggested her to take this path and she really liked the idea.

However, she's a visual kind of person and hates messing with code. When I told her she could be a web designer without messing with a single line of code, her eyes shined.

She has a lot of energy to learn right now, and I would like to suggest her a solid path to become a professional web designer in modern days - I'm afraid that, if she tries to find that path by herself, she will exhaust all her energy and will not make it happen.

I imagine there are a lot of experienced designers around here. Can you please give your detailed insights on how to become a valuable professional in this area - step by step?

Example: Learn Photoshop/Illustrator - Learn about Bootstrap grid - Do this, do that - Read this, follow that, here's some good references - everything you think it would be good that someone told you when you first started this path.

PS: Please hold your urge to mark this as a duplicate. I've done my research but couldn't find quality answers/questions for this, specifically.

PS 2: For the people marking this as duplicate, I think that you guys missed the point of the question. As a developer, I had received a lot of websites made in Photoshop that I had to code. The designers that did those websites in Photoshop, didn't even know what CSS was. They didn't know how to code. Still, they were one of the top paid designers building websites. None of those related questions answers this question properly. A shame.

  • I would have liked to recommend Adobe Muse, but unfortunately Adobe is discontinuing it, much to the annoyance of their users. I've used it for a couple of websites - no coding required. I'm in the same boat - not a coding person at all, design is a very visual activity for me, but I do kinda know the basics of HTML and CSS. The software still works though, but you have to jump through some hoops to find it in the CC desktop app. Go into Preferrences > Creative Cloud, and enable "Show Older Apps". – Billy Kerr Oct 1 '18 at 15:49
  • 1
    I feel like being a web designer requires a certain knowledge of HTML, CSS, and JavaScript. Without knowing these things to a degree, it will be hard to communicate effectively with developers in my opinion. It would be analogous to doing print design without a working knowledge of the capabilities of printers. – Scribblemacher Oct 1 '18 at 15:52
  • I urge you to read this post but replace mathematics with code (they are sort of the same anyway) and you will get your answer do you need... – joojaa Oct 1 '18 at 18:20
  • In anycase even when your using something like invision or adobe XD your doing code just in a very roundabout way. – joojaa Oct 1 '18 at 18:22
  • 1
    Related: Do web designers need to know how to code? – Zach Saucier Oct 1 '18 at 23:41
8

There are two very important factors I see....

To be good at design, one must understand production.

I think that even if you can't "code" you need to know what is and is not possible and how code generally functions. Any good designer understands the methods of reproduction whatever they may be - print, web, packaging, fashion, environmental, mechanical, etc. Without knowing what is possible you can not effectively design anything. Sure you may make pretty pictures, but they are worthless if they can't be reproduced for the given medium.

Not everyone who wants to be a designer can be a designer.

Every individual is different with different strengths and weaknesses. It is equally possible for everyone to be successful. Just as it's equally possible for everyone to not be suited for a career in design regardless of the desire. Not everyone who wants to be a designer is cut out to be a designer. Similar to how not everyone who wants to be a professional athlete is skilled enough to be a professional athlete. Desire alone does not make an individual "more skilled" at anything.

I do not wish this to sound overly defeatist or alarming. But really, there is no "one path" to success which can be laid out in front of someone. It's not a math formula to be solved with specific steps that result in a given outcome. It's a fluid, ever changing, landscape which must be adapted to constantly containing many, many, many different routes an individual can pursue.


Truth of the matter is most designers fall onto a spectrum:

enter image description here

Most often you run into those around #2 or #5. More experienced designers will fall in the #3-4 range. And it's all highly dependent upon the actual project at hand. It is rare to meet a designer, any designer, that is at 1 or 6 and is thriving independently.

Larger corporate environments are more apt to hire designers in the 1 and 6 areas for web design. In those environments an entire team is used and what a designer may lack in technical ability is balanced by more technical employees. Both ends of the spectrum are employed so no single person needs to cover everything in most instances.

It is possible to be a successful web designer at #1 or #2. Code building is (rightly) seen as a separate position by many larger or more successful corporations. They want the individuals with an idea a minute and constant ways to replicate the same idea in new, fresh, exciting ways. They seek out those in the 1 and 2 range for design because the technical aspects can always be covered by others.

The difficulty will be in finding employment.

Most small to mid-sized (local or regional) businesses won't see web "design" and web "development" as two completely separate positions. They will expect some overlap. They will want a "web designer" to be able to build that quick email, landing page, or maintain their Wordpress site (web master) without the need to hire a "web developer". That's where things get tricky. It's difficult to move up in the field of "web design" with zero code ability. The market is saturated by new graduates every year. And with the speed at which web building changes, it's a constant learning processes. What was the "norm" just 2 years ago is no longer in use today.

So, if there's zero desire (or ability) to learn the technical aspects of web design, in order to land those juicy corporate positions you'll need to have a portfolio that is breathtaking and exemplary - which she may very well have.

Without any knowledge about the individual it's really difficult to state if they can or can not land those corporate positions which favor creativity over technical ability.


As for "step by step instructions" regarding how to get employed as a web designer. Well, that's nearly impossible to provide without some understanding of the existing skill set.

A general, broad list of what's needed would be similar to:

  • Asset creation and photo editing (Photoshop, Illustrator, Sketch, Gimp, whatever) But be aware that their overall use for full page designs has decreased in recent years to a degree. See this 2014 question.
  • Basic HTML and CSS. Use of mockup tools, such as Adobe XD, may be helpful here, but a designer worth their paycheck would still understand how basic HTML and CSS function. They aren't "rocket science" or difficult to learn. Not knowing them in the field says more about a designer's desire to be proficient more than anything else. One should at least understand the limitations of the production method.
  • For employment, knowing responsive packages may be helpful - Bootstrap, Zurb Foundation, et al. But on your own, some may not be as beneficial as others. See here. Overall the concept of responsiveness and breakpoints can greatly alter layout and design choices, so it should be a concept any web designer grasps. "Mobile first" will shift the design thinking process a great deal.
  • Possible exploration into Content Management Systems (CMS) - Wordpress, Drupal, Joomla, Magento, etc. In the case of CMS packages, understanding how they can be templated or "skinned" may be beneficial. There are many small webdev companies out there hiring designers and all the company does is re-template Wordpress or Drupal. So, kind of depends on what type of employment is being sought out. I wouldn't delve too heavily into this, but grasping that these packages can be visually designed for the front end may be helpful.
  • Added pluses would be understanding interactivity and what is or is not possible via packages such as jQuery, Prototype, Angular, etc. Knowing you want "that to hide" and "that to slide down and change images" can allow the designer to more thoroughly create an overall design if they grasp what can be done - even if they are completely clueless as to how to write jQuery/Prototype functions.

As a freelancer or independent contractor... to put it rather blunt, there is absolutely no way I know of to be successful without some ability to build at least front-end web pages including understanding CSS, HTML, and responsiveness.

Just as a freelance print designer can not effectively design for print without understanding color breakouts, spot color, registration, pagination, imposition, trim, bleed, overprints.. etc. a freelance web designer, even purely front-end, needs to have the same grasp over similar web-based technical aspects of production.


This question is akin to asking "How can I be an veterinarian who only works on exotic animals? I hate dogs and cats." -- you generally can't. You work up to that achievement, you don't start at that point without some high-end formal education and financial backing to support you until you can establish a reputation which may take years. Are there those employment positions out there? Sure. But landing them is very difficult. More so if there's no proven experience.


related:

  • I am a freelancer web developer. My designers deliver pdf files from InDesign and Illustrator. They understand what I do, but they cannot code. This is a real-life example to support your point of view. – JoostS Oct 2 '18 at 7:09
  • Thanks for putting your effort, knowledge and time in this answer, Scott. I'm still not 100% certain how to guide her in this path, but I'm more prepared to do it now. I'll accept your answer. Thanks! – Lucas Bustamante Oct 5 '18 at 13:57
  • According to a recent survey from dev.to, a community of developers, 77% of the coding teams create design mockups before coding. This is the niche I'm talking about. A design person in a coding team, too bad people didn't get the question right and closed this as a duplicate. discourse-cdn-sjc2.com/standard17/uploads/httparchive/optimized/… – Lucas Bustamante Oct 8 '18 at 18:47
  • Really unclear. I covered the "design person on a coding team" in my answer. As posted.. landing those jobs requires a fantastic portfolio and applying at much larger business in most instances. – Scott Oct 8 '18 at 22:19
1

The apps for the current times are InVision Studio or Adobe XD, and their lesser-known counterparts. Although they are referred to as "UI design" tools, and one may think it's for creating apps or form fields, a website is just like those things. The tools I mentioned let a person design and layout the website as well as show how it would interact with the users. Without using any code, an artist can create their different web pages and drag little wires between them to create a click-through prototype that can be viewed on all devices that have a browser.

Another suggestion is, coding will be inevitable. Sometimes just the thought of 'code' would freeze someone in their tracks due to the fear of the unknown. But, we have super cool weapons to aid the creative designer in their quest for code!

  1. Head First books! These seemingly ancient tomes of an increasingly obsolete format actually go a long way to educate a non-technical mind. How? They make it fun by sticking a lot of pictures and anecdotes into the book, so by the first chapter it becomes an engaging and quite interesting read.

  2. Children's books! Yea, coding for kids is actually coding for the kid in all of us, and a curious adult may leverage the non-technical approaches in kid's coding books to get a handle on the subject.

  • These are some solid directions. Knowing the modern apps is a great step already - thanks! – Lucas Bustamante Oct 1 '18 at 19:05
0

I can talk from my own personal experience.

As a graphic designer, I was always allergic to code, today I like it as much as design. But it's not something that happens from one day to the next, it's more a process. I can describe a ten points planning:

1 - Back-end / Front-end

The fundamental: describe well the difference between a back-end and a front-end. Designers usually understand by coding only the back-end and that is what terrifies us. Show what the difference is, define that a designer will never do back-end unless want it expressly. On the other hand show the great possibilities that a good front-end designer can reach.

2 - HTML signature

A simple design exercise to start coding is the creation of a signature for the own mail made in HTML. Both Mac Mail and Gmail allow you to place an HTML as a signature.

3 - Make a Newsletter

Start with small pieces, for example a newsletter. The case of the newsletters is very interesting because the compatibility with the different mail clients and devices, it forces the coding in-line (not CSS). This is a very efficient learning system.

4 - Force to test

Designers always need motivation to create, ideally that motivation is a client. But when studying something new, the motivation can be to create our own graphic pieces. Propose that from now on every email send to her contacts must be an HTML, this forces not only to code but also to test, which we all know is one of the most problematic parts of coding.

5 - Investigation

Investigate real codes. On the internet is easy to find free newsletters to download. Open the HTML in Dreamweaver and experiment modifying, deleting or adding.

6 - Play

Create an account in Codepen, go to the search engine, browse results, open the simplest ones and experiment with the code. The interface with a very clear differentiation of the HTML, CSS and Script fields allows to make a schematic visualization to familiarize about how the coding works.

7 - Always ask and interactivate with experimented people

Create a user in Stackoverflow, ignore the impertinences, have a lot of perseverance and ask everything. The world is overpopulated with gifted, nothing better than to use them. And if they get nervous, it's their problem.

8 - Play 2

Open a newspaper online, click with the right button and click on inspect. Where this phrases appear: background-color:#ffcadf; or color: # 333; change the numbers. We designers love this. Search font-size: 12px; and change the number. Search background: url (../img/common/photo.png) and replace what is in parentheses with an internet image. In a word, see the changes of a web when modifying CSS options.

9 - Star a project

Plan a simple online portfolio, a page with an image grid. The motivation is to collect and create all the images in the first instance and see how to locate them. Once done, make it Flex. Once done, make interactivity. Once done, make it responsive. Once this is done, make a menu to access other pages within the site ... It's not a single day's work, nor a week's work. It's a learning project.

10 - Study

If there is the possibility of studying, perfect. Although it is difficult to find a coding studies program with some motivation for a graphic designer. Maybe this is a good point after a while, when there's already a familiarity with the coding and we already know what we will use it for.

  • Hi. thanks for taking your time to answer the question. I would like to give feedback on your answer. I think she can be very successful focusing on design only. A great UI/UX designer that deliver outstanding visual work can be very valuable in a software company, without writing a single line of code. My vision for her is that she would eventually get in contact with code, but down the road - I want her to be able to create stuff right away, so she can enjoy doing it and find the energy to move forward. – Lucas Bustamante Oct 1 '18 at 19:17
0

1. Definitions

There are several definitions of "Graphic design". Some are just motivational definitions.

But one rough definition of Graphic design would be "to solve one visual communication problem aimed to actually be mass reproduced".

The difference between a visual art piece and design is that art is not meant to be mass reproduced. A painting is a painting. A design is part of a process that will be taken to some additional steps, prepared to be printed, printed and distributed.

Web design is also a part of a process, which needs to be done. If not, it is a pretty image, but not a design.


2. To code or not to code. That is the question

A web designer without messing with a single line of code.

One thing is not to mess a single line of code, and another very different is not knowing how they work and what it does.

I do not know if she hates it because she finds it boring, or it takes too much time to do, because it is not visual or because it is alien language to her. I don't know the reason.

But that is the next step in the process. And it is pretty dam important.

There are assets that need to include its own margin or this margin will be coded. There are animations that need to be self-contained, or some other needs to be separated assets. There are some parts that need not be assets at all, only a layout base. The usage of the elements are defined by how will they be used, and this usage is defined by the code.


3. What code is?

If a back-end developer... aka you... are the one showing lines of code to another person... You simply scared that person. :o)

For a Web Designer, the code expected is simply HTML and CSS. And CSS uses the same concepts any Designer should know. Background, color, size, position, "layers", margin, padding, etc. and it can be fun.

And they should know what is and the basics of JavaScript. Not to program, but to adapt it... Copy-Paste probably is enough here.


4. Girls just want to have fun

And boys too. So make learning HTML + CSS fun.

--

5. Success

How successful web designers can be

And also print media designers, electronic media designers, motion graphic designers, etc... But in my opinion, a successful designer is not a limited one.

If there is the remote case of some extraordinary talented designer that has some Jr. Designers and developers to solve technical problems at their disposal, fine. They do not need to touch a single line of code.

But most likely she will be one of those Jr. Designers, so the best tool is not to be limited.

I do not know the reason she is struggling right now. Probably in her current field, she is also limited by something. Printing costs, marketing, promotional stuff... the lack of a webpage...

Moving her from one field to another field with a "safe space" mentality is not good.

She needs to embrace whatever is limiting her right now or in the future web designer field.


So yes, she must know about code. HTML and CSS and a bit of JavaScript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.