Have you ever taken a good look at your favorite website? Like, a really good look. How the different elements on the page work together. The color palette. The font choices. The images used. Have you ever sat there and thought about how awesome it all looks together, and wondered how it’s done? Or wanted to do it yourself? All of the elements of your favorite website, of any website, are created by a web designer. And if you want in on the action, you’ve come to the right place. If you’re looking to get started in the tech industry, this guide will set you straight on how to get started as a junior designer, with insider information and practical tips for landing your first job as a web designer.- The responsibilities of a web designer
- The role of a web designer on a tech team
- The titles of web designer jobs you can look for
- The skills you need to become a web designer
- What you can create with beginner designer skills
- The real-life jobs you can get starting out as a web designer
WHAT IS A WEB DESIGNER?
There’s no specific definition of a “junior designer,” but it’s generally used for someone who’s just starting out in web design. Basically, it just means you’re new to web design and probably don’t have a ton of experience yet. Often (and in this guide), “junior” is used interchangeably with “entry-level.” It means that you are starting with fresh skills that you’ve honed independently and on smaller projects, but you probably don’t have much experience working on a design team...yet! And while we tend to think it’s more polite to call someone a “beginner web designer” or say they are just starting out, job listings tend to use “junior,” so that’s what we’ll stick to.
THE RESPONSIBILITIES OF A JUNIOR WEB DESIGNER
- CONSTANTLY GROW YOUR KNOWLEDGE AND SKILLS
- PROACTIVELY LEARN ABOUT TOOLS, PROCESSES, AND PRODUCTS
- DILIGENTLY FOLLOW DESIGN AND BRAND STANDARDS
- ALWAYS LOOK FOR WAYS TO HELP THE TEAM
- HAPPILY TAKE ON ANY TASKS THAT NEED TO BE DONE
- OPENLY COMMUNICATE WITH ALL TEAM MEMBERS AND DEPARTMENTS
- WILLINGLY ACCEPT FEEDBACK AND IMPROVE AS NEEDED
- CONSISTENTLY MEET GOALS AND DEADLINES
- ACTIVELY CONTRIBUTE SUGGESTIONS AND IDEAS
THE RESPONSIBILITIES OF A JUNIOR WEB DESIGNER
- DESIGN ASSETS FOR WEBSITES (INCLUDING IMAGES, BANNERS, ETC.)
- DESIGN HTML EMAILS
- CREATE WIRE FRAMES, MOCK UPS, AND PROTOTYPES
- HELP MAINTAIN BRAND LOOK AND FEEL
- IMPLEMENT NEW FEATURES AND IMPROVE CURRENT FEATURES
- PARTICIPATE IN AND SUPPORT DEPLOYMENTS
- WRITE AND MAINTAIN DOCUMENTATION
- TAKE PART IN PLANNING AND DEVELOPMENT MEETINGS AND PROJECTS
- COLLABORATE WITH OTHER TEAMS AND DEPARTMENTS ON ISSUES, REQUESTS, AND SUPPORT
THE RALE OF A JUNIOR WEB DESIGNER
As a junior web designer, you could have a lot of different titles depending on the size of the company you work for, the specific role you’re playing there, and the actual level of work you’ll be doing. For example, a UX Specialist or Interaction Designer still needs basic web design skills even though that’s not apparent in the job title. Here are a collection of job titles you could have as a junior web designer, so you’ll know what to search for when you’re applying for jobs:
- Web Designer
- Visual Designer Graphic
- Designer Digital
- Designer Interactive/Interaction
- Designer User Experience (UX)
- Designer User Interface (UI)
- Designer Front-End
- Designer Product
- Designer Creative
- Digital Designer Ecommerce
- Designer Web and Communications Specialist Mobile App
- Designer Email Designer
THE SKILLS YOU NEED
THESE ARE THE EXACT SKILLS YOU NEED TO KNOW TO GET A WEB DESIGNER JUNIOR JOB:
- VISUAL DESIGN
- PHOTOSHOP, ILLUSTRATOR, AND/OR SKETCH
- BASIC HTML + CSS BASIC
- JAVASCRIPT WIREFRAMING AND PROTOTYPING
- SOLID KNOWLEDGE OF COMMON DESIGN PATTERNS
VISUAL DESIGN
WHAT IT IS
Visual design is just what it sounds like: it’s creating all of the visual elements of a website—the images, typography, colors, icons, and other parts of the design. It also includes designing things like emails, banner ads, and images for marketing and promotion. As a web designer, you might not always create these visual designs from scratch (especially if there is a graphic designer on your team), but you’ll need to be familiar with aspects of design like color theory, typography, and design standards for the web to translate those static designs to the web.
WHAT YOU CAN MAKE WITH IT
- Websites
- Banner
- Ads Email
- Designs
- Icons
- Images
PHOTOSHOP, ILLUSTRATOR, AND/OR SKETCH
WHAT IT IS Photoshop, Illustrator, and Sketch are all design programs you’ll use to create the elements of a website design. They can also be used for designing things like mockups, wireframes, and layouts from scratch. You'll use these skills to map out the user experience of a site, and that means you’ll need to know your way around those common design tools even if you do the majority of your work in a code editor.
WHAT YOU CAN MAKE WITH IT
- Wireframes and Mockups
- Website Designs
- Icons
- Images
BASIC HTML & CSS
WHAT IT IS HTML, or HyperText Markup Language, is the language used to create structure and content like text and links. CSS, or Cascading Style Sheets, is the language used to format and style HTML. HTML and CSS are the basics of working in web design, and comfort working with them is an expectation. As you get more advanced and the line between design and development blurs, you may start working with CSS preprocessors like Sass, and more complex CSS layouts.
WHAT YOU CAN MAKE WITH IT
- Web pages
- Websites
- Apps
- Games
BASIC JAVASCRIPT
WHAT IT IS
JavaScript is a programming language that is often used to make web pages interactive. You can use it for animations, transitions, form functions, and other elements that your website’s users interact with. It’s also used to make websites responsive (so that they automatically reformat based on the size of the user’s display and the device they’re using). JavaScript is often the first programming language that many designers learn after HTML and CSS, and it’s one of the most in-demand languages in the industry. While a developer on your team might be responsible for writing JavaScript, more and more designers are learning to program, and it's a valuable skill to have if you want to get hired faster and paid more.
WHAT YOU CAN MAKE WITH IT
- Forms
- Menus
- Dialogues
- Interactive elements on a webpage
- Dynamic web pages
- Web / mobile / desktop apps
- Games
- UI effects
- Widgets
- Interactions
- Responsive layouts
- Custom plugins
WIREFRAMING AND PROTOTYPING
WHAT IT IS
Wireframes and prototypes are the first step in creating a website layout. They’re created to work out possible kinks in the design before a lot of time and effort is invested in the specifics of the visual elements, which might not all work together as the design is finalized. You'll build wireframes and prototypes to map out the user experience of visiting the site or app you're working on. WHAT YOU CAN MAKE WITH IT
- Website wireframes
- Website mockups and prototypes
- App wireframes
- App mockups and prototypes
SOLID KNOWLEDGE OF COMMON DESIGN PATTERNS
WHAT IT IS
There are certain standards in how websites are designed that help with usability. Things like how navigation works, how forms work, how links are formatted, and similar standards are what make websites more user-friendly and allow people to find what they need without an instruction manual. The most popular, industry-approved patterns and standards are always evolving, so you’ll need to stay active in the community to make sure you’re on the ball.
WHAT YOU CAN MAKE WITH IT
- User-friendly websites
- Websites that work the way users expect them to
GIT AND GITHUB
WHAT IT IS
Git is a version control system for keeping track of changes to code and documentation, and GitHub is a web-based tool for using Git. Both Git and GitHub are crucial skills for working on a tech team. Even though you don’t hear much about it outside of the tech industry, being comfortable with Git is an expectation for most design and development teams.
WHAT YOU CAN MAKE WITH IT
- Store code and documentation
- Copy and contribute code and documentation
- Track changes to code and documentation
- Collaborate with other developers
PROJECT MANAGEMENT SKILLS
WHAT IT IS
Even as a junior designer, you may be tasked with projects that you need to manage yourself. You’ll need to know how to organize and manage a project, and how to use various project management software (like JIRA, Asana, or Basecamp). Like Git, project management is not a web design skill, but a tool to help you do your job. Learning these systems will make it much easier for you transition onto a new team.
WHAT YOU CAN MAKE WITH IT
- Manage projects
- Make sure things get done on time
- Make sure your team works together to complete a project
ADVANCED HTML + CSS
WHAT IT IS
More advanced HTML5 and CSS3 skills include things like CSS animations and HTML canvas. These aren’t skills you’ll necessarily be required to know as an entry-level designer, but learning how they work can make you a much more valuable asset to any tech team. There is also a lot of room to specialize in different areas of animation and interaction design as you find out what you gravitate towards as a web designer.
WHAT YOU CAN MAKE WITH IT
- Animated websites
- Interactive web apps
- Interactive games