Web Design Graphic Design Interactive Video Photography Animation

"You can't depend on your eyes when your imagination is out of focus." Mark Twain

Graphic Design for the Web and Print

Circles | Albrecht Dürer | HEX | Magazine | Sell Sheet | Book Cover | Logo Design | Poster | imagen8 Graphics

Graphic design, also known as communication design, is the art and practice of planning and projecting ideas and experiences with visual and textual content. The form of the communication can be physical or virtual, and may include images, words, or graphic forms. The experience can take place in an instant or over a long period of time.

The work can happen at any scale, from the design of a single postage stamp to a national postal signage system, or from a company’s digital avatar to the sprawling and interlinked digital and physical content of an international newspaper. It can also be for any purpose, whether commercial, educational, cultural, or political.

graphic design illustration

Circles

circles design illustration

Some of my past experiences in graphic design was during my studies for my degree in web design and interactive media. Various subject matter bridged simple illustrations in Adobe Illustrator, to 3D effects in Adobe Director. The examples that follow are designs from my introductory "Fundamentals of Design," and "History and Analysis of Design" subjects, created in Adobe Illustrator and Photoshop.

Design 1: "Create a element group using 2-4 black and/or white circles of the same size and no stroke. Then, duplicate the form group 2-4 more times, utilizing translation, rotation, and/or reflection to create a black and white design. Experiment with different form groups and layouts to generate a visually appealing composition that is unified. Unified in this instance means the elements you have assembled will look as one larger unit. Remember that the negative space is as visually important as the positive. Finally define the composition space with a border."


The 'circles' design is my interpretation of the above design proposal that satisfactorily met all the defined requirements.

Top

Albrecht Dürer

Design 2: From the project subject "The History and Analysis of Design - G132."

Rationale: A very brief example of Dürer’s more famous woodblock etchings. I chose woodblocks over his oil or water color paintings as they represent a much more graphical placement in the history of art (the first medium used for making copies of images).

It also shows the artist as a designer, and one that successfully bridges the gap between the artist and the designer along with the implied constraints/freedoms between both (the artist about self expression, and the designer about communication).

The Story of Movable Type | Albrecht Dürer | The Renaissance | 16th Century Woodcuts

Below are the requirements for this Assignment: (set your Artboard to 300 dpi)

Layout: Landscape orientation (horizontal) Dimension: 11" x 17" (Landscape orientation only) You may scale to 50% if you prefer. Color: Full Color (CMYK) Illustration: two illustrations (no more, no fewer) The illustrations can be photographs or artwork (paintings, drawings, etc.).

Text (body) copy: minimum of 300 words. You may cut and paste information from your research for the text of the double page spread. Do not use placeholder text (Lorum ipsum, etc.)

Albrecht Dürer illustration

For a higher resolution copy of the above image please mouse-click/tap on the following link Albrecht Dürer

Top

Fundamentals of Design: Final Project-Proposal

Submit a written proposal for your final project. Your proposal should explain the message or theme of your design, and its intended audience. It should also explain how you will use the elements of visual design to achieve these design goals. The proposal will serve as a written plan for the execution of your design.

The statement "form follows function" simply indicates the linear progression of the design process. The function of a design needs to be established first, so that the form can then be fully considered. Also, the function of a design is a solution to a specific problem. The problem that I have recognized is the issues of cost-effective residence, durability of material, and aesthetic quality of standardized design.

The common shape of a home is the rectangle, and rectangles within rectangles. While this is a tried and tested shape that has stood the course of time, I believe it is time for a change in shape, and time to think outside the box.

Solution

I propose to submit a design of a new concept in building blocks. As the name suggests, my target audience will be architectural, building industry, and all general new (or returning) home owners. I will not be the manufacturer, just the designer. It is commonly said in design conversation that form follows function.

This means that the form of a design, or its outward appearance, should be created in service to its function. The function of a design should define its form. The building blocks will not be the traditional rectangular shape or size. They will be pre-manufactured, full sized-room hexagon building blocks.

