User interface design is the process of planning and designing the website pages that a user will see and interact with. This is referred to as the interface. Building a seamless, logical interface so that the user has a comfortable experience is crucial to the success of any website or app. The overall layout should be clear and easy to navigate. UI and UX designers work on designing these aspects - the terms are
What is UI sketching?
It is the process of drawing - either digitally or on paper - how the user interface for a website or app should look. This helps teams to visualize a project and ensure that everyone is on the same page. It also helps with problem-solving at an early stage of development. UX design beginners can and should take part in the process - it can be a great form or research into the user journeys that will be available on a website.
Planning the layout and overall design of an app or website puts the creators in the mind of the users. Understanding the purpose of the product is crucial as this will inform the various user journeys that may be required. UI sketches should be quick and dirty, essentially. They are not full blown plans, rather, they quickly represent ideas and let teams communicate effectively about the direction a project should move in. This process usually comes at the ideation phase of website development - this is in the early stages before development has actually begun.
Tips for planninguser interface design
If you wish to plan a new website or app digitally, one very useful tool for user interface design is a platform called Sketch. It is a platform that lets teams collaborate easily, share ideas, and brainstorm how the final product should look. It opens up the design process and gives everyone strong impression of how the project could potentially appear to the end user.
To get started with this tool you can sign up for a free 30 day trial on their website and test out the program. There is also a very thorough user guide and documentation available for users. Other tips to start using Sketch include the following:
Sign up for one of the platform's courses. There are a few different courses available for beginners, as well as for more experienced users. These include Sketch Master, Design+Code and Learn UX.
Explore the platform's various plugins that are available. This will give you an insight into the tasks that can be performed and the vast range of functions that are possible with the tool.
Sign up for an account and create a workspace for your team. This is one of the best ways for beginners to get started. Once you have a workspace set up, you will be able to play around with the tool and start planning projects.
Assign one team member as an admin and any others as editors. Each workspace requires at least one editor. Roles can be changed if needed once the workspace set up is complete.
Invite people to your workspace and let the collaboration begin. Members can be assigned either 'edito'r or viewer 'roles'.
Where possible, it is good to get all team members on board and contributing to the design process on the platform. It is a very collaborative tool and it's good to have all hands on deck.
This program can also be used for general website and app updates, not just for the launch of a new project.
Lastly, take a look through all of the platform's educational material. There is a lot of information about protoyping, importing and exporting files, designing, and plugins. It is good to explore all possiblities and functionalities
The main goal with this process is to ensure that everyone is on the same page in terms of layout and design, as well as to spot potential pitfalls before development begins. It is likely that a website or app will require many different iterations along its journey, regardless of any initial plans and goals. The opportunity to plan, test and retest is crucial in the web development process, and UI design places a huge emphasis on this.
Other important aspects of UX design include the principles of user-centred design, and conducting research to find out user needs. Design thinking is often used in user experience design. Lean and agile methodologies are also important in the UX design process.
Benefits of planning by hand
The main benefits to using this process when planing the interface include speed and making sure everyone is aligned. It is the quickest way to visualize and communicate ideas among developers, designers and project managers and a great way to make sure everyone is on the same page. It also helps teams to anticipate issues, whether it's with the implementation of a particular feature, or a gap in the user journey.
Once the plan is in place, the next steps are wireframing, prototyping and coding the website. The fine details of appearance or functionality are not urgent at the planning phase. Keeping things broad and general supports the creation of new ideas and allows for lots of 'outside the box' thinking, which is very valuable in web development.
Is this not just wireframing?
Although wireframing is also a fast planning process in web development, it is more focused on the placement of certain elements and the overall website hierarchy. It goes a little beyond the initial plans and is less focussed on the user experience. For a user experience designer, how the user navigates the site is crucial, rather than how the various pieces of the website sit and function together. It is more about the journey and user's perspective than the behind-the-scenes functionality.
User Experience Bootcamp
Beginners can learn about the entire process of designing for user experience in Ironhack's UI Design Bootcamp. The course covers everything from theory and methodologies to practical implementation of skills. It will leave you well-equipped to start a new job as a designer with skills in Figma, design thinking, agile methodologies and user research. Interaction design principles and information architectures are also covered. Building your first interactive prototype is part of the Bootcamp and this involves lots of practical skills application.
