Important Web Design Terms
I had originally planned to publish this blog, but I was unsure of how helpful it would actually be. Then I read this article from the LA times. To people like me, that article is absolutely hilarious. However, the gap in understanding of industry terms is something that clearly needs to be addressed to both the general public and our clients. Though we try to avoid over use of these industry terms, sometimes there is no way around it. To help you out, I have put together a list of important words and definitions that will make your life a lot easier during the redesign process. Here is part one of our series on Important Web Design Terms – Basic Web Design Knowledge.
Basic Webpage Elements
Content – When we say content, we are generally referring to anything that can live on a page. This includes, but is not limited to, copy, images, graphics, videos, PDFs, Word documents, Excel spread sheets, etc.
Header – The top section of the website that contains the main logo and navigation links.
Icon – A picture or symbol that appears on a page that is used to represent a specific section, call to action, command, or page of a website. For example, an envelope can be used to represent sending an email. We custom create icons for a lot of our projects so they fit the design perfectly.
Footer – The content at the bottom of the page that usually remains universal throughout the entire site. This section usually contains important links, social media, and legal information.
Navigation – The links at the top of the website that lead you to the other pages of the website.
Parallax Scroll – This is a design technique that allows us to show depth and movement while scrolling. See our design for Specless Media for an example.
Section Headers – Not to be confused with THE HEADER, Headers are a block of text on a page that generally signifies a separate section of the site or a call to action. These are usually more prominently displayed that normal copy and are used draw the users attention. We always recommend making these informative and legible.
Slider – This is the rotating set of images, messages, and calls to action that generally sit at the top of the page.
EPS - A vector based file format. We generally request these for logos because they offer the highest quality.
GIF – A particular image file format that allows for transparent backgrounds and animations. This particular image degrades in quality with the use of multiple colors.
JPG – A particular image file format that offers the highest image quality, while also allowing the file to be optimized for the web. This is arguably the most frequently used image file format. Illustrator - An vector graphic editing program. This is mainly used for graphic design, specifically wireframes, logos, and icons.
Mobile First Design – This is designing for mobile devices first, and then building up to the desktop layout. This allows us to focus on only the most important items, while increasing page elements and features as we build up to the desktop.
Mockup – A visual representation of the final website, but with no functionality. This is what the end result of our process will look like when we are finished.
Photoshop - An image manipulation program.
PSD (Photoshop Document) – A file for the program Photoshop.
PNG – A particular image file format that allows for a transparent background.
Responsive Design – Designing and coding a website so that it works for desktop, mobile, and tablet users. Each platform will provide a unique layout that is all based on the same source code and responds to different device and screen sizes.
SVG – This is a vector graphic that is generally used for the web. This file format is not supported by IE8 or lower.
Vector Graphic – This is a graphic that is based on mathematical principals that allows the image to be scaled without degrading the quality. Providing a vector allows is to use the clearest image at the largest size we can.
Wireframe – This is a simple mockup that essentially functions as a blueprint to showcase the proposed layout of the site. Wireframes are bare-bones, and do not take into consideration any elements of graphic design.