IXD101- An Introduction to User Interface Design/ UI Cards/Markdown

What is User Interface Design?

User interface (UI) design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable. UI design refers to graphical user interfaces and other forms—e.g., voice-controlled interfaces.


Interface Types

Graphical user interfaces (GUIs)—Users interact with visual representations on digital control panels. A computer’s desktop is a GUI.

Voice-controlled interfaces (VUIs)—Users interact with these through their voices. Most smart assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.

Gesture-based interfaces—Users engage with 3D design spaces through bodily motions: e.g., in virtual reality games

Definitions – https://www.interaction-design.org/literature/topics/ui-design


What is a UI Button?

Traditionally, user interfaces have contained buttons that allow users to initiate actions. A UI button is simply a button that exists within a user interface.
Definition – https://www.toptal.com/designers/ui/button-design#:~:text=Traditionally%2C%20user%20interfaces%20have%20contained,exists%20within%20a%20user%20interface.
What is a UI Card?
A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.
Definition – https://www.nngroup.com/articles/cards-component/#:~:text=Summary%3A%20A%20%E2%80%9Ccard%E2%80%9D%20is,visually%20resembling%20a%20playing%20card.

Miro Class Exercise


UI Cards Exercise

Below are the 2 UI Cards I created around two albums I like. In these cards I included appropriate imagery related to the band, the band name, album name, and a brief description of the album. I also included buttons to buy vinyl/cd , stream and learn more, as well as a heart button and a follow to twitter button. I think these turned out well , I like especially how I made the colour scheme appropriate to the album and/or band photo.



Text editor vs word processor

Plain text is portable and flexible. A file that only includes your text with no additional formatting.

Formatting and Markdown

Markdown is a text-to-HTML conversion tool for web writers.

heading <h1> <h2> <h3>

paragraphs <p>

to close off </h1> </p>




Leave a Reply

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