GCOM 360

Week 8 Glossary

 

JPG

JPG, also known as JPEG, is a method for compressing digital images. Digital images of high definition are compressed accordingly, causing quality loss in exchange for smaller storage size.

 

GIF

GIF is short for Graphic Interchange Format. This format supports animation and only up to 256 different colors for each frame. They are suitable for simple animation images and static images with solid areas of color.

 

PNG

PNG is the acronym for Portable Network Graphics. It is a raster image format designed for transferring images on the Internet. It supports lossless data compression and palette-based full color images with or without backgrounds.

 

Lossy Compression

Lossy compression is a method used to reduce data size for storing and transmitting. Common examples of this method are JPEG images, MPEG videos, and MP3 audio files. It can provide high degrees of compression and results in smaller files, but the loss of data is irreversible.

 

Progressive Image

When clicked on in a web page, progressive images will load in at full size, looking pixelated and becoming clearer as it loads. Compared to normal pictures that load line by line, progressive images greatly improve user experience by quickly giving users a rough idea of what these images are about.

 

Dithering

Dithering is a process of random arrangement of pixels. It creates illusions of color that are not actually present in order to give images more details.

 

8-bit color

8-bit color graphics is a method of storing image information. Each pixel is represented by one 8-bit byte. The maximum number of colors that can be displayed at any one time in an 8-bit color image is 256.

 

Hexadecimal

Hexadecimal color is a six-digit, three-byte hexadecimal number used to represent colors in HTML, CSS, SVG, and other computing applications. Each byte represents red, green and blue components of the color. One byte represents a number in the range of 00 to FF in hexadecimal notation or 0 to 255 in decimal notation.

 

Transparency Matte

Transparency matte works with the GIF, PNG, and JPEG formats. It simulates transparency by filling or blending transparent pixels with a matte color that matches the web page background. Background matting works best if the web page background is a solid color.

 

Image Map

 In HTML, an image map provides a way of linking various parts of an image without dividing the image into separate image files. It is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different link destinations.

GCOM 360

Week 7 Glossary

 

Iterative

Iterative is related to a cyclic and repetitive design process. Such a design process comprises of prototyping, testing, analyzing and refining a product. Each iterative process brings a product closer to the ideal goal.

 

Paper Prototypes

Paper prototypes are rough hand-sketched prototypes created for usability and user-interface testing. They are effective in helping designers to find and fix design mistakes quickly.

 

Low-Fidelity Prototypes

Low-fidelity prototypes consist of lines and simple gray shapes that demonstrate the structure and the basic visual hierarchy of the design. They are cost-effective tools for designers to present the structure and interactivity of the project to stakeholders.

 

High-Fidelity Prototypes

High-fidelity prototypes mimic all the elements that will appear in the final design with realistic detail. They look almost completely like the real product, and allow stakeholders get a clear idea of how the product will work. They also engage users to provide meaningful feedback during usability testing.

 

Heuristic

In computer science, heuristic is a technique designed to solve problems more quickly with a “good enough” instead of a perfect solution. It is a shortcut to achieve results rapidly by trading off accuracy and completeness.

 

Rollovers

Rollovers refer to buttons on webpages that react when users roll their mouse cursors over them. That is achieved by using JavaScript to replace the picture on the button with another picture, creating an interactive effect.

 

Front-end development

Front-end development is the practice of using HTML, CSS, and JavaScript to create a graphical user interface for users to interact with on webpages and other web applications.

 

Back-end development

Back-end development is associated with the unseen aspect of website and web application development. It consists of working with servers, applications, and databases.

  

Below the Fold

Below the fold refers to the area of a webpage that can only be seen when scrolled down.

 

Favicon

Favicon is also known as bookmark icon, tab icon, or URL icon. It appears as an icon next to a page’s title on the browser tab, or next to a page’s name on a bookmark list. It is an important icon of a website’s branding, as it quickly help users distinguish a specific website from others.

GCOM 360

Week 6 Glossary

 

Redundant Navigation

Redundant Navigation is a means in which websites use multiple paths to display the same information for their users. Redundant navigation is good for the user experience. Users think differently from each other, so redundant navigation gives users more options to find same information.

 

404 page

404 page appears when a user follows a broken link. 404 page error is a common hypertext transfer protocol response when a user follows a link to visit a webpage that actually doesn’t exist anymore. 404 page reduces user experience and is a sign of poor website content management.

 

Keywords

Keywords are words or phrases we use to search for information on search engines. Search engines use keywords to find the most relevant information on the Internet for the users. Content creators add proper keywords to their content so their websites can have a better chance to be found by search engines.

 

Meta Data / Meta Tags

