As a start point, I will introduce my background, so you know where I am speaking from.
I have a Bachelor's Degree in Fashion Design in Brazil but ended up working with Graphic and Digital Design in Australia. From point A to B there is a huge gap. I finished my graduation with honors and was pretty good in Fashion, however, the thing that was most outstanding about my work was the Branding I created automatically for my presentation, which wasn’t what my project was being assessed on. You can view this case study here.
Images from my final project at my Fashion Design Bachelor's | Photographer Diogo Narita
From that point forward all the opportunities and interests that came my way were guiding me to Digital and Graphic design. As designers, our work has to be presented digitally somehow, right? The thing is that all customizable website platforms such as WordPress, Square Space, WebFlow, Wix have very limited resources as far as layouts and User Interfaces. So, there I was, creating my first portfolio before I crossed the country on SquareSpace when I saw I could customize something using HTML, CSS, and JavaScript.
For those of you that don't know, this is what I am talking about:
Image Credits: https://zapier.com/blog/learn-html-css/
Now, imagine me, a Fashion Designer, with no understanding of the difference between XD, UI, UX, Web Development and Interactive Design, looking at all these symbols and codes, trying to find my way to understand something when all I wanted was to move my image 2px to the left? This was like 5 years ago, ok? I am blessed that the people that crossed my life thought me some key basic things that designer MUST understand, even when not working in web.
So, there you go, here is a list of 10 key terms people that are starting to work with Interactive Design must know:
User:
Refer to anyone who will be using what you are making, other terminologies can also be “client” or “customer”, but when it comes to Web it's a good idea to start being consistent and only using the term "user" when referring to the, well, users on your site.
Usability:
It’s the ability of people to use your website, app, and so on. If you want to retain you must create user-friendly and easy-to-navigate Interfaces.
UI:
Stands for User Interface and it is simply how the interface design interacts with the user through signifiers.
UX:
Stands for User Experience focuses on the human interaction with the computer or device. How do we expect users to behave when opening our page? Where to go? what to do? So while the UI is the design of something that your users will interact with, the UX is what will happen when the interaction actually takes place
Image Credit: https://dribbble.com/shots/15615286-Air-Ticket-App-Concept
Responsive Design:
It’s a technique that allows the website to run smoothly no matter on which device the page is accessed. It adapts the content for a better and consistent presentation.
Image Credit: https://dribbble.com/shots/15912710-Art-Institute-Blog-Design
HTML:
The HyperText Markup Language is a computer language used by your browser to display your site to the user. This language uses symbols like :<> , /, =”” to create coding that is readable by web pages and transformed into a Web Page. You can add image links, web page links, videos, and all content you need into <these></these>.
The HyperText Markup Language is a computer language used by your browser to display your site to the user. This language uses symbols like :<> , /, =”” to create coding that is readable by web pages and transformed into a Web Page. You can add image links, web page links, videos, and all content you need into <these></these>.
CSS:
Stands for Cascading Style Sheets. CSS works hand-in-hand with HTML to create sites that are more than plain text. If HTML is the backbone, then CSS is the skin, the hair, and the style of clothes. It allows the interface to be more creative and stylish, when developing, a basic way to start adding design to your HTML website is by creating a CSS style sheet
Stands for Cascading Style Sheets. CSS works hand-in-hand with HTML to create sites that are more than plain text. If HTML is the backbone, then CSS is the skin, the hair, and the style of clothes. It allows the interface to be more creative and stylish, when developing, a basic way to start adding design to your HTML website is by creating a CSS style sheet
Front-End:
It’s the part of the site that your user interacts with directly. HTML and CSS are parts of the site that encompass the front-end because they’re the languages that your user’s browser reads.
Back End:
Is everything that the user can't see and interact with. Typically back-end coding languages like PHP or .NET are run on a server. Luckily, unless you are a programmer, you won’t come across this coding.
Semantic Markup:
Is a way to approach coding in HTML, where the tags used to describe the content help providing key metadata about the content itself. This practice allows that any developer that might come around your page in the future to comprehend easier what is the tag used for and related to.
IA:
Information Technology revolves around how the website structure is organized, taking into account the importance of the content, dealing with what pages go wherein a website's structure, what content is contained on each page, and how each of these interacts with other pages within the site.
Visual Hierarchy:
Visual hierarchy relates to the arrangement of design elements on a page so that the most important elements appear to have more emphasis.
That characteristic can be achieved by the use of size, color, font, and special effects such as drop shadows. It is a key element in UX and IA.
Image credit: https://dribbble.com/shots/15344287-FitMate-User-Flows
Link:
Commonly know as a Hyperlink, a Link is a reference to data that the user can follow by clicking or tapping, that information can e external or found on the same website.
Embed:
Refers to the integration of other forms of content such as video, audio, Google Maps, and other API. The challenge in Linking and Embedding is that too much media means the hierarchy ( and IA) is confused, so the challenge is how to frame the user’s attention so it goes to where we want it.
Infinite and Parallax Scrolling
Infinite scrolling is currently a trendy way to present a site so that rather than load separate pages to view content, social media explore this resource profoundly to keep your attention to the page. Meanwhile, Parallax is the effect seen when items closer to your viewpoint appear to move more quickly than items farther away, providing movement in response to the user scrolling.