I had a neighbor ask to pick my brain about what it takes to move into the web design and development field. She is starting her degree program and still has a couple of years but is wise to start working toward her career now. I was originally just going to respond to her directly but I figured I’d write a blog post because I think it might be helpful to others, too.If you run an agency or have differing opinions on some of these answers, I would love to hear your perspective.
In the beginning of the internet, these two terms were synonymous… mostly because it was so technical. At that time you usually found IT companies/individuals that built websites. And most of them were ugly. It was okay because we sort of expected it.
There is a difference between web design and web development. Web design is usually what makes it pretty but web development is usually about making it functional. Let's talk about the skills you need for both of them.
This is a big category of skills. At the minimum, you’ll need to be artistic. You might be a good illustrator, but drawing on a piece of paper as an illustrator is not generally a skill of a great front-end developer. But it certainly is helpful.
I think this is the first skill any front-end developer should learn. Well, it’s really two skills. You should understand HTML & CSS well enough that you can design a site on paper or a white board before ever putting fingers to keyboard. Start learning HTML 5 as well. Even if you aren’t fully embracing HTML 5, use as much as you can for now.
This is where 95% of your mobile responsiveness on websites come in to play. There are many frameworks out there. One of the most common is Bootstrap. That helps quite a bit but doesn’t absolve you of the responsibility to learn it dead cold from scratch.
Flash was a thing 20 years ago. 15 years ago we tried to get people to stop using Flash. It’s mostly gone away now. JQuery replaces Flash where HTML 5 is not understood or practical. Use HTML 5 and CSS Transitions where you can but JQuery adds the little pop that people expect and can simplify things quite a bit.
I can’t tell you which language or shorthand language to learn well without knowing the direction you want to take your career. If you are going to work at the corporate level or with IT companies you are more likely to encounter Microsoft Server technologies so SQL/ASP.net are going to be important. If you work with an agency, you are more likely to run into open source technology like Wordpress or Drupal (we prefer Drupal for a whole host of reasons). In that case you need to learn PHP and TWIG. You won’t have to understand this as well as a back-end developer but you should understand some basics here.
My preferred tool is Adobe Illustrator but I also am a businessman first, developer second, designer third. When you are designing any type of line art, vector style design, this is the rockin’ way to go. Especially since you can save the files as SVG which make displaying on the web super smooth.
This is the go to design application. Many front-end designers still use this for mock-ups but it’s not the best tool for that. Not by a long shot. This is best for creating web images and saving them as images. FYI. Google is not fond of PNG so avoid those if you can.
This falls in another skillset that we won’t really discuss. That is the user experience designer. I put it here because we have found that using Photoshop to create mockups is more time consuming and less effective than a tool specifically designed for this. Oh, and Adobe understands that Photoshop is the wrong tool for this job.
Adobe XD and Figma are the two most popular tools for wireframes and mockups. W
Overall, front-end development is a constantly evolving field, and it is essential for developers to stay up-to-date with the latest technologies and best practices.
This category requires much less creative skill as your job will usually be to take the designs from a web designer and implement them. Usually a rock start at one will be okay at the other.
Your focus here will be on the languages mentioned above (PHP, TWIG, etc.) as well as the markup skills (HTML & CSS) but you’ll have to get deep into them. You’ll need to create templates, integrations, API calls, etc. You’ll need to understand GIT workflows (or similar). You’ll have to figure out how to make the pretty designs work. You’ll get deeper into JQuery and Javascript. You must be a miracle worker.
In addition, you’ll likely have to understand server technologies. While you might have server support to do the more technical elements, you should be able to do a fair bit on your own. You should understand how to troubleshoot a Wordpress or Drupal install on a server and know how to get the server to support it.
In summary, becoming a back-end developer requires a solid understanding of programming languages, databases, web servers, APIs, security, version control, testing, debugging, problem-solving, and scalability. You should also be willing to continuously learn and stay updated with the latest technologies and best practices in the field.
There are so many tools out there and some you’ll find useful. One skill that my neighbor is learning now is Adobe InDesign. While I think that InDesign is a great tool, it’s purpose is to create publications. Usually a web designer or web developer doesn’t have a need for this tool. In our agency, we only use InDesign when we are creating a long-form e-book or downloadable. If you are in a traditional agency, you might use it but not usually for web work.
I’m sure I missed a few things. I based this mostly from the questions my neighbor asked me but I’m sure there are more questions that people might have. I’m also curious of what other agencies do and what’s important to them. Let me know!