Frog's Digital Design Blog » design

How I Can Justify Buying an iPad

Eric Steele — Tue, 09 Mar 2010 16:59:43 +0000

When I talk to people about getting the iPad, it’s pretty common for them to dismiss my enthusiasm for fanboyism (a word that gives me a headache, just trying to spell it “correctly”). I see this little device as the thing that will make certain tasks easier, and maybe even get me into old habits again. So, while I patiently wait, I’d like to share what makes me excited about the iPad:

Reading

I had an argument with a coworker the other day about how I just don’t read books. There isn’t a reason. I like books, and I like to read. I do it all the time with blog posts, news articles, and instructional writings. Honestly, the internet is probably the best thing to happen to my reading habits. The problem is that I’ve migrated to the browser, so my reading experience is looked at as browsing the web instead of the traditional kick-back-my-feet book reading. I know that there will be some kind of awesome news aggregator app designed specifically on the strengths of the ipad, and with the ibooks app, I will finally have a traditional ereader (or should it be ireader?). I might actually be able to find some comfortable middle ground between traditional reading and my browsing habits.

Games

Something has broken inside me that doesn’t allow me to get into involving video games anymore. It may be work, it may be a change of interests, but I just can’t split up a 30-40 hour game without getting bored and moving to something else. I’ve got a stack of games that remain unplayed because I just can’t find a few hours and the motivation to get into them. Enter casual gaming. I loved some of the games available on the iphone. Peggle was absolutely awesome, Jelly Car made me laugh, and Apple’s Texas Hold’em was a brilliant iteration of a traditional game. I have a Nintedo DS and I’ve had my teeth sunk into Scribblenauts, but since I discovered that a pterodactyl and a grappling hook can solve pretty much any problem, my interest has tapered off. Gaming on the iphone was a lot of fun, and I can only imagine what developers will come up with given all that new screen real estate (*cough* Plants vs. Zombies *cough*).

Design

Sometimes, I just don’t enjoy using photoshop. I keep on revisiting it, telling myself that I just need to learn the conventions and it will work a lot better, but it still often ends in a headache. Apple’s Pages application is what I prefer to use for quick mock-ups because it is much more natural. Text boxes and images snap right where I want them, and nothing gets in the way of my ideas. The idea of having that kind of power on a big screen with multitouch just makes me giddy.

Everything Else

What really gets me excited is the stuff that I can’t think of. The iphone app store is home to some of the most creative apps and talented developers of our time. They see the iphone and ipod touch as so much more than a phone or media device. They look at the multitouch screen, internet connectivity, and a plethora of other hardware assets and see a moldable, plastic device, capable of so much more. I wouldn’t have thought I could use an iphone as a mouse/keyboard, or as place to dump my meaningless thoughts into twitter, or as a friggin’ sonic tape measurer. I’m excited about realizing what else the ipad can do.

This friday, the pre-orders start, and I’m going with the most basic $499 wifi-16GB model because that’s all I will need. All of the things I’m excited about can be done without massive storage or a constant 3G connection. The ship date is April 3rd, and until then, I’m going to keep thinking of situations where the iPad will be a perfect fit. The masses may not see a use for the iPad, but that doesn’t mean it’s useless.

A Decade in Design: 2000 to 2009

Gary Hartley — Mon, 28 Dec 2009 09:00:46 +0000

In just a matter of days our glasses will be full of cheap Brut Cava, the countdown to midnight will begin and we’ll drunkenly sing along to Old Lang Syne as we welcome in a new year, a new decade and the start of 2010. Looking back 10 years I regale my girlfriend to where it all began where I, a mere design student, started the long road to design stardom, stardom which still avoids me of course but the start of a career that sees a lot of change and evolution in the design industry. Print is in decline, web has been a rollercoaster of growth and decline but most amazingly my mother gets her first computer and starts blogging (no you can’t have a link she’ll kill me).

Good took a look back at the last decade in design and highlighted the most significant moments. We chose are favourites below but please do click through and read the entire post as it’s really worth the read.

It will also be great to hear your achievements from the last decade, whether you’re new to the game or you’re an old skool designer make sure you regale us below in the comments.

2000

Tech stocks plummet, signaling the official burst of the dot-com bubble. Thousands of newly-minted web designers are laid off. San Francisco’s cafes swell with unemployed creatives paying inflated rents.

2001

Apple’s first retail store opens. Steve Jobs announces the first-generation iPod, which can hold 512 MB of music. It is available only in white.

2002

The stop-motion Lego animation of the White Stripes’ video Fell in Love with a Girl by Michel Gondry heralds a new generation of video and commercial auteurs who bring their specific aesthetic to feature films (and Criteron Collection DVD sets).

2003

Jeffrey Zeldman’s book Designing with Web Standards transforms the way that web developers interact with code, calling for universal accessibility across browsers.

2004

