Follow this link to learn useful vocab for front end developing.

  • Affordance When a control behaves as its appearance suggests.
  • Animation A simulation of movement by the rapid appearance of images in sequence.
  • Anti-aliasing Smoothing the jagged appearance of diagonal lines in a bitmapped image. The pixels that surround the edges of the line are changed to varying shades of gray or color in order to blend the sharp edge into the background. This technique is also called “dithering.”
  • Background images pictures or patterns that appear behind graphical user interface elements on a web page.
  • Banner graphic images that commonly function as Web-based billboards. Banner ads generally appear toward the top-center of the screen, and are used as attention-grabbing links to other sites.
  • Bitmapped An image that follows a pattern of square shaped pixels.
  • Bounded field sets the parameters for selection or entry for the user.
  • Cascading style sheets (CSS) Code that defines how to display HTML elements in external style sheets that enable you to change the appearance and layout of all the pages in a Web site by editing one single file.
  • Clickability cues A visual indication that a given word or item on a Web page is clickable. include color, underlining, bullets, and arrows.
  • Color depth How many colors a computer screen can display, based on the number of bits per pixel.
  • Data entry field A visually well-defined location on a page where users may type data.
  • Density, page A measure of the percentage of the screen that is filled with text and graphics.
  • Design validation An assessment of a website’s functions and elements correspondence as identified initially with the design and the end user’s actual needs.
  • Design verification An assessment of the interface’s correspondence with the design that was defined
  • Engaging or Engagement Capturing the user’s attention or interest or maintaining their interaction.
  • Experience architecture Multidisciplinary approach to technology involving information architecture, interaction design and experience design practices that aim to provide a good user experience and benefit business.
  • Fluid layout When a page contracts and expands horizontally inside a persons web browser despite the size of the browser window or the resolution of the monitor.
  • Fold the lowest point where a Web page is no longer visible on a computer monitor or screen.
  • Font A particular typeface, size, pitch and spacing.
  • Font color The color of the text.
  • Font readability How easy or difficult it is to read a collection of words in a specific type style.
  • Font size The height of a font measured in points.
  • Gestalt Principles People do not visually perceive items in isolation, but as part of a larger whole. These principles include humans tendencies towards similarity, proximity, continuity, and closure.
  • Graphic elements An element of a user interface that displays information or can be manipulated by the user to pursue a task.
  • Graphical User Interface (GUI) A visual display on a computer’s screen that allows you to interact with your computer more easily by clicking graphical elements.
  • Graphics Images, icons, patterns or other visual representations.
  • High-Fidelity Prototype An interactive prototype that simulates the real system or site’s functionality and design details.
  • Hues The frequency of the wavelength of color; what we normally refer to as the “color” of an object.
  • Hybrid navigation model (hybrid structure) A combination of navigation structures incorporates some combination of components possibly including sequential and/or hierarchical IA designs.
  • Icon graphic An image that is usually interactive and represents an object or action or marker for entry into information.
  • Image links A clickable image hyperlinked for internal linking and web site navigation without supporting text.
  • Image placeholders Text that provides users with descriptive information about a graphic while it is downloading.
  • Interaction Design (IXD) The study of how a user interacts with a page, application or product.
  • Interface A view or presentation of an object or program.
  • Interface Design
  • Internationalization A system whose primary design has been developed to work in multiple languages and in the cultural contexts of different locales.
  • Landing page The location in a Web site where a given user goes after clicking on a link.
  • Layout graphic Graphic elements that serve to delineate, divide or identify content on a webpage.
  • Leading Line spacing or the vertical space between lines of text.
  • Look and Feel The consistent visual design and application of a corporate identity to an interface.
  • Low-Fidelity Prototype Low cost, illustrated design or concept usually sketched on paper or created as flat images.
  • Luminance Subjective brightness, intensity of light.
  • Masthead The (usually) graphical banner at the top of a Web page that identifies the organization or group that hosts the Web site. typically contains the name of the organization and site (if different) and an organizational logo.
  • Monochrome Paintings, drawings, design, or photographs in one color or shades of one color.
  • Monospaced font A font whose letters and characters each occupy the same amount of horizontal space.
  • Navigation The means by which users to get from page to page on a website.
  • Navigation design A design phase that interprets information architecture and task flows into wireframes or mockups to demonstrate and test the site structure and visual direction.
  • Negative space Unused space or white space.
  • Page density A measure of the percentage of the screen that is filled with text and graphics.
  • Page flow A hierarchy or sequence suggested by arrangement of elements on a page.
  • Page templates Predefined layouts or formats for sets of common web pages.
  • Page title refers to the text located in the browser title bar (this is the bar found at the very top of the screen of common browsers).
  • Pagination Dividing information into separate sequentially numbered or linked pages.
  • Paging A Web site design methodology that requires users to follow a series of “Next page” links to read an entire article.
  • Panels Visually and thematically-defined sections of a Web page. Panels are frequently placed in the left and right margins of pages.
  • Paper Prototyping A method in which paper models are used to simulate computer or web applications.
  • Parallel Design A methodology that involves several designers pursuing the same effort simultaneously, but independently, with the intention to combine the best aspects of each for the ultimate solution.
  • Physical consistency refers to the “look and feel” of a Web site. Physically consistent Web pages will have logos, headers, and navigation elements all located in the same place. The pages also will use the same fonts and graphic elements across all pages in the site.
  • Product Design Design of consumer products that considers usability, human factors, ergonomics, and appearance while still maintaining function.
  • Proportional font Type with spacing apportioned according to the shape and width of the character .
  • Prototype A preliminary model or archetype of a web page or website used to demonstrate or test the user experience and various task flows.
  • Radio button A screen-based control used to select one item from a list of mutually-exclusive items
  • Rapid Prototyping Quickly generating mockups of what a system will look like to facilitate internal review or testing.
  • Readability The degree to which users can easily and accurately read information on a web page
  • Responsive Design A web design approach aimed at crafting sites to provide an optimal viewing experience across platforms and devices.
  • Rollovers A state change that involves one element being replaced by another upon the mouse going over it.
  • Scanability How easy it is to read and understand a body of text.
  • Scroll bar visible along the right edge of common browsers. It is defined by a movable box that runs on a vertical or horizontal axis.
  • Scrolling A method of traversing a Web page wherein users either roll the wheel on their mouse, or manually move the bar located on the right side of their browser’s screen.
  • Serif A projection off of the stroke of a character
  • Similarity Perception that elements of the same size, shape or color belong together
  • Site map A clickable, graphic- or text-based display of a Web site’s hierarchy.
  • Storyboard A visual representation of how a user will interact with an application or interface.
  • Style sheet A set of statements that specify presentation of a document. they may be written by content providers, created by users, or built into browsers or plug-ins.
  • Tab A graphical navigation element that is most often placed at the top of a Web page.
  • Tagline A phrase or short sentence placed directly below a Web page’s masthead. Functions to quickly identify the purpose of the website. It may be a subtitle, an organizational motto, or a vision or purpose statement.
  • Target audience The set of users for which a system is designed or intended.
  • Task A procedure that includes goals, steps, skills, start state, inputs, end state, and outputs to accomplish an activity.
  • Thumbnail image A small copy of a larger image.
  • Unbounded field a free form entry field,
  • User Interface (UI), or Graphical User Interface (GUI) What the user sees.
  • User interface structure The basic content organization and its navigation model.
  • User-Centered Design (UCD) An approach to designing a product or service (e.g. user interface design), in which the end user is placed in the center of the process.
  • Waterfall model A linear design process whereby, steps are completed and the project passes onto the next phase with evaluation completed at the end.
  • White Space The use of blank (uncluttered) space on a page to promote content and navigation.
  • Widget Screen-based controls that are used to interact with a Web site and other systems. Widgets include pushbuttons, selection lists, radio buttons, sliders, etc.
  • Wireframe A highly simplified sketch of the important information in a page. Also known as page architecture, page schematic, or blueprint
  • WYSIWYG An acronym for “What you see is what you get.” It describes the way in which the layout on the graphical screen is a representation of the printed version of the document.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.