They will be part of a set and will come complete with door (external/internal), and/or window frames (depending on size, position within home, and design requirements). The material for these blocks will be a strong, fire and weather resistant, reusable material, sizes are likely to be standardized, base and roof will be transferable (multifunctional - one size fits all). Each completed home can either be uniform, or take on a unique shape and size within the hexagon building framework (one/two or more levels).

Creativity remains at the heart of design and the content, meaning, form, and message are a source of inspiration for the designer. Each message becomes the starting point for a new exploration in creativity. The visual elements will be predominately graphic with the obvious "hexagon" element with the look of 3D volume and depth.

However, balance may also come in the form of visual scenery (the physical surroundings), placement of other architectural or sculptured designs in a park-like, town, forest or marina area.

Harmony with colors and overall geometric rhythm will be a main source of visual communication. The idea is to create a desire and a need. To show a solid foundation, strength and aesthetic qualities.

The challenges I foresee will be, the design, gaining a visual desire, the viability in physical construction, costing, logistics, and basically, getting people to think outside the box and live inside a hexagon.

Initial examples of building block deign.

Hex shape illustration

Hex shape illustration with moew detail
Hex shape illustration

Top

Magazine Cover

With the plethora online websites that relate to the science magazines content, one could ask "why print a magazine?" The answer is quite simple, many professionals employed within the genetic engineering sphere are accustomed to handling hardcopy material (official documentation, research papers, etc).

The magazine is an excellent resource of current techniques and fact-finding research that continues to bound ahead in the progressive filed of genetic engineering with constant updates in all relative scientific genres. The "Genetic Engineering" magazine offers a quality, glossy extension to well documented scientific literature, complete with current state-of-the-art macro and microphotographic imagery, along with professionally crafted illustrations. Professionals and students alike, will fully appreciate the solid feel and authentic visual artistry, along with the factual scientific documentation presentation.


Audience description: Professionals in the field of genetic engineering, nano technology, biology, biotechnology, GMO technology, schools, colleges and universities, general public with interest in subject content.

Communication objective: Informal and professional resource of current trends in related technology and on-going research techniques and results.

Content description: Science magazine covering the broad scope of dynamic activities within the genetic engineering, nano technology, biology, biotechnology, GMO technology genres. Magazine not only acts as a compliment towards the website, it offers a monthly publication that all relevant news and updates in the relative fields in with the visual reassurance and feel of a glossy hardcopy.

DNA magazine cover

Creative approach: Cover needed to remain relative to science while displaying recognizable subject-matter in an artificial field.

While artistic license was required, moderation was the preferred approach. Image had to relate to both the magazine title "Genetic Engineering," and the first subject headline "IBM finds way to build microchips using DNA."

Inline with the company "IBM," and its major products "computer technology," the circuit board was added as a background, and some of the circuit highways were tinted red to assimilate blood flowing through veins.

The DNA illustration, and tubular microchip were added to the foreground as the main focus of the subject matter (microchip and reflections added to glass tube for greater effect and realism).

Market: For the professional market, predominantly in medical, educational, and research establishments, with limited copies distributed through major high street stores, newsagents, speciality stores, and online at magazine’s website.

Citation

Images:

Circuit board: http://wallpaperscraft.com/download_chip computer_microchip_processor_5659/1920x 1080

Microchip tube: http://3.bp.blogspot.com/_6U6ZFTcbbU8/ TIjwu0TpUFI/AAAAAAAAEQE/xx8l2wsn0d0/ s1600/glass+enclosed+microchip.jpg

Microchip: http://www.microchip.com/EasyWeb/www/ images/pressrelease/DV102411_Wi-Fi_Comm_Demo_Board_7x5.JPG

Top

Sell Sheet

Flash game sellsheet

The sellsheet is the printed advertisement on the product's container, that provides the potential customer pertinent information on the new product. The left-side of the sellsheet would be viewed on the back of the container, while the right-side viewed from the front, and therefore the most visible to the customer. In this instance, the sellsheet represents a new children’s memory game created in Adobe Flash and burned onto disc.

Top

Book Cover