The Dove Campaign for Real Beauty is launched by Ogilvy & Mather, featuring self-esteem messaging for young girls, an attack on glossy magazines, and imagery of real women shot by Rankin.

2005

The One Laptop Per Child project announced by Nicholas Negroponte. The lime-green laptop is later designed by Yves Béhar.

2006

The Wii gaming console is launched by Nintendo, forever transforming the way we interact with games. We never need to go outside again.

2007

The 2012 London Olympic logo by Wolff Olins is revealed, sparking a international scandal as more than 50,000 British citizens sign a petition against its design. An animated version is said to cause seizures.

2008

Shepard Fairey creates the “Hope” poster to support Barack Obama’s presidential run. It becomes the single most representative image of any political campaign, ever. Fairey spends the next year in a heated fair-use battle with the Associated Press. No one wins. Oh, except Obama.

2009

Dubai’s Burj Dubai, designed by Adrian Smith, tops out at 2,684 ft, the tallest man-made structure ever built. It’s scheduled to open in January 2010 as reports of Dubai’s downfall begin to trickle into architectural publications.

2010 – What next?

More awesome t-shirt designs from threadless.com

Gary Hartley — Mon, 16 Mar 2009 12:53:49 +0000

Aled Lewis is a designer and illustrator based in London, England. He has created an awesome collection of illustrations that you can buy on t-shirts at threadless.com.

Not As Far As You Think

Television Made Me Do It

Identifying Flying Objects

Freaks In The Fun House

Eating Brains, Throwing Shapes

Foam Monster In Emotional Reunion With Severed Limb

21st Century Pirate

Bigfoots Watch In Bewilderment

Infamous Mishaps Throughout History (collaboration with Mitch Ansara)

Self-Sufficient

8-Bit Investigation

Yeti Hated His Size 5 Feet

She Screamed, But To No Avail

Punk Rock Cock

Rhinos Hunt In Packs

Keeping It Real

I’m Sure I Used To Fit

Party Pieces

Smoke And Mirrors

Do you own any of these tees? Have you every bought any tees from Threadless.com? We’d love to hear from you, comment below to start a conversation about this post.

New Photoshop Interface Revealed

Gary Hartley — Mon, 26 Jan 2009 12:06:04 +0000

Adobe revealed their new ‘traditionally themed’ Photoshop interface this week at their annual AdobeExpo. The drastic redesign has come after months of highly publicised campaigning by angry Anti-Adobe protesters who state that their current interface is “harming our planet”, and “is turning our young generation into mindless web2.0 obsessed vombies”.

A spokesman from Adobe said “This new redesign will revolutionise the way we design in the future. The new sophisticated layout and intuitive panels will help modern designers leave the world of Web2.0 behind and thrust the web into a new place, a place where animated GIFs will live happily with PNG’s and Serif fonts.”

Bill Bates, leader of the Anti-Adobe interface movement said… “It’s about time! I’ve always been a fan of Adobe in the past but when their new interface was released in 2002 I knew this would cast dark shadows over the traditional design era. Web 2.0 on the web is a direct result of that interface so we knew it had to go!”

He continued…

“Next is Microsoft 8′s new interface, it just sucks, and if left to spread amongst our unprepared nation we’ll all turn into f***……” *Interview cut short.

Let us know your thoughts, can this new interface really eradicate Web 2.0 from the web? Can this new interface really improve the quality of designs. And most importantly, would you pay £1,250.00 for the luxury?

Click to enlarge

Credit:Advertising Agency: Bates141
Creative Director: Hendra Lesmono
Art Directors: Irawandhani Kamarga, Andreas Junus
Copywriter: Darrick Subrata
Photographer: Anton Ismael
Published: August 2008

Frog gives piggy yet another outfit for her blog

Gary Hartley — Thu, 08 Jan 2009 23:19:23 +0000

Piggynap.com is the blog of my girlfriend Zoe who works in online marketing and SEO. A few months ago I set her up a quick WordPress blog to start blogging on, with a simple design and limited features. I felt that I was getting more proficient at building and tweak WordPress themes so I decided to get my knees dirty and have another crack at creating another theme.

The first thing Piggynap.com said was:

Does it have Avatars on comments???

Yes of course it does, I said… a beaming smile and an overly tight hug later, Piggynap.com left most satisfied while grasping a bar of chocolate. Heaven.

Let me know what you think. If you like it I may attempt a Free WordPress Theme for anyone to download… maybe, so be nice.

New design

Old Design

Basic design principles explained

Gary Hartley — Mon, 10 Nov 2008 22:37:33 +0000

I work in the web design industry and I’m amazed every single day by the lack on knowledge, respect and understanding of the basic design principles that I take for granted. I trained for 4 years in Graphic Design by some of the best, or more accurately traditional, designers in the business where I had these principles drilled into me. Taking these basic design principles and any talent for design and creation, I have forged another 7 successful years in the industry.

