Raster vs Vector Graphics

Raster Graphics

They are bitmaps. This is a grid of individual pixels that collectively compose of an image. raster graphics render images as a collection of numerous tiny squares. Each square, pixel is coded in a specific hue or shade. They are best used for non-line art images such as specifically digitized photographs, scanned artwork or detailed graphics. These type of images are represented in raster as these typically include subtle chromatic gradations, undefined lines and shapes and complex composition.Are pixel-based and suffer a image degradation. Its similar to photographic images that get blurry and imprecise when blown up, a raster image gets rough. Raster images can be scaled down more easily and smaller versions often appear less crisp that the original. 

Maximizing the quality of the image, one must keep in mind that the raster format is resolution specific. The are defined and displayed at one specific resolution. This is measured in dpi (dots per inch). The higher the dpi is, the better the resolution. High resolution images should be used only if the equipment has the capability to display them at high resolution. This comes at a price. They are significantly larger than comparable vector files, high resolution raster files are significantly larger than low resolution raster files. Raster graphics are less economical, slower to display and print, less versatile and more unweildy to work with. Common raster formats include TIFF, JPEG, GIF, PCX and BMP files. Raster format is the Web standard. 

Vector Graphics

They are based on mathematical formulas that define geometric primitives such as polygons, lines, curves, circles and rectangles. Hence they are composed of true geometric primitives so they are best used to represent more structured images, like line art graphics with flat, uniform colors. Vector based graphics are versatile, flexible and easy to use. Vector images are quickly and perfectly scalable. Images can be sized without loosing resolution. But on the other hand they aren't resolution dependent. They have no fixed intrinsic resolution, rather they display at the resolution capability of whatever output device is rendering them. Vector graphics don't need to memorize the contents of millions of tiny pixels as these files tend to be considerably smaller than their raster counterparts. But on the other hand they are more efficient and versatile. Common vector formats include AI, EPS, CGM, WMF, and PICT.

Difference between raster and vector graphics

The Printing Connection. (2011). Raster Images vs. Vector Graphics. [online] Available at: https://www.printcnx.com/resources-and-support/addiational-resources/raster-images-vs-vector-graphics/ [Accessed 19 Oct. 2016].

Difference between Screen vs Print

Screen Printing 

It uses the screen to apply layers of ink on the printing surface. Each colour is applied using a different screen combined to achieve the final look. Screen printing is the best option for designs that require a high level of vibrancy, for example printing on dark shirts or speciality products. The ink is applied thicker that digital printing. these result to brighter colors even on darker materials. these products are printed by hand also allows for unique products such as water bottles, mugs. The minimum order quantity on screen printed items exists because of the extra materials and labor time associated with screen printing.

Digital Printing 

It involves the user's artwork being processed by a computer and will then be printed directly onto the surface of the product. The ink is directly followed to the fabric of the user's shirt. Digital printing is best used for items that require high amounts of detail and orders of a small quantity. The digital printer doesn't use screens allows for a photographic print with much more detail than traditional screen printing. The ink is applied thinner so digital printing is best used on lighter colored shirts to allow the design to shine through. the design is processed and printed digitally allows for a quantity of one, since there are no screens or physical setup.

A blog about efficient teams using design thinking to solve real user problems. (2015). Building the perfect prototyping process. [online] Available at: http://blog.fluidui.com/building-the-perfect-prototyping-process/ [Accessed 19 Oct. 2016].

Prototyping in Pixel Perfect

Starting from scratches

Prototyping is an interactive and communication driven approach to software design.It is based on the fact that no first design will get everything right. The best way to success is to create, test and iterate using the fastest and most appropriate tools during each iteration. No other medium or tool comes close to paper's flexibility or sheer creativeness. Certain prototyping tools do a good job in trying to emulate working on paper in a digital form hence in the end, using paper has a low fidelity and collaborative feel to it that no screen can ever match. Software tools have a purpose but they come later in the design flow when we are iterating with two of the key groups that will define the success of the design, which are our customers and our users. 

Customers and users

