Home > UX Design - Research and Insights > 9 web design terms that are getting the better of you
What's the difference between mobile sites and mobile apps? Web apps and websites? Prototypes and wireframes? Today's post helps settle the debate on confusing web and mobile terminology

Brush up on your UX design knowledge with these 9 web design terms that everyone should know

With so many buzzwords being thrown around left, right and center, it’s easy to lose your way in the world of web and mobile technology. For users, it seems like the terminology is forever changing and it’s a constant struggle to keep up to date.

For web designers, whether starting out or in the pro league, it’s critical to have the terminology down for effective communication and to be taking seriously in the field.

Whether you’re designing for web or mobile or just trying to get your head around some of the jargon, our post will help you make sense of the most ambiguous web and mobile design terms. Read on to be enlightened!

Website

A website is a collection of HTML pages that can include any type of multimedia content from text and color to graphics, animation and sound. These static web pages are linked together – both in terms of content and placement within the site – and can be accessed by using a web browser. Though often confused with web apps (below), which are typically built to accommodate user interaction, the website is defined by its content and its purpose is to inform the user.

We use websites every day for everything, from keeping up to date with the news and doing the weekly shop, to networking with colleagues, friends and family and entertaining ourselves.

Responsive website

A website with a layout that responds or adapts depending upon the arrangement and size of the device’s screen. Responsive is typically used to design websites and web pages that will fit to differing screen sizes, including desktop, tablet and mobile. Read more on responsive and adaptive web design here.

Examples of brands that use responsive web design include social media sites Twitter Bootstrap and Mashable, and eCommerce site Amazon. Below you can see Mashable’s mash up of responsive content.

 

responsive-website-design-mashable

Mobile site

One of the types of responsive content is the mobile site. A mobile website is similar to a website in that it is made up of HTML pages and is also accessed over the internet. The difference between the two is that mobile websites are created with smaller screens and interfaces in mind, usually for hand-held and/or touch-screen devices – a responsive site. Mobile websites allow the user to access mobile-specific features, such as click to call, linking telephone numbers to the app the allows them to make a call directly, or location based mapping.

Examples of mobile sites include image publishing service Shutterfly and media site Buzzfeed. Tip: try opening these on your mobile device!


Now you know the web design terms, put your knowledge into practice.
Download Justinmind.

Download free


Native mobile app

Native apps are mobile apps built for a specific operating system, taking into account its notification and navigation systems. Native apps live on the mobile device and are accessed via their icon within the device’s home screen or pages of apps. They are downloaded from the operating system’s market place and there is typically an option to work offline with native apps as most of the content is downloaded when the user first installs the app.

Examples of native apps include the Apple App Store, the Google Play for Android, Instagram, Facebook’s mobile app, and Justinmind for mobile (available both for iOS and Android).

Hybrid mobile app

Hybrid apps are installed on your mobile device and allow you to perform much of the same as native mobile apps. But despite looking and feeling like a native mobile app, hybrids are actually built with a combination of web technologies like HTML, CSS, and JavaScript, to create experiences for multiple platforms with a single codebase.

A tool that allows you to create hybrid apps is PhoneGap, an Adobe open source framework for building hybrid applications built with HTML, CSS and JavaScript.

Web app for mobile

A web app is a self-contained client-server software application that runs in a web browser – you don’t need to download this one! It provides advanced user interactions and richer user experience, such as geolocation and camera integration, without having to download software. It has the look and feel of a native app, but is more closely related to the website.

Example of web apps include social media web app Buffer and banking web apps such as Natwest.

Here’s a look at how the brands we use every day are spread across difference devices:

 

web-design-terms-ux-design-terminology-responsive-design-ux-design-facebook web-design-terms-ux-design-terminology-responsive-design-ux-design-netflix web-design-terms-ux-design-terminology-responsive-design-ux-design-youtube

 

Wireframe

A wireframe is a low-fidelity (paper or digital) blueprint of your design. It shows the main groups of content, the information hierarchy and offers a basic visualization of the user interface before interaction is added at a later stage, e.g. when creating a high-fidelity prototype.

Read this post for top tips and best practices on wireframing for web and mobile.

Mockup

A mockup is a mid to high fidelity static model of your design. Typically a semi-functional model of the user interface model built with a software development tool, it helps the user visualize the basic layout, design and content of a UI, as well as demonstrate the essential functionality in a static way, before any interaction is added.

Prototype

A prototype is more advanced than the wireframe and mockup. It is a mid to high-fidelity model of your design that includes advanced design and functionality, and offers a realistic idea of how the interface is going to look and feel once developed. Learn more about the wireframe and prototype fidelity spectrum here.

Justinmind is a great all-round wireframing and prototyping solution. Use it for all of your design needs, from creating simple, static wireframes with our drag and drop UI elements to fully-functional high fidelity prototypes with our advanced Events system. Learn more here.

Emily is Marketing Content Editor at Justinmind

1 comment

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