My aim with this post is to lightly guide those of lesser experience in the right direction with a series of examples and explanations, gliding over some pretty basic teachings so that we can approach our next job with a real educated grounding in the why’s, how’s and when’s of design.

Proximity

The basic theory of proximity is concerned with the arrangement or categorisation of elements that relate to one another. To understand why, when elements of a similar nature are grouped together the information becomes a visual unit. This provides a viewer with a visual clue as to the concept you are communicating rather than being confronted with a scattering of unrelated graphical elements. When a number of graphic elements are close in proximity a relationship is implied. If elements are logically positioned they connect to form a structure to your design, this is also known as Visual Hierarchy.

Visual Hierarchy

Visual Hierarchy arranges elements to create focal points by positioning their priority within a concept as a whole. To do this you will need to ask yourself what the key elements of your design are, which graphics communicate your concept most strongly? Which graphics support your concept and how could you illustrate them to create a visual structure from most to least important? You may consider displaying your graphics using different sizes and colours to give them visual weight.

Visual weight refers to the relative size and scale of the various elements in a design. This gives meaning to the relationship between objects, or parts, of a whole. Scale is used to create the contrasting relationship of size between elements in a composition.

Study your design concept and take note of what attracts your eye first, where do you look next and how does your eye move around the visual elements of your design? Is a relationship implied in the ordering, grouping and placements of your graphical elements?

Symmetry / Asymmetry

The principle of alignment focuses on the placement of graphical elements and their relationship to each other and as a whole. Following the principle of proximity, alignment allows a visual connection with elements in your design to be formed even if they are not close in proximity. Alignment helps to create unity and balance.

Balance is the concept of visual equilibrium. It is the combination of opposing elements in a composition that results in visual stability. Most successful compositions achieve balance using symmetry or asymmetry.

Symmetry refers to the organisation of elements in which a balanced visual hierarchy is achieved through the alignment of graphics along a horizontal or vertical axis. This means that your design can be reflected precisely over a central axis like a mirrored image.

In contrast, design elements that display an unbalanced visual weighting that are made up of elements differing in size, colour and shape are organized and positioned against one another to create asymmetry.

Repetition

Repetitive elements throughout a design piece can be used to enhance and clarify information. Repetition adds visual interest to your design, and helps to identify elements that belong together. It can be considered a way of adding consistency to your design.

The consistent repetition of graphic elements works to create visual unity. These elements can be as simple as colour, spatial relationships, a shape, a texture or a typeface. Sometimes repetitive elements are not identical in appearance but are in fact so similar that their connection is clear.

Unity

Unity is the underlying principle that sums up all of the principles and elements of design. Unity refers to the combination of all elements successfully working together to achieve a sense of harmony in your design. This can be achieved through the consistent use of graphic elements. Using repetition or patterns is one of the most basic factors in creating a strong sense of unity.

Contrast

An effective use of contrast enables you to add interest to your design by highlighting specific graphic elements. This will result in a more visually striking composition. To achieve this ‘contrast’ is employed as a means of creating a visual hierarchy among different graphic elements. It can be applied to graphic elements, as light, dark, warm, cool, large, small; etc.

Contrast is most effective when it is strong; the focal point of a design is usually a result of contrast where the eyes will naturally be drawn. Here contrast can be used to direct the focus of a composition. When used as a device to emphasize or highlight design elements it is important to remember that an ineffective use of contrast may result in confusion.

Dynamics

Dynamics is the arrangement of visual elements in a composition to suggest the illusion of movement or direction. The effective use of dynamics in a design can add an emotive characteristic to your design making it appear restful and calming or active and energetic.

Dynamics can exist in four basic forms:

Rhythmic: A steady rhythm that creates predictability and order in a composition.

Arrhythmic: Follows an unstructured rhythm to add visual interest to a composition.

Random: Without a structured approach or a defined order that creates spontaneity in a composition.

Directional: The use of graphic elements used in such as way that implies a visual connection to lead the eyes to move in a particular direction.

Creating a dynamic composition involves the use of patterns or the repetition of graphic elements and movement to be effective in its execution. The suggestion of motion by the use of repeated structures creates dynamics.

Emphasis

Emphasis refers to the focal point or centre of interest of a composition. This is an area that is visually dominant and eye-catching that a designer has emphasized through the clever placement of graphic elements.

Used effectively in combination with the principle of visual hierarchy ‘emphasis’ can assist to establish a primary focus and an alternative secondary emphases in another area of the composition.

Emphasis can be achieved by use of repetition to highlight and draw attention to a repetitive element. When used with ‘repetition’ the emphasis is usually a break in the basic structure or visual rhythm of a pattern that causes your eye to pause or focus on a particular element.

Contrast achieves emphasis by accentuating an area to visually separate one element from another. Contrast in color, texture, scale, or shape attracts attention to a definite area, which may consist of strategically positioned graphics to call attention to a single element of your design.

Full credit: Swinburne Multimedia
Images: Wikipedia