DDSN 360: Glossary 3

Glossary 3

Information Architecture: The structure in which content is organized in a digital space. A website’s IA, when designed well, should not be felt, or seen. When it is designed poorly, the user is forced to be aware of how the content is created, and how unhelpful the architecture is. You could say that Craigslist.org, though it’s not the prettiest website, has very clear user experience because of the way it’s content is grouped, categorized and navigable.

Wireframe: A wireframe is a simple layout format of a website or app meant to clearly illustrate the structure, feature placement, and navigation. Wireframes are used to best configure a website or app architecture, in order to achieve efficiency in a design. I’ve never seen a wireframe, that I am aware of, but this makes me think of the class I took on Digital Layout – there was a section where before we ever had content, we created thumbnails and a layout on a grid of how our magazine spread would look. This is what I imagine wireframing to be like.

Site Map: Or Sitemap – is a list of pages of a website. There are three kinds used in the world. 1.) For the designing phase of a website; 2.) for the use, as a publicly posted list of the hierarchy of a webpage; and, 3.) for the use of search engines to find relevant information on a site. Though often found at the bottom footer of a website, it is not a requirement. Here is PG&E’s sitemap as an example: https://www.pge.com/en_US/sitemap.page

Web Page Header: A Web Page Header sits at the top of every page of a website, unless I doesn’t. It may be featured on every page of a website, or just on the homepage. It often contains a company logo and possibly a tagline or statement. In the illustration here you can see clearly a Web Page Header is something that is familiar to you, as it is often found on every page of a site above a navigation bar.

Web Page Footer: Just the opposite of a Web Page Header, the Footer is found at the bottom of each page. In a way the header and footer frame each webpage, while the content in between the two will change. The footer, we have been accustomed to, is often where a user can find more details about a particular website. Most likely many more details than in the navigation bar or menu. A user may also find the company’s address, contact info., and copyright of the website in the footer. It was in the PG&E website footer that I found their link to the sitemap.

Webfonts: Web fonts are not the same as Web Safe Fonts. Web Safe Fonts are fonts that a website designer would choose because they would be a safe bet that most users have that font already pre-installed on their computer or device. Web Fonts are actual fonts that are downloaded to a users device as they are rendering your website. The downside to this it could slow load times for your website, but you would ensure every user could see your website just as you intended. In searching for a web font enabled website example, I came across a website that gives awards for web font design use! Check it out there are so many awesome examples of specific design choices using typography, which a designer would want to be true and universal for every user that finds his or her or their website: https://www.awwwards.com/websites/web-fonts/

Creative Commons: A Creative Commons license is one of many types of copyright licenses that enable the free distribution of copyrighted work. This is the kind of license an author would use to enable others to use, share or build upon their work. Creative Commons, the non profit organization issues the licenses to ensure that certain work is accessible by the public. For example, Flickr helps you find photographers who have identified which of their work is free to use under a Creative Commons license: https://www.flickr.com/creativecommons/

Skeuomorphism: A design concept often used for user interface design wherein the visual aspects, symbols and design elements are made to mimic their real-world inspirations. Like a blog site whose background looks like paper, or a website for an aquarium that looks like it’s underwater. This is meant to create an emotional reaction and sense of familiarity for the user.This blog entry by Jessica Moon has some wonderful examples of this design concept in action:https://www.dtelepathy.com/blog/inspiration/50-skeuomorphic-designs

Web-Safe Color: These were colors used when computers were limited to just 256 colors. Many attempts were made to create a “standard” color palette. A color table was created which contained 216 variations. This was to avoid dithering, or color altering in graphics which had colors that another users computer did not have. As of 2011 web safe colors have practically fallen into disuse due to the fact that computers now typically have 24-bit (TrueColor).

UI Design Patterns: These are recurring solutions to common User Interface Design problems. These patters are a way of working through a problem with a set series of steps, in order to improve your user interface design. I imagine this is like a map or flow chart of common answers to common problems in user design. They have been time tested and kid/mom/dog approved.