Catcher in the rye: The story behind the book title is in relation to a poem by Robert Burns, "Coming through the Rye," with the actual words "If a body meet a body coming through the rye." A line in which the narrator (Holden) blindly (with purpose) terms as "If a body catch a body coming through the rye." Holden, envisages children playing in a rye field near a cliff top. The rye is so high that the children do not see the cliff edge until it is to late. With Holden at the very edge, he catches the children before they fall (from childhood innocence into adulthood)

The "Catcher in the rye" by J. D. Salinger has had a number of different book cover interpretations. Included in my design is a ground viewpoint of the high-rise buildings, synonymous with the book's location (New York City), along with the symbol of Holden’s happiness (the book’s protagonist) - the carousel. Above the skyline is Holden’s stated desire to be a catcher in the rye, who rescues children by catching them before they fall off a steep cliff at the edge of a giant rye field.


original Catcher in the Rye book cover

Original book cover

Catcher in the Rye book cover

Top

Logo Design

All logo designs are linked to their respective websites.

Rose Budd's Floral logo

Taken from one of my featured website designs, is the independent florist "Rose Budd's Floral," which is located in a small communal town on the outskirts of the city "Buffalo" in WNY. The logo is the essential brand mark of any form of business, a symbol that offers individual recognition in a sea of competition. A relatively new establishment, which was formed three years ago, whose proprietor "Rose Budd," wishes to broaden her business potential and expand her customer reach. The "logo" would form an integral part of the company's image.