The easiest way to recognise your customer though is that they are the person that always pays for the project and by virtue of that, is the person who decides whether it is considered successful or not. Regardless of whether they ever actually use the finished product. In certain cases, the customer is also the user but more often that not, users are a distinct group of people and must be treated separately. Users are the people who will use the products every day, learning to love or hate it depending on how well it solves their problems and how easy it is to use. While the customer will sign off on the design, the users are the ones that will define whether it is successful in the long run. Whether hard work continues to see the light or whether it is consigned to the dusty shelves of the software graveyard.

Getting feedback

Feedback can come from three separate sources. First source is from your fellow designers and developers in the development team, secondly from the customer and thirdly from the users. The best designs come when all three of these groups work closely in tandem but often one, both or all three of these are unavailable during the majority of the design process. The more closely you can work with the customer in this first phase, the more successfully the design is likely to match the customer's needs. The customer will typically bring the sharpest focus on the business problem to the table, though may sometimes lack the technical depth of understanding needed to work effectively with you on the design. The customer who has plenty of time available to work with the design team and who understands the paper prototyping approach will add far greater value than any other approach. The requirements can be misinterpreted as the feedback comes purely from the rest of the design and development team without close access to this critical member of the team. Often people who aren't familiar with the business challenge at hand. It is recommended to get as much customer time as possible at this stage by including a number of sign off and review session designed to capture the design in as much detail as possible.

Iterating and moving up the fidelity curve

When presenting concepts more formally to customers for sign off and approval, testing with users for whom a higher quality bar is vital and when handing over to development and QA alongside a detailed requirement specification, are the three main situations you want to use higher fidelity prototypes. It is likely to use paper prototype with the design/development team before creating a higher fidelity mock up for management review. Testing with users should happy only after developing a higher fidelity prototype and should always come after you have gotten first guidelines from the customer about the design. This is to ensure the business case is met before ensuring that the software is usable. 

Time to remove Lorem Ipsum

Having as much graphics and copy as much as possible before handing over to developers is recommended. Never use placeholder text when doing later phase digital prototyping. The more you can focus on the exact wording and functionality, the less time is needed to explain functionality and the less the user will have to imagine how things work. It reduces their suspension of disbelief, giving you better feedback on a real world prototype.

Handing over the reins

The more feedback before handing over to development is given, the better the design will be. Time and budget factors will push the design into production in order to keep the project moving forward. The design will never be perfect no matter how hard anyone tries, especially parts of the products evolve and more and more users use the product in the real world for unintended consequences. The balance of creating a great design now moves from exploring ideas to executing and creating a functional product.

A blog about efficient teams using design thinking to solve real user problems. (2015). Building the perfect prototyping process. [online] Available at: http://blog.fluidui.com/building-the-perfect-prototyping-process/ [Accessed 19 Oct. 2016].

5 Principles of Visual Hierarchy in Pixels

Visual hierarchy describes which elements dominate your user's attention and draw their eyes most. However, there's no one right way to build a concrete hierarchy and competitive designers must perfect different methods or invent new ones to stay on top.

The first principle of visual hierarchy is size. The bigger the size the more noticeable but not always better. The simplest way to define it is that your most important elements should be the biggest but it's when we get into the details that it becomes more complicated. Objects with a bigger size, specifically clickable rang, are easier to engage with. The user puts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go.

The large, clickable and interactive products are the main attraction. No copy will be required to tell users to engage with the product. the image functions as a subtle call-to-action because of its contrasting color and size. Least attention is demanded by the four icons around it which actually expand in size to give product descriptions.

Size is still an important component of the sit's overall visuals. Larger elements can dominate even our hand-weird left-to-right, up-to-down site patterns depending on the degree. It's based on perspective and size can also be conditionalized with contrast. Same advantages can be reached by making other elements smaller instead of one element larger.

The second principle of visual hierarchy is color. Colors themselves have their own hierarchy where blacks and reds will draw attention more readily, while soft yellows and creams don't draw attention as much as blacks and reds.

Those effects can be even reversed by the use of contrast. Contrasting colors against their natural opposite draws greater attention to both. Placing a yellow call-to-action against a blue background may produce better results that a red CTA.

