Making a start…
I have no master plan and don’t want to set any limits, but I do have a general idea of the first steps I want to take.
As a freelance designer, I design almost every day. Having a few years experience I can confidently take project briefs, generate design concepts, incorporate feedback and deliver final designs to hand-off for production, but I am always frustrated by not being able to translate my designs in code.
My experience includes designing websites, portals and apps. I have launched a number of WordPress websites for clients using customisable themes. During this time, I have gained some basic knowledge of HTML and CSS but I find myself compromising my design to my limited coding ability.
Therefore my first goal is to be able to code what I design. I am not looking for a fully functioning website or app, but a true visual representation of what I design. I want to be confident that the code I create and handover to developers is of a professional standard.
Where to begin
Before learning something new it’s important to understand what you already know, what you need to know and then plan a path to reach your goal by filling in all the missing skills/knowledge areas along the way.
Inspired by the Feynman technique, I want to learn the subject in depth, so as to be able to explain it in plain language to another person who has little knowledge of the subject.
I learned very early the difference between knowing the name of something and knowing something.
Richard Feyman
Basic approach
- Identify the subject and write down everything you know about it. Define the gaps in your knowledge into subject areas and list them.
- Deconstruct each subject area into simple tasks, that can be learned quickly. You can use the 80/20 principle to define which are the most important or commonly used tasks you need to learn.
- Learn the subject well enough to be able to self-correct and/or to explain it in simple terms to a friend or colleague.
- Review and correct, before moving on to the next task.
OK, let start with what I think I know…
Design process
- Everything starts with a briefing document, project outline or design specification in order to define the deliverables and goals.
- Research for the project, understanding needs and requirements.
- Create wireframes (low fidelity design) to quickly test concepts.
- Visual design (high fidelity design and mockups), creating the visual style and language for a website, app or product.
- Design prototypes (basic demos including some clickable functionality, page transitions, etc) to test interaction and key flows.
- Approved wireframes, visual designs, style guide and prototypes are then handed over to a front-end designer/developer to code.
Going a bit further each of these areas has certain tasks.
Tasks
Understanding, I will make broad strokes here as every project varies based on the information you receive and the involvement required for the project. Understanding defines what is possible and which solution will potentially produce the best results based on what the customer (user) wants or needs, the clients’ goals, available technology and budget. Tasks can include customers and stakeholders interviews, user product testing, market research and mood boards and other tasks that can offer potential insight into a project.
Wireframes are used to quickly create designs to show how a website, app or products will look and function at a basic level. These are used to explore how users engage with the design in order to perform a series of tasks or follow a customers journey. The wireframes can be simple hand-drawn sketches, keyline drawings or even clickable demos. These are reviewed and tested before passing on to either a visual designer, front designer/developer.
Visual design is the creation of high fidelity design, generally using design applications such as Sketch, Adobe CC. Visual design, developed from the wireframes, creates the look and feel of a website, app or product. The visual design will define layout, colours, typography, images, graphics and icon style used in the final product. These choices will often be influenced by a companies/organisations branding and marketing communications. Once the visual design is approved, completed screen/page designs and design assets (logos, image and icons) are passed on to the front-end designer/developer. The visual designer may produce a style guide of key design elements and components to be used as a reference in any future design developments.
Front End design/development is the translation of the design into the code used in the final website, app or products.
Roles
UX or UXD (User Experience) designer is focused on the processes found in a website, app or product and how they engage with the user. They are interested in finding the most convenient and practical way for the user to perform a task while providing a pleasurable interaction between them and the product/service they are using.
UI (User Interface) designers create the visual design of a web page, app or product. The UI designer role is to develop a visual design language which enhances the UX design. They create an aesthetic to match both the required functionality and also align this with the brand values of the company/organisation and to make this appealing to the user.
UI/UX designer is comfortable in both of these roles.
Front-End designer/developer takes the finalised visual design and recreates them into the workable front-end code of a website or web apps using HTML, CSS and Javascript.
You could simplify the roles as follows; the UX designer is interested in how people interact with a product, the UI designer is interested in making the product as unique and attractive to people as possible and Front-End designer is interested in using logic and reason to ensure the product functions.
And now what I don’t know…
I have split this list into two areas one is code related the other is design software related.
Code
This is the area I will focus most of my time as it’s the one I know least about.
- I don’t know enough HTML/CSS to recreate my design in code.
- I don’t know anything about JavaScript and I will need to know how to be able to write JavaScript or use a JavaScript framework to deliver Front-End design.
- I don’t know about CSS frameworks, and if I should learn a framework, which framework should I choose (Bootstrap/Foundation, etc).
- Should a Front-End designer/developer know other languages and if so which languages?
Design
Even though I use a number of design applications, I will look to add some new applications to improve my workflow.
- I use Sketch but I need to improve my knowledge to be more comfortable using it.
- I need to explore the latest design tools such as Invision Studio, Figma and Adobe Experience design and test these to see which is I should be investing my time learning.
- I have limited experience of design prototyping tools and need to find a solution that fits into my workflow.
Next step
Learning HTML in 4 weeks