IXD101 – Introduction to UI Design

This week during Monday’s lecture, we were introduced to User Interface Design principals. UI design means to anticipate what users might need to do, and to ensure that all the elements on an interface are easy to navigate, access and understand, in order to make the whole experience easier for the user.

We learned a little bit about the history of UI design, going all the way back to the 1980s when the first GUI (Graphical User Interface) appeared, entitled the Xerox Star 8010 Information System. Then, in 1984, emerged Apple’s very first fully-fledged GUI – the Mac OS System 1.0. This GUI was windows based with icons. These windows could be moved around the screen with the mouse, and files could be dragged across the screen and placed into folders by dropping them off.

Xerox Star 8010 Information System (1981)

Mac OS System 1.0 (1984)

Learning about the history and the origins of UI design has been a great eye-opener for seeing how far things have come since then, in only forty years. It also shows that the basics of UI design and interaction design have been in the foundations right at the very beginning, and continues to remain the basis of UI design today.

Designs and Components

We were introduced to a website called material.io, which teaches about the basics of design, and the many different foundations that make of the aspects of UI design, such as layout, colour, typography, shape, iconography and navigation. I found it to be an extremely useful website, as it teaches pretty much everything you need to know about digital design, and serves as a great source of inspiration for projects.

We were tasked with composing and finding a collection of buttons and cards – examples of UI components – and putting them on a shared board in Miro. For this exercise, I chose buttons from websites and apps I would use everyday, such as Youtube and Twitter.

We were also tasked with creating a sample UI card, using an album cover of our choice for reference. I have uploaded my result of this exercise on a separate blog post.

Markdown

We then took our first look at Markdown, or in other words, HTML. We didn’t go into deep detail, but we got a very basic grasp of the subject, and we were asked to explore three different text-writing softwares and choose which one we liked best. I decided to go with Visual Studio Code, as the design of it seemed very simple and easy to use.

 

Leave a Reply

Your email address will not be published. Required fields are marked *