The third principle of visual hierarchy is layout. Any website interface's layout is one of the most direct ways to control visual hierarchy as you can literally place an element at the top of the visual hierarchy by placing it front and center. The stagnant clickable links remain easily accessible in the corner and at the bottom. Scrolling up and down changes what's displayed in the middle but the site logo and social media links stay firmly in their prime locations. Rows and columns aside from supporting an organized structure to keep the chaos at bay also create some prime real estat when they end.

The fourth principle of visual hierarchy is spacing. The spacing within the interface guides the eye and under the right circumstances explains or suggests function. It impacts visual hierarchy in two distinct ways, which are proximity and negative space.

Proximity is a powerful tool for a web designer as it can suggest an element's meaning and functionality using only visuals. Another aspect is negative space which is commonly known as white space. It is bad to treat white space as an empty canvas rather than a design tool.

The fifth principle of visual hierarchy is style. Personal style, such as the use of textures, graphics and the type of imagery, all effect the visual hierarchy and allow you to express an individual design persona.

One of the most powerful stylistic tools is texture. When used properly, texture enjoys the same advantages of size and color while adding depth and atmosphere. Displacement gives just a single element texture will make it stand out, while having a textures background will make non-textured objects in the foreground stand out. The types of graphics and imagery are used also to effect visual hierarchy.

Cao, J. (2015). The 5 Building Blocks of Visual Hierarchy in Web Design. [online] The Next Web. Available at: http://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/ [Accessed 18 Oct. 2016].

5 Basic Principles of Typography

Typography has the art and technique that consists of arranging type with the purpose of making language more visible. Typography requires a lot of choices to be made and it also involves a good understanding of elements such as typeface, font and characteristics, alignment, line length, line spacing and adjusting space between groups of letters.

The first principle is don't use too many typefaces. A font is a complete set of characters that share a common weight, width and style. However, a typeface is a collection of fonts sharing an overall appearance that are designed to be used together. Calibri is a typeface and Calibri 16-pt italic is a font.

Typefaces are usually broken down into the following categories:

• Serif
• Sans-Serif

A serif is a small line attached to the end of a stroke in a letter or a symbol. If the letters and symbols of a typeface have serifs will then be called a serif typeface. The word sans in French is without and a Sans-Serif typeface is a typeface without serifs. The strokes of the serif typeface help guide the eye across a line of text. Serifs are almost standard when it comes to most newspapers. Sans-Serif is said to be easier on the eye when reading online.

• Display

It is usually a typeface used with large sizes (20 or higher). They are generally not used for body, but they are perfect for demonstrating a visual theme when used for tiles and headings.

• Script

It is a typeface based on the appearance of handwritten letters and symbols.

• Dingbat

It is a special typeface used for scientific formulas or graphic icons. To use a typeface you need to think of the impact it will have and make sure that it carries the references and associates your design needs.

The second principle is that the contrast is good but the wrong colours can be painful. The most common form we encounter text in black over white background. Sometimes colour makes text harder to read less enjoyable and can ever cause pain when looked at for a longer time. It is almost always a bad idea to choose a text colour and a background colour which contrast with one another in a discordant manner. 

The third principle is the limited use of display faces. Ornamental and display typefaces were not designed to be used for bodies of text as they generally require a larger font to be readable. Faces tend to be more complex but tiring the viewer's eyes easily.

The fourth principle is the scannable text is a must. When writing for the web, readability is not the only thing you have to worry about. The user is free to surf away at any moment and with just one click. The text is in such good shape that the reader will keep his interest long enough to read through the whole thing. This thing won't happen unless he can easily scan it for focus points that peak his interest. Focus points are elements that will draw the user's attention, such as, header, a button, a graphical element, emphasized text. The main things that impact how scannable your text is are focus points, header size and position, text size, line height, alignment and contrast. These elements are of good use as they will make sure your reader will be made aware of the content of your copy before choosing to read it wholly or abandon it.