Meta Data is the description of data. It is created to help people find and understand the context of the data. For example, title, description, tags, categories, table of contents, etc., are all meta data.

Meta Tags are metadata used to describe the content on a website. They are not visible on a webpage, but are instead built into the HTML code of a webpage. Search engines read meta tags to get an idea what a webpage is about, and to decide if the content on the website is relevant to any specific searching keywords.

 

Listicle

Listicle is a combination of a list and article. It is a writing style in which an article is made of a list with extra information added to each list item. Listicle has good readability and could be used as a framework to understand a complicated topic easier.

 

Backlinks

Backlinks are links inserted on other websites, used to point back to your website and take customers to go to your website. The quality and quantity of backlinks are important criteria for search engines to determine the ranking of your website on the search results pages.

 

Anchor Link

Anchor Link is a web link that is used to take users to a specific point on a webpage, in order to save the user’s time in scrolling and scanning through the context of that webpage. Anchor links improve user experience and usability of a webpage.

 

Page Speed

Page Speed refers to how fast the content on a web page loads. It is now a ranking factor of Google search on mobile devices. Web pages with fast page speed rank higher than others with slow page speed.

 

Jeffrey Zeldman

Jeffrey Zeldman is a legend and leader in the web design industry. He has been leading and promoting standards-based web design since 1995. He has made enormous contributions to the web design industry. He has started a web design webzine, published several popular web design books, founded two web design agencies, and initiated a web design conference.

 

Ethan Marcotte

Ethan Marcotte is a web designer and front-end developer who started the movement of “responsive design”, which provides a new way of designing websites. He is the author of two books about responsive design: “Responsive Design: Patterns & Principles” and “Responsive Web Design”.

 

GCOM 360

Week 5 Glossary

 

Mind Map

 Mind Map is the diagram of notes and ideas generated from a brainstorming session. A Mind Map shows the relationships between different ideas and how they serve the central concept as a whole. Mind mapping is an efficient way of developing ideas.

 

Style Tile

Style Tile is a visual deliverable of a website design process. It contains fonts, color schemes, icons, and other interface elements to convey the essence of a brand in visual way. Web designers use style tile to demonstrate what the website would look like and to ask feedback from stakeholders before executing the website design plan.

 

Mood Board

Mood Board is a collage of inspirational elements created for the styling purpose of a particular project. It consists of color palette, typography, textures, patterns, and photos gathered to help a web designer create a style tile.

 

Persona

A persona is a fictional character created to describe a user type for a product. Personas are useful in helping designers and stakeholders understand the desires and goals of their target users.

  

A/B Testing

A/B Testing is the process of testing two web elements to find out which one users like more. A web design team shows two similar variants to a group of users, and the variant that gets more likes wins.

 

Case Study

Case Study is a research method that is implemented to make a detailed and in-depth study of a particular project, product, person, etc. In marketing, a case study is used to tell a story about a company and its customer, to capture potential customers’ interest and gain their trust.

 

KISS (not the band or the verb)

KISS is short for “Keep it simple, stupid”. It was a design principle noted in U.S. Navy in 1960. In UI designing, KISS means to create designs that are simple and user-friendly. Without much thinking, any user can figure out how to interact with a website or an app intuitively.

 

Usability

Usability refers to the ease of using a website, an app, or a digital device. For example, a website with good usability would be useful, easy to learn to use, and enjoyable to use from a user’s perspective.

 

Learnability

Learnability refers to the characteristic of a product or an interface that allows users to learn its functions easily. A product with good learnability is intuitive. It is because users immediately understand and know how to interact with the product with ease.

 

Accessibility

Accessibility is the practice of making websites accessible and usable by as many people as possible, including people with disabilities, people with slow connection speed, etc. It is a goal of human rights to have the same and equal accessibility for everyone.

GCOM 360

Week 4 Glossary

 

SEO

SEO is short for Search Engine Optimization. SEO involves designing website content by following the rules of search engine algorithms, in order to improve its website search ranking. This way, the website can gain more visibility and attract more traffic from search engine results.

 

B2B

B2B stands for Business to Business. It means doing business between two companies, in which one company sells products or services to another company.

 

ROI

ROI is short for Return on Investment. ROI is a ratio that helps investors measure how well their investments are doing. ROI = (gain from investment – cost of investment) / cost of investment

 

CPC (Cost Per Click)

CPC is the amount of money a business owner pays the CPC ad platform when someone clicked on his/her advertisement. Some popular platforms that people use for CPC ad campaigns are Facebook, Google, and Bing.

 

Inbound Marketing

