Web Design Bootcamp
Day-to-Day – UI Design

In my last blog post, I shared the first module learning outcomes about the planning process and user experience.

Diary entries:

• Diary 1: Bootcamp – UX Design
• Diary 2: Bootcamp – UI Design
• Diary 3: Bootcamp – Development
• Diary 4: Bootcamp – WordPress, Hosting and Domain name
• Diary 5: Bootcamp – Digital Marketing
• Diary 6: Bootcamp – Freelancing

In this article, we will dive into the User interface design and what we learned in this section of the course.

But let us start with the definition of User Interface (UI).

“User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions”

This means that we focus on the visual aspect of a web page. For examples Buttons are easy to identify, the typography is pleasing to read, the colour palette is matching and many more.

At Web Courses Bangkok, our Teacher Dimitri, started with the question, what are key UI elements and for what do we need them?

The main ingredients for successful UI design are Media, Typography, Navigation, Forms and Interactive.

Media elements include images, video and audio. A brand can help to tell their story or describe a product better. We discovered that we should avoid cheesy stock images because it looks generic and not build strong branding.

Important to know is also where we should place certain media. For example, the hero image is an instant snapshot into the website and should portray the main purpose of the page. This picture or video should be eye-catching and create interest. When you decide to add a gallery, more details of a product or company can be shown.

For eye-pleasing content, we can add sliders, gallery, a lightbox and more. This allows us to structure our content, put it in the right proportion and highlight specific products or services.

Typography’s main elements are headings, paragraphs, quotes and testimonials. We learned in the boot camp about the details of what makes up typography and how we can decide relevant families for our current and future web design projects.

[text-blocks id=”59324″]

We learned about good and bad examples to get a feeling for the right patterns and choices. Bad examples have been a paragraph with to lose or tight spacing, wrong scaling, bad readability, too many typefaces, inconsistent alignment and more.

On top of all the different mistakes, we learned how we can do it better or fix an existing project

I really liked that our Teacher shows us various examples from real websites, which he was re-designing, so we get a good feeling of actual work challenges a web designer face.

Navigation is used to go to the main sections of your site, not all of them. It can be placed on different page positions and mostly vary between desktop and mobile view.
The side navigation is used if you need a lot of space, like photography portfolios, Wikipedia or E-commerce pages. This allows the user to navigate comfortably between categories, apply filters or explore subdivisions.

The navigation menu should adapt to the screen size to create a responsive design. The reduced space on a mobile screen often results in a dropdown menu which will extend when a user tabs on it. On a desktop view, the screen size is bigger, that means that the designer has enough space to show the different website pages in a row, but if a client prefers a dropdown menu, it is also possible to use a dropdown menu or off-canvas menu.

Form elements can be found on nearly every page in the World Wide Web. Mostly it is found in the contact page of a brand. Parts of a form are text fields with standard text input like name, email, phone numbers, etc.

Similar is the text area, where visitors can add a detailed text message. For longer lists, we should use a dropdown menu to select an option out of a longer list. The radio button is used to pick only one answer out of various possibilities like gender male, female and other. If we want to pick multiple answers from a list of choices, we can use checkboxes.

Often overlooked but very important part of a form is the error message. If a user types in a wrong email address or name, it will not send the form before the error is removed. If you don’t have this integrated it can be hard for a company to answer the person.

Interactive was the last main element we talk about

It can be used to show more details, to interact easily, or see related content. When we build a website, we can use Tabs, Accordions, Tooltips, Social Share etc. If we use some of these components, we should be sure that it is clearly visible for the user, to navigate on the page intuitively.

To see the theoretical and practical side of the UI elements we continue to work on our HappyCafe class project and develop our user experience (UX) Figma draft from the previous module, to add a user interface outline with Media, Typography, Navigation, Forms and Interactive elements.

After we learned about the elements, we researched for some inspiration on existing pages and created our own buttons, colour palette, shapes and masks.

At the creation process, we needed to apply the different design rules. In Figma, we needed to create a responsive outline for mobile phones as well.

Responsive design is very important because users mostly use their mobile phone or tablet to gather information on the go. When the website is difficult to use on a smartphone, people are more likely to leave the page.

In this module, we mostly work in the Design program Figma, because it is free to use and very intuitive and easy to learn, but hard to master.

We also get a lot of useful functions, tools and cheat sheets, while we’re working on the Happy Coffee Website.

The second module was only one and a half weeks long, but we get a very detailed overview on Figma and the user interface with a lot of details we need to look out for and real work case studies.

The web course was mostly structured that we have a short theoretical part in the morning from 10:00 – 12:00, and follow after the break from 13:00 – 15:00 with practical challenges related to testing our learnings, individual.

The lunch break is from 12:00 – 13:00

Around the Web Course Bangkok school are different options to get some tasty food. The design boot camp that I joined, had a very good group dynamic. We liked to go out together to the nearby food court or order some food to the school. Every Thursday, we had the” Sandwich Thursday” where we ordered delicious, fresh-made sandwiches.

During the breaks, I enjoyed the international atmosphere. Every student was really open-minded, which allowed us to talk and learn a lot about different cultures, different behaviours and perspectives. We also explore a lot of similarity between countries, which we do not know before.

The class always support each other as well if we have problems with homework or projects.

We also go out with each other after class to the famous Jay Fai or enjoy a cold beer together.

As a group, we’re still in contact, even after we finished the Web Design boot camp.

This blog is also a very broad overlook. In class, it was much more detailed with a lot of useful tips, even for chrome extensions to keep your passwords save, make screenshots, find out special fonts and colors, and more.

The next blog will be about the third module at Web Courses Bangkok, where we learned about Web Development. This includes HTML, CSS and a bit of JavaScript.

[text-blocks id=”59324″]