What is your advice for a web graphics designer: who is getting started as UX/UI designer, what software do I use and what codes should I learn?

It’s helpful to frame your inquiry in these descriptions:

• Web Designer – a designer focusing on visual design of websites
• UX/UI Designer – a designer focusing on user research and user interface of websites and apps
• Software – design software that helps in the design process
• Language – markup, stylesheet, scripting, programming language for front-end web development

Leveling Up

So you’re a visual designer widening your view to the bigger picture of the design process–including user research, interaction design, user interface design, even front-end development. It’s great to delve into new skills.

The Elements of User Experience

We could use The Elements of User Experience by Jesse James Garrett as a framework for our design process. It consists of 5 planes:

1. Strategy – Business Objectives, User Objectives
2. Scope – Features, Requirements
3. Structure – Information Architecture, Interaction Design
4. Skeleton – Information Design, User Interface Design, Navigation Design
5. Surface – Sensory Design, Visual Design and Accessibility

You would notice that one plane builds on top of the next plane, and so on and each plane is its own realm wherein a whole new discipline evolves–but pretty much these are the aspects that we must take care of in our websites and apps.

Software/Tools

1. Strategy – Word Processor, Documentation Tools (Google Docs)
2. Scope – Word Processor, Documentation Tools (Google Docs)
3. Structure – Diagramming Tools (draw. io)
4. Skeleton – Wireframing Tools (draw. io, Sketch)
5. Surface – Visual Design Tools (Sketch, InVision)

You could also go barebones and simply use pencil, paper, and HTML & CSS.

Languages for Frontend Web Development

It’s great for designers to at least have an idea how the designs are implemented. This gives them the knowledge of the possibilities and limitations of designing for the web or for a particular platform.

The first level of implementation is the front-end wherein you, as the designer, would handoff your design artifacts and other relevant documents to the front-end developer.

However, you could also be this person responsible for the front-end web development of the website or app.

Here are the basic languages that power the web:

• HTML – markup language
• CSS – stylesheet language
• JavaScript – scripting language

Learn these basics and soon you would be able to dive deeper into different frameworks and languages.

It’s important to note that front-end web development is the convergence between design and development; it is a whole new world, so to speak. Learning it is optional to some designers and a must to some.

---

Originally published in Quora