Inbound Marketing is a technique for attracting customers to products by creating content that is relevant, useful, and educational to them on the Internet. The content can take many forms, such as blogs, videos, posts, etc. These valuable contents can organically generate traffic over a long period of time.

 

Google Trends

Google Trends is a powerful Google tool that offers comparison charts of keyword search data generated from the Google search engine. Many business use Google Trends to better understand the needs and desires of their target audience. Thus, they can get an insight of how to better improve content marketing and product development.

 

Web Analytics

Web Analytics is the process of analyzing visitors’ behaviors when they are on a website. A web analytics tool collects data of how visitors use a website, and then generates easy-to-understand reports to help website owners make effective adjustments and develop better content.

 

Bounce Rate

Bounce Rate is the percentage of how often visitors leave a web page without going to any other pages. Bounce Rate is a metric that indicates the quality of a webpage.

 

Visitor Conversion

Visitor Conversion is the role conversion of a passive visitor into an active visitor. When a passive visitor (who only reads and then leaves) finds the content of a website to be relevant and valuable, the passive visitor would then be converted into an active visitor who clicks, subscribes to a newsletter, or buys products from a website.

 

AdWords

Google AdWords is a Pay-Per-Click platform where business owners bid on the same keywords. For the business owner who pays the most, Google shows their advertisement at the highest position in the keyword searching results. Google AdWords is a good way to improve traffic within a short period of time.

GCOM 360

Week 3 Glossary

Information Architecture

Information Architecture is a structure design used for selecting and categorizing information strategically, in order to better covey the information to users. Information Architecture is widely used in website, software, and app developing to optimize user experience.

Wireframe

Wireframe is a graphical sketch framework of a website that displays the layout and content arrangement to help figure out how the website elements work together properly. It is implemented in the early phase of a website design. Wireframe is important in improving communication between the design team and the client, to create an ideal website building scheme.

Site Map

Site Map is the hierarchical menu of contents of a website which consists of its entire webpage links. It helps users find the specific page they are looking for, and allows search engines to discover and better understand the contents of the website.

Web Page Header

Web Page Header runs across the top section of every webpage of a website. It normally contains the company’s logo and main website navigation bar.

Web Page Footer

Web Page Footer runs across the bottom section of every webpage of a website. It normally contains a navigation menu, copyright information, security certificates and badges, and social media follow links.

Web Fonts

Web fonts are custom fonts used on a webpage that are stored on a distant server rather than a user’s local browser. They can be displayed on any browser the exact way that the designer has planned.

Creative Commons

Creative Commons is a non-profit organization that provides several copyright licenses that creators can use for free to license their works. It gives users permission to legally download and use works created by others under the license conditions selected by the creators.

Skeuomorphism

Skeuomorphism is a design principle that the look and use of digital objects are designed to be the same as those of their physical counterparts in real life. For example, the calculator app in my phone is skeuomorphic because it has a similar look and usage as a real calculator.

Web-Safe Color

Web-Safe Colors are a number of 216 colors that appear consistently the same on monitors of different operating systems. In the old days, different operating systems supported different numbers of colors. Most of them supported 256 colors, but only 216 of those colors would be displayed identically between different computers. Those colors are considered web-safe and help web designers to choose colors wisely when designing a webpage.

UI Design Patterns

UI Design Patterns are reusable solutions for commonly occurring problems in website and application UI Design. They are web designers’ standard references for content structures, navigation schemes, etc. For example, many websites have very similar login pages, because they all used the same login page UI design pattern.

GCOM 360

Week 2 Glossary

Browser

A browser is one of the most important software applications on computers, tablets, and smartphones. It is the tool we use to find all the information we need on the Internet. All websites are accessed and displayed through a browser. For example, Google Chrome is a popular browser.

Hyperlink

All of the information displayed on electronic devices is created in the form of HyperText. When we hover the mouse pointer over a hypertext on a webpage, the mouse pointer turns into a hand pointer to indicate that it is a clickable hypertext, which is inserted with a URL link. So with one click, readers can be taken to another page.

Mobile First Design

Mobile First Design means to design the mobile web user experience first, before designing it for the desktop browser. This is because nowadays people are using smartphones more often than computers to access the Internet. Compared to desktop web design, mobile web design requires prioritizing the most important content for the user and providing the best user experience within a small screen.

User-Centered Design

User-Centered Design is to put user needs and user experiences as the center focus throughout a product designing process, from beginning to end. User-Centered Design creates products that are both useful and delightful for target users.

Responsive Design

Responsive Design or Responsive Web Design is a method for designing a website that fits and adjusts automatically to all electronic device screens of different sizes. Responsive websites adapt to desktop screens, tablet screens, and mobile screens accordingly by using flexible layout elements that can move fluidly. All good websites use responsive design.

