Working with a web designer for the first time can be overwhelming, especially when you start hearing terms like layout, mockup, and responsive design. Designers have a language of their own, and it’s a language that most people aren’t fluent in.
It’s extremely difficult to communicate your likes and dislikes to a web designer when you don’t know how to talk the talk, and today’s post is designed to teach just that.
Consider this quick-start dictionary your crash course: the essential terms you need to know to communicate with your web designer.
Accessibility
Basically, this is the ability of a website to be used by people with disabilities, including visually impaired visitors using screen readers, hearing impaired visitors using no sound, color blind people, or those with other disabilities. A website with low accessibility is basically going to be impossible for those with disabilities to use. Accessibility is particularly important for sites providing information to those with disabilities (healthcare sites, government sites, etc.), though it is an important aspect to consider when designing any site.
Alt Attribute
Alternate text used to describe an image. Used by search engines and screen readers in place of an image.
Below the Fold
The point on the page where viewers will begin to scroll after the page has loaded. Generally you put the most important information above the fold (what the visitor sees first) and supplement information below it.
Cache
Every time you do anything on your computer, it stores this in memory so that the next time you try to do the same thing, it happens quicker than having to wait from scratch. The place where it stores all this is called the “cache”. The irony is that if your cache gets too full, it in fact makes your computer work a lot slower. It’s a good idea to empty your cache regularly to keep your computer working optimally.
Calls To Action
A button, arrow or other graphic element, which entices a user to perform a particular action.
Example: A button or graphic that is clickable, causing the user to click on the button and bring them further into the website.
Read more about Calls to Action!
CSS (Cascading Style Sheets)
These documents contain the colors, fonts, layout and overall appearance of a website. They are separated from the HTML structure to reduce repeating the styling of similar elements on multiple pages. A style sheet may only need to be altered once to have an effect on multiple pages of a website, hence having a cascading effect.
A style sheet can control the layout of a website. Some web designers choose to separate the colors and fonts in a separate style sheet than the layout elements. There are also different style sheets that apply to printing a web page or to view a web page on a mobile device.
CMS (Content Management System)
A CMS allows it’s users to edit, delete and manage the content of a website from a visual interface. A successful CMS requires no knowledge of programming languages, CSS or HTML to easily update a website. A CMS can be open source or built from scratch depending on the budget of your web project and the needs of your organization.
Open Source Examples: WordPress, Magento, Drupal
Color Scheme
A color scheme is a selection of colors to be used together in a design. Colors within a scheme should look appealing together. While there is no hard and fast rule for how many colors you should choose, the more colors you use the harder it is to create a cohesive design. The color scheme of your website should match the color scheme of your overall branding.
Common File Types
.psd – Adobe Photoshop file format – Often used for photography editing, website designs and various other graphics
.eps (Encapsulated PostScript) – A common vector file format allowing a graphic to be resized without altering the quality or resolution. Designers often request this type of file when needing a business’ logo if used on multiple mediums or large formats.
.ai – A vector file format used for Adobe Illustrator. A vector file can be resized to an infinite size without any data loss. This is ideal for large graphics and certain types of printing such as screen printing.
.jpg – This file extension is used for JPEG files. A JPEG is created with lossy compression. Lossy compression removes portions of the data of a particular file allowing it to be easily viewable on the web in a smaller file size. Photographs are generally good candidates for this type of compression.
.gif – Stands for: Graphics Interchange Format. A simple graphic, typically not a photograph is a good candidate for this type of compressed file. A GIF is created using lossless compression, which reduces the size of the file without removing any of the original data. GIF also supports animation. You might hear the term animated GIF occasionally. Some designers may use an animated GIF in email design or in simple web banner ads.
.png – Stands for: Portable Network Graphics. This file type uses lossless compression and is similar to a GIF. The difference is a PNG allows for transparency and can’t be used in a CMYK (print) color space. It’s meant for use on the web. PNG does not support animation.
Comp / Mock-up
Refers to a representative sample or preview of the design for a website, book, brochure, etc.
Example: For a website, a comp would be the non-functioning design sample of the homepage. Or, it could be a design sample the developer would use to setup the link colors on a particular section of the website.
A designer would supply you with design comps to show you what the website would look like before a developer begins to code it. Giving feedback on design comps, rather than coded sample pages will save you time and money, especially when there are changes that need to be made. They act as visual plans.
Domain Name
A domain is identified by the number assigned to its unique space. To make it easier to use however, the number is given the name of your choice an this name is assigned to the number. In this way, people do not need to remember the number (IP) in order to visit a website, but can use the easier-to-remember domain name. This websites domain name is www.digitalshifters.com
Drop-down
A drop-down can be one of two elements: A drop-down menu is a navigational menu that has sub-menus or categories below it. When clicked on, the sub menus “drop down” and are then visible to the user. A drop-down field is found within a form on a website. It acts similar to a drop-down menu, but it requires the user to choose an option from multiple choices.
Fixed Width Layout
A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.
Flyout Navigation
A flyout navigation menu contains multiple links to different pages and/or categories on a website. It’s typically contains multiple columns, whereas a drop-down menu may only display one column below the main tab.
Font Family
Font family is a group designation for defining the typefaces used in CSS documents. The font family tag generally lists multiple fonts to be used, and usually ends with the generic font category (such as “serif” or “sans-serif”).
Hero
A common term used to refer to the main image on a homepage or landing page.
Infinite scrolling is currently a trendy way to present a site so that rather than load separate pages to view content, all the page content is loaded into a single page that scrolls to show different content areas.
The premise is that as the user scrolls down a page towards the end of the content, fresh content is loaded and appended to the bottom of the page, creating an “infinite” scroll. Popular examples include the Facebook timeline view, Pinterest and Tumblr.
Parallax is the effect seen when items closer to your viewpoint appear to move more quickly than items farther away. This is best seen from a moving car or train, where fences and trees close to the vehicle appear to move past quickly, while mountains in the distance appear to move more slowly.
On the web, this same effect is being used to create a sense of depth to site designs, often providing movement in response to the user scrolling.
Input field
An input field is a blank area where a user would input specific text based information. They are found within a form on a website.
IP / IP Address
Internet Protocol. Very simply, the IP address refers to the actual number that a web address name translates to. (also see “Domain”). The IP number is the real address.
JavaScript
JavaScript is (as implied by the name) a scripting language that allows designers to create interactions on a web page.
Historically JavaScript was primarily used for form validation, and provided those annoying alert boxes that popped up when you forgot to enter your telephone number in the phone field. These days there are many more viable uses for JavaScript, including special visual effects, or the ability to load new content without having to reload the whole page.
One important thing to note is that despite its name, JavaScript bears no relation to the Java programming language whatsoever.
Liquid Layout
A liquid layout is one that is based on percentages of the browser window’s size. The layout of the site will change with the width of the browser, even if the visitor changes their browser size while viewing the page. Liquid layouts take full advantage of a person’s browser width, optimizing the amount of content you can fit on screen at one time.
Lorem Ipsum
Placeholder text is used by web designers when creating mockups of pages or layout so they can see how the text will look when the page is finished. This can be any form of text and is usually nonsensical, like ‘Lorem Ipsum Dolor’.
Navigation
A website’s navigation is a collection of links that allow users to “navigate” to other pages of your website. Your website’s navigation can also be called a “menu.” Your primary navigation, or main menu, is generally located near the top of a website.
Image Optimization
This term is used to refer to the reduction of size of an element to be more ideal for web use.
Example: Images used on a website should be optimized to a smaller file size to decrease the time it takes to load the page they reside on.
PHP (HyperText Preprocessor)
It allows for dynamic web content to be displayed and/or interacted with on a web page.
Responsive Design
Responsive design solves the problem that was created when smart phones and tablets became popular. Traditional web sites were fixed-width and designed for computer monitors only. Fixed-width sites create lots of usability issues on phones and tablets, which is why people started creating separate mobile sites.
Responsive design solves this problem by using fluid-width layouts instead of fixed-width layouts. Responsive websites adjust to different sized screens and display properly on any device. This eliminates the need for dedicated mobile sites.
Rollover / Mouseover
A rollover is an action that happens when a user places his or her mouse over a particular element that has a rollover effect applied to it. The mouse action causes the element’s appearance to change into a different image, color or font style.
SaaS (Software as a Service)
In simple terms this means any service that provides a software platform, delivered from or via the cloud and typically incurs a monthly fee.
Server-side Scripting
There are two different ways of providing application functionality on a web site: client-side, where all the logic and data handling is dealt with by the web browser using JavaScript, and server-side, where the data manipulation is conducted on the server. Most web apps combine the two, so that from the user’s point of view everything is handled in the browser, but behind the scenes data is being sent back to the server to be stored, manipulated or generated.
Server-side scripting is a generic term to describe the languages used to program this server-side data manipulation. Scripting languages such as PHP and ASP.NET provide a straightforward way for web developers to create sophisticated business logic that can interact with a database, conduct complex data operations and provide information back to the browser.
Because the processing is done at the server, the user’s web browser doesn’t have to work as hard, improving the apparent performance, at least from the user’s perspective.
Style Guide
A style guide is a document that includes all of the colors, fonts, and branding guidelines for a website, brochure, book or complete brand.
A style guide is often a great guide to supply a web developer so there are no questions about the technical specifications of a design. It also can save them time from having to go back and forth with the designer.
Title Attribute
Text used to describe the web page in the top of the browser window. A HTML page title is recognizable by search engines and should be carefully determined. It is displayed in search results for the title of a page listing.
UI (User Interface)
A UI designer focuses on the usability between a website and it’s users. They make sure the targeted user can use the website with ease by designing elements to make their experience easy.
Example: The UI of the website allowed the user to easily find the product they were searching for and make a purchase.
UX (User Experience)
This term encompasses UI. It includes all of the emotions, feelings, moods etc. associated with the use of a website’s user interface.
White Space
Space that surrounds text, images or other parts of the page. It is generally believed that the more white space there is, the easier it is to read content and draw attention to important aspects of a page.
Wireframe
A visual representation of a website’s layout with directions for visuals, location of content, and style for each page. This is usually constructed before the site is built and is more or less a road map for developers.