The fifth principle is don't distort typefaces. They are carefully designed by pulling a typeface not only do you take away from legibility but you also eliminate the reasoning behind that typeface being crafted that way it was. Each typeface contains styles and weights that are already properly expanded and condensed. Type designers know that people want thinner or thicker fonts so sometimes these styles are included in typeface families. If the font doesn't have the variant the reader isn't looking for, the reader has to pair it with another font that fits the reader's needs.

Pixel77.com. (2016). Design Theory: 5 Basic Principles of Typography - Pixel77. [online] Available at: https://www.pixel77.com/principles-of-typography/ [Accessed 17 Oct. 2016].

Offset Printing

Offset Printing is great for:

• business cards
• letterhead
• catalogues
• books/booklets
• business forms
• flyers
• brochures
• calendars
• invitations, etc.

It is the highest quality printing process in the industry. Offset process produces prints with rich, smooth solids without the streaking found in the least quality prints. The look and/or feel of any offset product comes across as the most professional printing.

How it works

This type of printing is commonly used printing technique where an inked image is transferred from a plate to a rubber blanket, then to paper. The offset printing is also known as lithographic process. Taking an example of a brochure, it would be broken down into primary printing colours (CMYK). The images is broken down into these four colours and four separate plates are made. 

A plate is made up of areas that are receptive to grease and areas that are receptive to water. The areas receptive to grease hold onto the ink while the other areas attract water and repel the ink. The next process will be that these plates will be put onto a press. The press pulls in the ink and puts it onto the plate. The press applies great pressure to the plate and the ink imprints the image  from the plate onto a rubber blanket. The image is then pressed onto the paper off the blanket to make a print. When these four colours are printed onto each other the image comes back together and looks the way it did in the initial PDF. The process happens really fast and many impressions can be made from one set of plates. It is very efficient process and borrows itself very well to long runs over a long period of time.

The process of Offset printing

The-printer.net. (2016). Offset Printing : The Printer | Quality Offset & Digital Printing | 530.753.2519 | Davis CA. [online] Available at: http://the-printer.net/offset-printing [Accessed 17 Oct. 2016].

Flexographic Printing

Applications

This type of printing is the major process used to print packaging materials. Flexography is used to print smooth containers, folding cartons, multi wall sacks, paper sacks, plastic bags, milk and beverage cartons, disposable cups and containers, labels, loose tapes, envelopes, newspapers and wrappers for candy and food.

Process Overview

The substrate is fed into the press from a roll. The image is printed as substrate is pulled through a series of stations or print units. Each print unit is printing a single colour. As with Rotogravure and Lithographic printing, the various tones and shading are achieved by overlaying the 4 basic shades of ink (CMYK).

The major unit operations in a flexographic printing operation are:

• Image preparation
• Plate making
• Printing
• Finishing

Image Preparation

This process begins with camera-ready art/copy or electronically produced art supplied by the customer. Images are captured for printing by camera, scanner or computer. Components of the images are manually assembled and positioned in a printing flat when a camera is used (stripping process). When the art/copy is scanned, the image is assembled by the computer with special software. A simple proof is prepared to check for position and accuracy. The colour involved is colour proof submitted to the customer for approval.

Plate Making

Flexographic and letterpress plates are made using the same basic technologies utilising a relief type plate. Both technologies employ plates with raised images and only the raised images come in contact with the substrate during printing. They are made of a flexible material, such as plastic, rubber or UV sensitive polymer so that it can be attached to a roller or cylinder for ink application. 

Flexographic Printing Press

Five types of printing presses used for flexographic printing are the stack type, central impression cylinder, in-line, newspaper unit, and dedicated 4-, 5- or 6- colour unit commercial publication flexographic presses. All these types employ a plate cylinder, a metering cylinder known as the anilox roll that applies ink to the plate and an ink pan. Some presses use a third roller as a fountain roller and, in some cases, a doctor blade for improved ink distribution.

Process of Flexo printing

Pneac.org. (2016). Printing Process Descriptions: Environment and Printing: The Printers' national Environmental Assistance Center: PNEAC: The Environmental InformationWebsite for the Printing Industry. [online] Available at: http://www.pneac.org/printprocesses/flexography/ [Accessed 17 Oct. 2016].