The design requirements was to utilize the company’s color scheme, which in this instance happened to be red (#660000), green (#006600), and white (#ffffff). It should reflect what the company was about, display the owners initials, and keep the design simple, yet striking.

The design's appearance is self-explanatory, in regard to the flower and butterfly used, which also resembles a face. While the business owner's name (which is also used in the business title) is "Rose Budd," it was initially the intention to use archetypical roses within the design. However, their appearance was too overwhelming, therefore the current flower forms were used as a softer and more subtle alternative.

Software used the creation of the logo are "Adobe's Illustrator, and Photoshop," with all vector work being made in "Illustrator," and image blends in "Photoshop."

i3D logo

The "i3D App" logo

The creation of a mobile application prototype documentation that includes the architecture and design phases. i3D is the ultimate 3D photographic image creator that manipulates your iSight Camera functions to the max and beyond. With its landscape view, it creates stunning panoramic photographs in sharp HDR. i3D is a highly creative photographic imaging tool for the discerning photographer that wants to take their photography to the next dimension. i3D rationale

The i3D application is a 3D photographic imaging tool for the iPhone, that creates 3D digital photographs. In accordance to the iOS Human Interface Guidelines, the application is launched in its supported orientation (landscape), this view supports superior depth for 3D imagery, and is more acceptable when viewed on both television screens and computer monitors. The i3D is a purely internet image device for viewing 3D media. Though prints can be made from images, they will appear as 2D prints on standard paper from standard printing devices. i3D function

The development of archetypal users (personas) to direct the vision and design of the iPhone app "i3D," the 3D pictorial image creator using a multi-layered single image. The target audience in relation to numbers is the 2.66% share of the app market that placed "Photo- & Video" apps into the 14th most popular position on the 2013 app list statistic conducted by "Statisca." The demographics of that target audience stretch to all users of the camera function within their smartphones - especially those inclined to buy and use photo apps. i3D objective

Max Exteriors logo

"Max Exteriors," is one of my first professional website designs, outside my local area. The small company, located in "Rockford, Illinois" was one of numerous home-exterior building companies within their locality, who decided a bespoke website may offer them the edge over many of their competitors.

The "logo" requirements were for a strong yet simple design that depicted both the company name and it's business theme, and infusing its company colors (black, orange, and white). The addition of the extra colors in the home illustration (the red/brown roof and the blue windows) were utilized to offer a subtle break and contrast from the main features of the text. Positioned on the header of all company documentation and visual imagery, there was a conscious decision to create a disign with an upward-visual perspective (the slant of the text and building position).

While the logo intentionally became the focal point on the website, and is used on all other forms of company advertisements (such as the decals on the company vehicles), its strong colors and form became a visual centerpoint that held together, and complimented (and vise-versa) the whole website, exemplifying the success of the design.

TASC logo

Transit Auto Service Center (TASC), is the locally owned "home of domestic and continental vehicle repairs, servicing, and pre-owned vehicle sales." The logo depicts a forward facing car that is made-up from the letters “T A S C” within the bodywork panels (created in Adobe Illustrator). The logo is fully complimentary to the company’s theme, in both nature of business, and business color usage (predominately light-blue).

A short “splash” animation opens up the website on the full-size website created for PC viewing, (which offers a better make-up of the logo content through a Flash animation). Flash is not playable on smartphone operating systems, and is therefore omitted from the responsive website. All other aspects of the website have remained faithful to it's original design, with the addition of the necessary code for a responsive design.

The logo, along with the website as a whole, was designed for PC use only (prior to the popularity of smartphone use). With overall changes being made to the website in order to meet the extensive range of smartphone usage, the logo is currently a "work in progress."

Top

Poster

lego poster

Boogie Knights is a movie promo site (assignment) that incorporates graphic design, decorative typography, flash, javascript, css3, creative writing, photography, video, animations, and audio.

The goal of this assignment is to create an exciting and eye catching movie promotional website that will be displayed on the web for desktop computer users. Do not use current movie names, actors, or images from movies. Create something entirely unique, or create a humorous spoof on one of your favorites.

Your task will be more design based in nature, instead of creating a full-blown site. You will create a movie graphic that will serve as a splash or entrance page into your web site. You should choose a size for your graphic that is appropriate for most desktop computer web viewers. Your site imagery should blend well into your chosen background color or texture.

Your site should also have a button that is an entrance to the web site. This should fit the visual style of your design. You should also create a rollover state for the button. The rollover state can be stored in a separate layer or layers. Finally, you should build your movie title using a unique or interesting font.

Production Synopsis: Camelot 537 AD. It is a number of years prior to the battle of Camlann, a time when King Arthur held jousting matches so that all his bravest and most loyal knights could sharpen up their dance moves. It is a saturday knight ferver as the annual Camelot Disco Jousting Championships are underway, and the evil Mordred has bewitched the judges with his rendition of the "Disco Dragon Dance." Can he beat King Arthur's bravest knight "Sir Dancealot" to the coveted golden stoned excalibur award, and thereby become the true Disco King of Briton!

View the exclusive movie clip from the Oscar nominated "Boogie Knights" featuring those lovable characters from Camelot, 537 AD, about tea time.

Top

imagen8 Graphics

imagen8 logo

The logo is more my branding that originated back in 1997 when I was working on a stained glass feature while I was in the Swansea Art College (UK). The actual outline has remained faithful (12 pieces of triangular glass with 30/60/90 degree angles) each with extending lengths from the center, and separated by leading.

The actual colors and shades of grey I developed in 1999, when I adapted the design to my commercial photography business (Mk.1photography). I wanted a logo that exemplified photography at its base (traditional film photography). So I took six of the seven colors of the visible spectrum for one side of the design (depicting color photography), and then six equal shades of monochrome, from black to white (depicting black and white photography), and formed them as a sensitometric step-wedge (the type used in photographic densitometry).

These aspects formed my branding logo, and while photography is no longer my main form of media, the design does relate to any form of visual media I work on in my position as a web and interactive designer, along with any other form of multimedia experience.

Sensitometry is the science of measuring the sensitivity of photographic materials. As a photographer, graphic arts, cameraman, cinematographer, or other user of photographic materials, you will use sensitometry in the control of operations involving exposing and processing photographic materials. Photographic manufacturers also use sensitometric methods in the control of manufacturing process.

video vidi visum

imagen8 Video opening credit screen.

"Video Vidi Visum." (Latin) "To see, observe, understand, comprehend."

It is no coincidence that the graphic I used for my video media bears great resemblance to the "MGM Studio’s" trade mark. MGM is an iconic company in the realm of cinematography, and I saw its image as a fitting extension for my own productions (on a much smaller scale) in the videography media sphere. There are a number of notable differences, including the brand name (imagen8), and the latin title "Video Vidi Visum." The center is currently left blank, but is utilized to display imagery pertinent to the subject-matter of the production. i.e. A documentary may have a industrial or natural graphic in the center of the screen. A wedding may have an image of the bride and groom there, etc.

Top