UI/UX

UI means User Interface. It is where we interact with machines in order to operate and control them to complete tasks for us. Whether it’s a car, a gasoline pump, a laundry machine or a laptop, they all have user interfaces installed with buttons, knobs, handles, and screens for us to control them with.

UX means User Experience. It is what it feels like when users use a product, service, or system. For instance, the user experience of using a computer mouse includes whether it is comfortable to hold it in hand, if the buttons are comfortable to click, and if the mouse pointer responds well to the movement of the hand, etc. User Experience is sum of these subjective feelings.

Breadcrumb Navigation

Breadcrumb Navigation is a navigation method to help users know where they are within a system. The term comes from the fairy tale Hansel and Gretel, where two children left breadcrumbs behind to form a trail back home. Take Craigslist for example: if I find a nice second-hand camera on Craigslist, I can easily tell where this listing is on the whole website, because there is a path bar on top of the web page that indicates this camera is in the electronics section, within the “For Sale” category.

WYSIWYG (pronounced “wizzywig”)

WYSIWYG is short for “What You See Is What You Get”. It is a system where the content is edited, arranged, and displayed in a way that closely resembles the final printed document. For example, Microsoft Word is a WYSIWYG text editor and Adobe Photoshop is a WYSIWYG photo editor.

Blog

A blog is a website or web page where people share their ideas, thoughts, and experiences to connect with other people. A blog is more casual and personal compared to other formal websites. There are many blog platforms, like WordPress, Tumblr, Blogger, etc.

Open Source

Open Source means the source files of a project are freely accessible to the public. Anyone can use and modify the source files to improve and contribute to the project. This term is commonly used in software and application development, where the source codes are free and open for public collaboration. For example, Mozilla Firefox is an open source web browser.

GCOM 360

Week 1 Glossary

ISP

ISP is the abbreviation for Internet Service Provider. ISPs provide services that help people get on the Internet with unique IP addresses, allowing them to browse, upload, and download information from the Internet. For example, Xfinity with Comcast is my ISP at home.

HTTP

HTTP is short for HyperText Transfer Protocol. HyperText is the text that is used on electronic devices. Some texts of it are inserted with links, so with one click, readers can be taken to another page. HyperText information is interconnected by those links. Protocol is the rule used between different computers that formulate how to break down and put together transferred information correctly. HTTP is the rule of how HyperText packets are transferred correctly between the user computer and server computer. It’s like an instruction for doing a puzzle, both computers follow this protocol so they make the puzzle correctly, thus they receive and send the correct information.

DNS

DNS means Domain Name System. It converts the normal website addresses we use into IP addresses that computers can understand. IP addresses are like ID card numbers for websites, every website has its unique IP address. For example, when we type http://google.com in web browser, it doesn’t really understand which website we want to visit until the DNS converts http://google.com into 172.217.18.14 for us. This is because computers communicate with each other using numbers.

URL

URL is short for Uniform Resource Locator. It is the unique address of a website or a document. Every resource on the Internet has its own unique address, same as the addresses on maps in the real world. By typing the corresponding URL in a web browser we can find any specific resource on the Internet.

GUI

GUI is the abbreviation for Graphical User Interface. It is the most widely used interface on electronic devices nowadays. The GUI contains icons and graphic symbols that resemble our real world experiences. Thus, it creates an easier and familiarized experience when users interact with electronic devices.

FTP

FTP means File Transfer Protocol. It is a method for transferring files between a client server and a host server within a network. With FTP, files from one computer can be uploaded to and downloaded from another computer correctly, using an FTP client.

CMS

CMS is short for Content Management System. It is used for editing and managing online contents. CMS is intuitive and offers a lot of templates and designs that are ready to use. Without any knowledge of programming, people can use CMS to build their own websites. For example, WordPress is a popular CMS.

W3S

W3S is the abbreviation for World Wide Web Consortium. It is an international organization working on developing web standards to ensure the long-term growth for the Web. They also provide learning and training resources for developer and computer science students to improve their web development knowledge.

HTML

HTML means HyperText Markup Language. The structure of a website is written using HTML. It is an important tool for making a website. HTML is used to mark up elements by grouping them with tags on a webpage. When a browser reads through the HTML lines, it recognizes those marked-up elements and then presents them to us in a way that we recognize and easily understand.

CSS

CSS is short for Cascading Style Sheets. CSS is another important tool along with HTML and JavaScript for creating a website. A website’s style is created by writing CSS in a separate style document. CSS controls the visual presentation of a website by effectively editing the layout, font, color, background, and other effects.