DeepDive

Shareland for My Students

教育部設計戰國策網站

http://www.idc.ezdesign.tw/welcome.asp

http://www.designboom.com/competitions.html

http://www.electroluxdesignlab.com/index.php/the-competition/

http://www.liteonaward.com/ 光寶創新獎

http://designawards.bestmotion.com/download/chi_download_qry.asp 手提包創新設計比賽

http://www.tidc-student.com.tw/about.aspx 台灣國際創意設計大賽

http://sdo.seoul.go.kr/  Seoul Design Olympiad 2009

http://www.boco.com.tw/CompetitionAbroad.aspx?Bid=B20090313000006 OPUS DESIGN AWARD (JAPAN) 

www.jamesdysonaward.org  James Dyson Award

 

98年工業設計系,大三最後一個PROJECT,請上設計戰國策網站選擇一項比賽。

同學還可以提供其他設計比賽的資訊!!

 

楊博顯

April 9, 2009 - 11:56 AM Comment (1)

13 Characteristics of Outstanding Blog Design

 


Most web designers and getting more and more requests from clients to design custom blog themes.

While designing a blog theme isn’t entirely different from designing any other type of website, there are some unique challenges that blog theme designers face.

There are plenty of sources available for designers who are seeking inspiration from high quality blog design, but it’s also important to understand specifically what will influence and determine the success of a blog theme design. In this article we’ll examine 13 characteristics that separate great blog themes from the rest.

1. Readability

Since blogging revolves around content, readability is a critical priority. Even great content with poor readability will struggle to attract and retain readers. While a blog theme’s design is important, it shouldn’t detract from the content itself. When designing a blog theme, areas of the design like the header, navigation and sidebar often get a lot of the attention, and styling the content within the post itself is frequently overlooked.

There are a number of factors that influence readability, all of which should be considered when designing a blog theme:

Padding - The padding or margin that separates the content of a post from the edges of the content area can help the reader to visually separate the content and focus on it without distraction.

Freelance Switch uses plenty of padding to keep the content easy to read.

Short Paragraphs - Readers will have an easier time with short paragraphs. Long paragraphs on a screen can be difficult and intimidating to readers. Short paragraphs often draw readers in because they can be reader faster.

Lists - Use unordered (bulleted) lists or ordered lists when appropriate. Instead of using paragraph format exclusively, lists help to break up the monotony of the text and allow for easier scanning. The points will also stand out more as they grab readers attention.

Bold Text - Having a screen full of text that is all the same weight and size makes it more difficult for readers to quickly see what’s important. Many blog visitors are not going to read posts word-for-word, so your options are to make it easier for them to scan, or watch them leave.

Line Spacing - Especially for blogs that publisher longer, more detailed posts, it’s important to have sufficient space between the lines of text. Not spacing the lines properly causes the text to be crammed.

Sub Headers - Blog posts can be broken up by sub headers (usually h3 or h4 tags). When designing and styling a theme, these sub headers should be given plenty of attention. When done correctly they will help with readability, scanning, and they’ll help the writer to make points clearly.

Mirificam Press styles its sub headers to make a visual impact.

2. Useful Sidebars

Sidebars are an important part of blog design because they play a large role in navigation for visitors and because they provide the opportunity to add some creativity to the design. Additionally, they give the theme designer and the blogger a chance to determine what content or pages on the blog get exposure to all of its visitors. A good sidebar will feature an attractive design, be easy to use and navigate, feature the appropriate content, and encourage a high number of pageviews.

Some common elements in blog sidebars include:

  • Popular posts
  • Recent posts
  • Blogroll/friends lists
  • Advertisements
  • Category links
  • Date-based archives
  • Link to RSS feed
  • Recent comments
  • Promotion of products/services

To take sidebars a step further, some blog designers create multiple sidebars or use conditional tags to include dynamic content based on the page/post the visitor is viewing. This helps to make the sidebars more relevant and useful because the information and links contained in the sidebar are more likely to be of interest to the visitors.

A growing number of blogs are revamping their sidebars to encourage more reader interaction. Some bloggers are posting links to user-submitted community news items. Others are including Flickr photo streams (Flickr groups are now pretty common for design blogs) or possibly streaming information from Last.fm. Additional social media integration is another possibility, from sites such as TwitterDelicious or Digg.

The PSDTUTS sidebar includes images from its own Flickr group as well as user-submitted community news items.

3. Unique

With millions of blogs and thousands of different blog themes out there, it’s pretty easy for visitors to have a hard time distinguishing which blogs they have been to before and which ones they have not. Great blog designs will stand out from all of the free themes and similar designs in one way or another. The designer can take a number of different approaches to accomplish this goal, but the important part is that the design will not only be memorable, but it should also fit with the message and purpose of the blog.

Possible Approaches:

Artistic/Creative

One way to make your design stand out is to design something extremely creative that will easily give your blog it’s own distinct mark.

Web Designer Wall

GoMediaZine

Typography-Based

Astheria

I Love Typography

Colorful

Macalicious

Veerle’s Blog

Interesting Headers

Mostly Lisa

Octwelve

Dark

Evan Eckard

New Concept

Of course, these are only a few different styles and options for designers. There are countless ways that you can go about creating a unique theme, however, the blog should have some type of distinct look that helps to brand the site and keep it from blending in with all the other blogs.

4. Comment Design

The comment area is often a last priority for theme designers, but a well-designed comment area can give the blog a totally different feel for readers, especially those who comment themselves. Designers have the options of including avatars for commenters, styling author comments to stand out from others, alternating comments with different styles, using speech bubbles, etc.

Avatars are becoming increasingly common on blogs, in part because of the ease of doing so with WordPress and Gravatars. Avatars help to give the comment area a more personal touch and to give each commenter more of a personality of their own.

Pro Blog Design makes excellent use of avatars and color in the comment area.

Darren Hoyt uses smaller avatars and different style for author comments.

5. Integration of Ads

Most blogs today (at least those that are professional and not personal) are using advertisements of some sort to monetize the site. This could include AdSense, affiliate ads, or direct banner ads. While ads are a necessity in most cases to keep the blog going, they can also have an adverse effect on the design and the user experience if they are not implemented properly into the design.

Some bloggers and designers choose to place ads in locations that will draw a lot of attention, such as within the context of the blog posts. While this may help to produce more ad revenue, it will decrease the overall look of the blog and will put off some readers. This is a decision that will need to be made by the blog owner, but from a designer’s perspective it’s best to keep the ads in places that are specifically designated for ads.

Location of the ads is important, but styling the ads, or the area around the ads, is also an option for the designer. The ads may feel as though the are more a part of the theme and less intrusive if they are treated as part of the design.

CSS-Tricks uses a border on banners in the sidebar that changes to a red color on hover, and the header banner is placed on a grungy background that also has a hover effect.

6. Effective, Usable Navigation

Navigation is one of the most significant factors in determining the user’s experience on the site. Nothing is more frustrating than not being able to find what you’re looking for, and visitors are bound to leave if this happens to them. On the other hand, effective navigation can lead to more pageviews and a more resourceful blog that takes advantage of the content that is available.

Developing and maintaining effective navigation is a challenge for blog theme designers, because content will be continually added to the blog, making it easier for posts to get buried in the archives. In some ways, maintaining the navigation is up to the blogger, in terms of using internal links within posts and updating older posts with new links. However, there are some steps the designer can take to improve navigation.

First, there should be a primary navigation menu that takes visitors to any major page on the site (such as an About page or a Contact page), and secondary navigation menus are often used as well.

Second, the sidebar should be used to nudge readers towards the most important content on the blog. Popular posts are a common way of doing this.

Third, the sidebar should also include some standard blog navigational elements that visitors will expect to find, such as category links or a link to an archive page.

Fourth, the bottom of the post area can be used to include links to related posts, or this can be done manually by the blogger when desired on specific posts.

The header of Noupe includes category links as the primary navigation, which makes it easy for visitors to find content that they want, plus it makes the navigation feel less like a boring category list.

7. Images in Posts

Part of a blogger’s effort to get their posts read and noticed is using pictures within blog posts. Of course, the use of images is outside the control of the blog theme designer, but the designer can have an impact on this aspect by including styles for post images. Images can be much more effective and attractive when styled with CSS to give them a nicer touch.

Designers may want to provide a few different classes for images that can be used, or for many bloggers it may be easier to style all images alike. Use of a border and padding are common, sometimes in conjunction with background colors.

Fuel Your Creativity uses about 10 pixels of padding and a gray border around images.

Spyre Mag uses a light gray background and a slightly darker border.

8. Footer Design

When designing a blog theme, or any website for that matter, the footer is one area of the design that typically gets very little attention. Most blogs include a copyright, a link to the homepage, and maybe a few other links to pages of the site (or to the theme designer and/or to the blogging platform). While many visitors won’t scroll all the way down to even see the footer, those that do will be able to benefit from a well designed footer.

What should a blog footer include? There are no absolutes, but in general, some blogs are using them essentially as an extension of the sidebar. By this I mean that many of the same elements that you would find in the average sidebar are also showing up in some blog footers. Social media integration, such as recent entries to Twitter are popular. Additionally, some blogs link to popular posts, recent comments and even blogs of friends from the footer.

In addition to just using the footer to be a home for more information and links, designers are also using this area to get creative with the theme. The footer is much like the header in that it provides a large canvas for a motivated designer to experiment.

Blog.SpoonGraphics uses a footer that points to popular content with a stylish design.

Productive Dreams includes links to recent posts and comments, as well as Twitter andVi.sualize.us integration.

9. Color Scheme

Color is, of course, one of the most significant factors in any kind of design. Finding the right color scheme for a blog theme is something that doesn’t usually happen instantly, but getting the colors right is crucial. The colors will sometimes make the look, and other times they can destroy the design. Fortunately, there plenty of tools and resources for finding color schemes.

The color scheme of a blog will play a considerable role in the branding of the blog, and thus it is very important for the long-term success of the blog. Some blogs use a bright and vibrant color scheme, while others use fewer colors, or a monochromatic scheme. Like most things when it comes to design, there is no right or wrong, just different choices for different situations.

Web Design Ledger features an attractive color scheme with several different shades of neutral colors accented by orange and blue.

Mr. Diggles uses a very basic color scheme that includes very little color, but it works very well.

10. Icons

Icons can be used to improve the look of a site and to improve usability at the same time. The whole point of icons is to present a message to visitors without even using any text. For example, an icon of a home is commonly understood be to a link to the homepage without saying so, and a speech bubble is often used to represent blog comments.

When used properly icons provide somewhat of a subtle improvement to the design. Icons are rarely the highlight of any blog theme, but all blogs could make use of well-designed icons. Blog theme designers can either design their own icons, or use any number of free icon sets that are available.

NETTUTS, and the other sites in the tuts family, use the free icons from Function.

11. High Content

Because blogs are so dependent on content, the blog theme design should allow for the content to start above the fold. Oversized headers allow for more creativity in design, but for blogs it typically works best to focus on getting the content in view quickly. This is my personal preference and there are some well-designed blogs that push content down, but as a general rule it’s best to keep the content high in the layout.

The theme of Devlounge uses a small header area that features the start of the content very high on the page.

12. Subscription Areas

RSS and email subscribers are the lifeblood of blogs. For this reason it is obviously important for blogs to be able to convert visitors into subscribers. Many blog visitors will be accustomed to the standard blog convention of including links to RSS feeds and email subscription options in the sidebar. Usually these areas are located at the top of sidebars, but sometimes they’re a bit further down.

The benefit to staying with the norm here is that it’s easier for people to find the links, and you don’t want to make it difficult for people to subscribe. Most blogs also include RSS icons along with the link. There are countless RSS icons available for download in all kinds of variations.

Darren Rowse of ProbBogger includes RSS and email subscription options at the top of the right sidebar, a fairly standard location.

You the Designer uses the right side of the header for subscription links and an icon.

13. Social Media Integration

More and more blogs are starting to include buttons, badges or links to encourage readers to vote for their content on social media sites. When it comes to these items, overkill can harm the look of the blog. Too many buttons can cause the theme to look cluttered and unorganized. The best method is to use a design the implements social media elements, such as voting buttons, subtly without overpowering anything else in the design.

Six Revisions includes a small Digg voting button, and text links to Stumble or bookmark at the top of each post. The smaller Digg button is more friendly for the design than the bigger “Digg This” button that many blogs use. The StumbleUpon and Delicious links are placed below the title where they have very minimal interference. Additionally, the small StumbleUpon and Delicious icons help the links to be found by readers.

January 23, 2009 - 2:39 PM No Comments

7 Great Podcasts for Web Designers


Whether you’re a seasoned professional or a student just diving in to the web design field, audio podcasts are a great way to learn about new techniques and listen to discussions with big name pros without spending a fortune on conference fees.

They’re perfect for busy multi-taskers. You can listen to them during your commute or while performing menial tasks at your computer.

Below is a list of 7 great podcasts for web designers:

1. UIE Brain Sparks

Put out by User Interface Engineering CEO Jared Spool, this professional podcast focuses onusability and interaction design. Jared is a usability expert and frequent conference speaker who has worked with big clients like Microsoft, Apple and IBM. He invites big names like Molly HolzschlagLuke Wroblewski and Cameron Moll to share their expertise.

2. Boagworld

Boagworld Screenshot

Created by Paul Boag and Marcus Lillington of the UK Web design firm Headscape, Boagworld is the longest running (and perhaps most listened-to) web design podcastaround. It has thrived because it is both entertaining and educational. Paul and Marcus banter back and forth while covering a wide range of topics of interest to both developers and designers. They know what they’re talking about and bring in great guests like Dan Rubin and Andy Budd. Along with the podcasts on the site you’ll find an active forum and follow-up blog posts that include summaries, links and interview transcripts.

3. The Rissington Podcast

The Rissington Podcast

Jon Hicks (famous for designing the Firefox and Thunderbird logos, among other things) andJohn Oxton produce this informal and humorous show. They answer listeners’ questionsabout web design, conduct interviews and pick a typeface of the week. The hosts are smart, smarmy and fun to listen to.

4. TypeRadio

While not specific to web design, this podcast is a great source of inspiration for designers of all types. Hosts by Donald Beekman and Liza Enebeis chat up designers at events around the world. Each designer brings something different to the table. Some are more interesting than others, but all give you valuable insight into their process and personality.

5. Rookie Designer

Rookie Designer is a weekly podcast by graphic designer Adam Hay. It is aimed at beginner designers but the content is useful to just about everyone in the field. Adam is friendly and humble, sharing brutally honest stories of “rookie mistakes”. He also shares tips, tricks and lessons learned… like how to get a freelance client to pay and how to survive a critique. He also covers specifics like Photoshop, SEO and Email design.

6. Web Design TV (video)

This one isn’t strictly audio, but it’s published by .net magazine and is well worth sitting down and taking time to watch. Older podcasts are hosted by Paul Boag of the aforementioned Boagword. Newer videocasts run 15-30 minutes and feature practical in-depth tutorials on specific web design projects and applications like Photoshop, Flash and Dreamweaver. .net is a great magazine filled with informative content and the videocast is a great way to get some for free.

7. You Suck At Photoshop

The first reason to watch this is that it’s hilarious. The second reason to watch is that you’ll actually learn a thing or two about Photoshop. Created by ad guys Matt Bledsoe and Troy Hitch, the podcasts are narrated by a socially-inept cubicle warrior named Donnie Hoyle. His bitterly sarcastic commentary is not only funny, it’s helpful. Each tutorial shows you a number of photo-editing tricks, which Donnie demonstrates by doing things like removing a wedding band from his cheating wife’s finger. It’s a YouTube phenomenon. If you haven’t seen it yet it’s time to get caught up.

The next time you’re bored at your computer, why not download a podcast or two and learn something new?

Written exclusively for WDD by Mindy Wagner.

January 23, 2009 - 2:37 PM No Comments

The Evolution of Apple Design Between 1977-2008

 


With the 25th anniversary of the first Macintosh computer coming up on January 24th, 2009, we’re taking a look back in time at the evolution of Apple products.

Most have been notable leaps forward, while some were famous flops. Whether or not their inventions were accepted by the marketplace, Apple has consistently put out products that raise the bar for the computer and telecommunications industry.

The list compiled for this article is by no means a complete compilation of all Apple products. We chose to highlight those products where the design changes are best appreciated.

All-In-One Computers

Apple has sold “all-in-one” computers that have built-in monitors from its very early days. Although some models were classified as All-In-One, they had separate monitors packaged in the same box.

Apple II - 1977

1977 saw the invention of both the Apple II and the famous rainbow Apple logo. Steve Jobs added the colours to the logo to reflect the Apple II’s superior colour output. Colour graphics set the Apple II apart from its rivals on the market. Image: Wikipedia

Apple III - 1980

This next iteration of the Apple computer for business was created primarily to compete with business computing companies like IBM. Image: Wikipedia

Apple IIe - 1983

The Apple IIe keyboard was built in to the computer and did away with the numeric keypad. Image: Wikipedia

Lisa/Macintosh XL - 1983

While Lisa won the legendary race between itself and the Macintosh by being the first desktop computer to market with an intuitive GUI, it flopped with the public due to sticker shock at its $10,000 price tag and a lack of software titles. Image: Wikipedia


Apple IIc - 1984

The Apple IIc represented Apple’s first attempt at both a portable computer and “out-of-the-box” functionality. The only problem with classifying the IIc as a “portable” computer is the fact that it lacked a portable power supply. Image: Wikipedia


Macintosh - 1984

The Macintosh, for most of us, was the computer that started it all. In the first demonstration of the product at MacWorld, Steve Jobs pulled the very first Macintosh out of the bag and demonstrated product features that most of us take for granted now. Image: Wikipedia

Apple IIGS - 1986

The first 50,000 of these came with Steve Wozniak’s signature silkscreened on the front. Image: Wikipedia


Macintosh Plus - 1986

The Plus version of the Macintosh originally featured the same beige colour as the original Macintosh, but in 1987 was changed to the warm gray Platinum colour that would characterize Apple computers for years to come. Image: Wikipedia


Macintosh SE - 1987

Space for an internal hard disk and advanced SCSI support were some of the selling features of the SE. Image: Wikipedia


Apple IIc Plus - 1988

With this model, Apple did away with the 5.25″ floppy in the Apple II line and switched over completely to the 3.5″ floppy. Image: Wikipedia

Macintosh SE/30 - 1989

The SE/30 sported the capacity for expandable RAM and a 1.44mb floppy disk drive as standard. Image: Wikipedia


Macintosh Classic - 1990

The Classic was an adaptation of Terry Oyama’s and Jerry Oyama’s Macintosh 128K industrial design. Image: Wikipedia


Macintosh Classic II - 1991

Two cases actually came out for the Classic II. The pictured one has a speaker cutout on the left side for better sound. Image: Wikipedia

Macintosh Color Classic - 1993

This was the first colour compact Macintosh computer. Image: Wikipedia


Apple Macintosh LC 500 - 1993

The Apple MacIntosh LC series were sold as Apple’s upper low end computers for the mid 1990’s. Image: Wikipedia.

Macintosh Performa 5200 - 1995

This was one of Apple’s lower moments, featuring severely compromised hardware design. Image: Wikipedia

Twentieth Anniversary Macintosh (TAM) - 1997

12,000 of these were produced. Apple broke the moulds and didn’t make any more in order to make the product seem more “exclusive”, a strategy that did not help the TAM’s sales numbers. Image: Wikipedia

PowerMac G3 All-In-One - 1998

These were sold to the educational market only. Image: Wikipedia

iMac G3 Tray-Loading, Bondi Blue - 1998

In doing away with the tower and keeping the computing power, Apple completely revolutionized the desktop computer industry. The iMac G3’s were available in a bouquet of various colours. Johnathan Ive, the designer who was later the mastermind of the Cube, designed the iMac G3. Image: Wikipedia

iMac G3 Slot-Loading Indigo - 1999

The above model set the standard for the rest of the iMac G3’s with a slot-loading CD ROM rather than a tray-loading model. Image: Wikipedia

iMac “Flavours” - 1998-2003

Different colours were eventually added to the original Bondi Blue. Image: Wikipedia

eMac - 2002

The eMac was made available as a cheaper option to the educational market than the iMac. Image: Trimir

iMac G4 - 2002

The iMac G4 was produced from 2000-2004 and represents the first iteration of Apple’s desire to “slim down” the components necessary for an out of the box personal computer experience. It was nicknamed the iLamp because of its swiveling monitor. Image: Marc Burr


iMac G5 - 2005

The G5 lacked the swivel functionality of the G4 but introduced the “behind-the-screen”component design principle which characterized future iMac designs. Image: Wikipedia


iMac (Intel Based) - Aluminum - 2007

The current iMac models pack all of the components necessary to the operation of a computer behind the monitor in a perfect realization of “slim design”. Image: Wikipedia

Desktop Computers

Macintosh II - 1987

This was the first “modular” design computer that Apple put out. All of the rest preceding it had been “all-in-one” models. Image: Wikipedia


Macintosh IIx - 1988

This was simply an update to the Macintosh II. One of its code names was “Spock”. Image: Wikipedia

Macintosh IIfx - 1990

This computer was introduced as the “fastest Mac” and was dubbed “Wicked Fast” by the then Product Manager, Frank Casanova. Image: Wikipedia


Quadra 700 - 1991

Introduced with the Quadra 900 as the first Apple systems to feature Ethernet networking. Image: Wikipedia


Quadra 800 - 1993

The case on this was smaller and not as accessible as others, earning it the “worst case of all time” title at Low End Mac. Image: Wikipedia


Quadra 630 - 1994

This last entry in the Quadra line featured an IDE drive, a slower yet cheaper replacement for the standard SCSI drives that earlier Quadras contained. This was the last in the Quadra line. Image: Wikipedia

Power Macintosh G3 - 1997

The PowerMac G3 was tested and proven to be the fastest desktop computer of its time by Byte Magazine. Image: Wikipedia


PowerMac G3 Blue and White - 1999

This shared the hardware with its predecessor but little else. The case was redesigned to bring it in line with the new iMac. Image: Apple.com

Power Mac G4 - 1999

This line was sold by Apple between 1994 and 2006. While the hardware varied between models, they all adhered to the same basic design principles. Image: Wikipedia

Power Mac G5 - 2003

At the time of its launch the Power Mac G5 was touted as the fastest computer ever built. Image: Wikipedia


Mac Pro - 2006

This machine integrated Intel’s 5400 chipset with Xeon microprocessors for a lightning fast processing speed. Image: Apple.com


Mini Desktops

PowerMac G4 Cube - 2000

This 8″ cube garnered a lot of kudos in the short time that it was in production. The designer of the Cube, Jonathan Ive, won several international awards for its design. Image by Apple.com



Mac Mini - 2005

This diminutive computer only measured 6.5″ by 2″. It weighed in at 2.5 pounds. Image: Apple.com

Notebooks

Macintosh Portable - 1989

The Macintosh Portable represented Apple’s first computer with a portable power supply and an active matrix LCD screen which sported a clearer picture than many desktop monitors of the time. Image: Wikipedia


PowerBook 100 - 1991

The PowerBook 100 was a result of a collaboration between Sony and Apple - Sony miniaturized the parts for Apple for the 100. The 140 and the 170 are the first PowerBooks completely designed by Apple. Mobile PC magazine named the PowerBook 100 as its “#1 gadget of all time” in a 2005 article. Image: Wikipedia

PowerBook Duo - 1992

This precursor to the MacBook Air was a subnotebook that interfaced with larger storage media either through a docking port or through cables. Image: Wikipedia


PowerBook 180c - 1993

First PowerBook to display 640×480 resolution and 256 colours. Image: Wikipedia


PowerBook 540c - 1994

The trackpad replaced the trackball with this model. Image: Wikipedia

PowerBook 1400 - 1996

This entry-level notebook came in a number of different configurations. Image: Wikipedia

eMate 300 - 1997

Personal digital assistant designed for classroom use and based on the Newton engine. Image: Wikipedia

PowerBook G3 - 1997

The Wallstreet model, pictured above, marked the last use of the rainbow-coloured Apple logo. The PowerBook G3 was a built-to-order laptop which allowed users to customize what they wanted on the machine. Image: Wikipedia


iBook - 1999

The first generation of the iBook featured a clamshell design and wireless networking. Image: eLanso

iBook G3 Dual USB - 2001

Many design advances were incorporated into this complete redesign, including the L-Shaped hinge for the screen and a slim-line design. Image: Wikipedia

PowerBook G4 - 2001

The titanium-skinned PowerBook G4 was the precursor to the MacBook Pro. Image: Wikipedia

iBook G4 - 2004

A slot loading drive and a lack of translucent design characterized this release of the iBook. Image: Apple.com

PowerBook G4 - Aluminum - 2003

Aluminum was used for the first time in this incarnation of the PowerBook. Johnathan Ive, the same award-winning product designer responsible for the Cube, designed this PowerBook. Image: Wikipedia

MacBook - 2006

2006 saw the introduction of the MacBook with now-standard features like the magnetic latch, the glossy display and the sunken keyboard. Image: Wikipedia

MacBook Pro - 2006

The aluminum standard by which all others are measured. In the case of the current MacBrook Pro, each case is constructed out of a single block of aluminum. Image: Wikipedia


MacBook Air - 2008

The MacBook Air was launched with a famous commercial that involved it being packaged up and shipped in an envelope. Image: Apple.com


MacBook - 2008

The latest version of the MacBook brings the aluminum case previously reserved for the Pro line into the regular MacBook. Image: Wikipedia


MacBook Pro - 2008

The most recent Pro design is available in a 15″ or 17″ model. Images via Apple.com


Keyboards

Macintosh Keyboard - 1984

This keyboard was standard issue with the Macintosh Plus and was the first keyboard to see the “Command” key. Image: Wikipedia


Apple Extended Keyboard - 1990

This keyboard represents the golden age of Apple keyboards for many fans. The large spaces between keys and the general feel of the board made it very popular. Image: Wikipedia


USB Keyboard - 1998

This board was packaged with iMacs beginning in 1998 and lasting until 2000. Image: Wikipedia


Apple Pro Keyboard/Apple Keyboard - 2000

This keyboard had the “Command” letters removed from the command key entirely. When it was originally introduced it was available in a clear case with black keys. After its name was officially changed to the “Apple Keyboard”, it was released only in white. Image by 2aday.com


Current Apple Keyboard - 2007

The current Apple keyboard features an aluminum enclosure and is the first since the Apple IIe keyboard to remove the Apple logo from the Command key. Image: Apple.com



Mice

Macintosh Mouse - 1984

While the Macintosh is responsible for making the computer mouse part of our everyday reality, it was actually an adaptation of the mouse designed for the Lisa and was not the first mouse used by Apple. Image: Wikipedia

Apple IIc Mouse - 1984

This mouse removed the contrasting colours featured on the Macintosh mouse and also offered support for gaming devices such as joysticks. Image: Wikipedia


Apple Desktop Mouse - 1986

Image: Wikipedia

ADB Mouse II - 1993

This update was included with all Macs between 1993 and 1998. Image: Wikipedia


iMac USB Mouse - 1998

This mouse was shipped with all iMacs for two years after its introduction. Image: Russell Heimlich.

Mighty Mouse Wireless - 2005

It was announced and sold for the first time on August 2, 2005. Before the Mighty Mouse, Apple had sold only one-button mice with its computers, beginning with the Apple Lisa 22 years earlier. Image: Apple.com

Displays

Apple IIc Flat Panel Display - 1984

Only 10,000 of these were ever produced, owing to the fact that you needed a strong light source to even see what was on the screen. Image: Wikipedia


AppleColor RGB - 1986

The first 640×480 stand-alone monitor made by Apple. Image: Wikipedia


Apple AudioVision 14 - 1993

This monitor featured a 14″ Triniton display. Image: Wikipedia


Apple Studio Display - 1998

This was released to be paired with the Power Macintoshes of the time and featured an active matrix LCD screen. Image by everymac.com


Apple Studio Display - Blueberry - 1999

This was released to complement the PowerMac G3 which was released in “Blueberry” at the time. Image by everymac.com




Apple Studio Display CRT Blueberry - 1999

This monitor kept the “Blue” theme going with an attractive design. Image by everymac.com


Apple Studio Display CRT - 2000

This monitor was the last CRT monitor that Apple shipped. Image by everymac.com


Apple Cinema Display 22″ - 2000

The 22″ active matrix LCD display on this model was tailored to work with the newly released PowerMac G4’s. Image: Wikipedia


Apple Cinema Display 20″ - 2003

Featured a 20″ active matrix LCD display. Image by Amazon.com

Apple Cinema Displays - 2004- Current

Current Apple Cinema Displays come in three different sizes; 20″, 23″ and 30″. Image by Apple.com


LED Cinema Display, 24″ - 2008

This display is touted as Mac’s “greenest” ever. Image by Apple.com

iPod

While other MP3 players were on the market before 2001, none could match the ease of use of the iPod. The iPod line consists of four different products; the iPod Shuffle, the iPod Nano, the Ipod Classic, and the iPod Touch.

The Newton - 1993

While the Newton was a massive flop at the time of its release, it laid the groundwork for Apple’s massively popular iPhone and iPod. Two ex-Apple Newton developers founded the company that developed the iPod’s OS, Pixo.

Ipod/Ipod Classic

Generation One - 2001

The first generation of the iPod was debuted in 2001 to rave reviews and a very eager market. Image: Wikipedia




Generation Two - 2002

The second generation of the iPod featured a touch-sensitive wheel rather than a mechanical wheel. Image: Wikipedia



Generation Three - 2003

The third generation saw the introduction of a thinner iPod. Instead of being simply touch-sensitive as the second generation was, the wheel on this iPod was completely governed by touch. Image: Wikipedia

Generation 4 - 2004

The fourth generation saw the Touch Wheel replaced with the Click Wheel from the iPod Mini. A special Harry Potter edition and U2 edition were released in this generation. Image: BatteriesForIpod

Fifth Generation - 2005

2005 brought this iteration of the iPod, unofficially dubbed iPod Video. Image: Les Numeriques


Sixth Generation - 2007

The sixth generation brought an official rename to “iPod Classic” in order to distinguish the iPod from the others in the line. Image: Wikipedia

iPod Shuffle - 2005

This first generation was introduced at MacWorld with the tag line “Life is Random”. Image: Apple.com

iPod Shuffle - 2006

The smaller iPod Shuffle is the smallest device made by Apple. It relies on flash memory rather than a hard disk like the other iPods. Image: Apple.com

iPod Shuffle in Colour - 2008

The Ipod Shuffle was updated in 2008 with four new colours. Image by apple.com

iPod Nano

First Generation - 2005

Image: eShop Macsales

Second Generation - 2006

Image: Les Numeriques

Third Generation - 2007

Image: Apple.com

Fourth Generation - 2008

Image: Apple.com


iPod Touch - 2007

The iPod Touch was launched to great media and consumer acclaim in March of 2007. The touch screen allows the user interaction with various games and applications. Steve Jobs has referred to the iPod Touch as the “training wheels” for the iPhone. Image: Apple.com

iPhone - 2007

The iPhone is the cellular phone of choice of nearly every tech aficionado, even winning over BlackBerry fanboys with its touch screen and wide range of cheap and free applications available from the iTunes AppStore. Image: Apple.com

Over the course of its lifetime as a company, Apple has been responsible for most of the groundbreaking design features that we have come to appreciate on any laptop, computer, or cellphone. Their consistent record as groundbreakers in the design field alone is enough to garner them a cult following; their technological advances simply cement their followers to whatever amazing product they will release next.

Written exclusively for WDD by Angela West.


January 23, 2009 - 2:19 PM No Comments

是地圖也是手電筒,為迷路旅人指引方向

Light(Credit: Owen Song)

你在樹林裡迷失了且天色越來越暗,若這時有一項產品可以將找路時最需要的兩樣東西—手電筒與地圖–結合在一起變成一個方便攜帶的小東西,那不是很棒嗎?

任職於波士頓的設計師Owen Song就設計出了這樣的產品,名為Light,這是一張地圖,同時也是一個手電筒。 

項概念產品結合了兩張紙,一張紙印有地圖,另一張是封面但背後有正負兩極的發電裝置,在兩張紙中間包了薄型電池與LED燈,當你把地圖捲起來,使正負兩極相接時,LED燈就會發光,瞧!地圖就變成了手電筒。(當然囉,我們眼尖的讀者發現了,地圖上的LED燈只能照路,無法照亮地圖。真是挑剔、挑剔…)

我們會持續關注這項設計是否能從概念變成真的產品。還有請不要問我那些在戶外迷路、天快要變黑、卻沒有這類產品在手邊的慘痛經驗,那不是什麼光榮的回憶。

December 16, 2008 - 7:41 PM No Comments

HP發表可彎曲螢幕原形產品

星期一惠普與亞利桑那州立大學軟性顯示器研究中心(FDC)一同展示了一款號稱是世界上第一個低價、不怕摔、可彎曲電子顯示螢幕的原型產品。

這類顯示器看起來就像一張紙,幾乎全部由塑膠製成。惠普表示,這類顯示器較傳統螢幕省電且更方便攜帶,所使用的製造原料在數量上也比傳統螢幕少上90%。

新聞稿上寫著:這類顯示器若進入量產階段,將可以使製造筆電、智慧型手機及其他電子產品的成本大幅降低,因為顯示器是這些產品的零件中成本較高的一種。但這種技術是否真能降低這些產品的成本,我們認為仍有待觀察。

這類顯示器是透過一種稱為SAIL(自動校正平板壓印技術)的製程做成的。SAIL可透過翻捲製程將薄膜電晶體織入一種可彎曲的塑膠材質內。惠普指出,這種技術使製程得以連續不會間斷,和傳統螢幕一片片製作、不連續的製程相比,成本較低。

為了打造這樣的顯示器,FDC生產了半導體材料,以及針對這個聚二甲酸乙二醇酯(Polyethylene Naphthalate, PEN)機板設計的金屬材料。使用這個SAIL製程,HP能夠處理這種新的基板,然後整合E Ink的Vizplex影像薄膜,就能在塑膠上生產顯示器了。

好吧,我必須承認,當我在打這些文字時還沒有什麼完整的概念。

根據iSuppli分析師Vinita Jakhanwal,得說法,這種可撓式顯示器的市場規模將從2007年的8千萬美元成長到2013年的28億美元。

究竟是什麼樣的應用產品會用到這樣的技術呢?包括手機、PDA、顯示器與電視機嗎?我目前能預想到的是報紙、雜誌能夠透過這樣的方式來傳遞,或者是藉由這樣的技術,在產品外盒上放這種顯示器,來顯示盒內產品的影片?

沒錯,這裡有兩個很棒的點子,是從電影關鍵報告(Minority Repor)來的,但是感覺上電影回到未來(Back to the Future 2)裡面的應用會更容易實現。各位還有什麼好點子來應用這項技術嗎?

December 16, 2008 - 7:33 PM No Comments

介面 狀態 模式

最近對這三個名詞非常感興趣
“介面” “狀態” “模式”

介面:
介=兩者之間
有兩者以上才能有介面
這兩者可能是
人與人
人與物
物與物

狀態:
指 某件事情 某人 某物
在某個時間點上
呈現出來的樣子

模式:
模=既定的形狀 範本
模式指的應該是一個原則
一種法則
或是一種定理

某人事物按照某個既定的法則 運作 改變
就是模式
而這裡指的模式是人類訂出來的

設計是一種介面
所有的設計都只是在設計一種介面 人看得懂的介面
人可以經由某個模式
去改變某個狀態 使其成為新的狀態

人—>(介面)-﹁
__________ |
__________ \/

狀態A——>(模式)——>狀態B

設計有點像函數
把狀態A放進去 將變成狀態B

目前我只想到這裡
很想聽聽大家的想法

December 4, 2008 - 7:22 PM Comment (1)

發光的百葉窗! 全靠LED晶片的神奇效果

發光的百葉窗! 全靠LED晶片的神奇效果

Solar Vertical Lamp (Images courtesy Yanko Design)

「開個燈吧!」「疑?亮的怎麼是百葉窗!」這是由Yoon-Hui Kim和Eun-Kyung Kim根據太陽能光照燈的概念,所設計出的「百葉窗燈」。這些百葉窗都嵌入白光LED晶片,能藉由產生的白熱,呈現像桌燈、立燈、吊燈一樣的形狀,而特殊的照明效果,也為家中添上一分前衛的科技感。 

甚至,這樣神奇的燈照,不用花上任何一毛電費喔!白天經由百葉窗外側的太陽能電池儲存電力,夜間就能在百葉窗上長出一個燈來,顯然看起來挺酷炫的,不過還是要注意一下,理論上,它只「照」顧的到百葉窗附近,如果離的太遠,可能就有點尷尬了!

November 27, 2008 - 6:20 PM No Comments

Light Scape Exhibition

Light Scape
11/15-12/04
13:00~23:00 each day

當建築物愈蓋愈高,城市空間愈來愈擁擠,人們視覺所見的建築線條逐漸變得模糊,日光、月光、星光和建築間的關係也日趨薄弱,更令人惋惜的是,以前我們還會常常抬起頭來看夜空星星,但現在卻連天際線的樣貌都想不起來了。

光影確能讓建築物更有生命力,燈光和建築是不可分離的,若建築本身較規矩方正,透過燈光可以柔化它,讓它變得生動活潑,有了燈光襯托輝映,建築物也顯現深度而更加富麗宏偉。

透過LIGHT.SCAPE展覽而邀請英國知名藝術團體United Visual Artists 的多媒體聲光數位互動裝置作品‘Volume’來台展出。以光柱為地景的裝置,瞬間也化身為一沒有實牆的建築空間,不僅是城市與空間美學的重新佈局,更讓 人在其中漫步嬉遊,從遠處也看見了人與空間地景的重新對話與互動。

By no means light and architecture could be set apart. Similar to an amplifier in a high-fidelity system, a building is just mere that of itself without light. If a structure is sturdy, with light, it becomes stately and grand. If a building has a simple curve, with light, it becomes alive. While, city’s skylines is noticeable during daytime. It is during the night, when lit up, that makes it memorable.

However, as building becomes taller, as city becomes denser, the affinity between light and structure is less. And more importantly, the audience that once looked up to see aerial ballad no longer do so. Hence, Volume, an visual experience by world renowned creative troupe United Visual Artists (UVA), will no only re-emphasis the association between light and urban setting. But like its earthly counterpart, to allow people to interact with something they have only seen from afar.

November 26, 2008 - 12:22 AM Comment (1)

2nd project (3rd grade)


Project name: “The shape of light”

Using LEDs as light source, defining “the shape of light”.  Consider the light fixture, light and shadow, space, environement….. 

 

Explore the story of light

And God say, Let there be light: AND THERE WAS LIGHT. And God saw the light, that it was good: and God divided the light from the darkness. And God called the light DAY, and the darkness he called NIGHT. And the evening and morning  were the first day.

Understanding the LEDs (light emmitting diodes)

Experience how light creating shadow and dominating the ambiance. 

 

week1: 11/25~12/1 Concept exploration 1 (concept review and preseatation==>imagesboard, sketches)

week2: 12/2~12/8 Concept exploration 2 (concept review and preseatation==>imagesboard, sketches)

week3: 12/9~12/15 Concept exploration 3 (concept review and preseatation==>imagesboard, sketches)

week4: 12/16~10/21 Concept presentation (concept preseatation==>final rendering, control drawing, color and material assignment)

week5: 12/23~12/29 Design modification and Details design 1 ( design review==> rendering and 2D control drawing)

week6: 12/30~01/05 Design modification and Details design 2 (control drawing for mockup, product graphic, presentaion board)

week7: 01/06~01/12 Mocp preparation(Dummy review)

week8: 01/13~01/20 Presentation preparation(Final presentaion)

 

FORM, LIGHT and AMBIANCE

 

Yours

 

Po-Hsien Yang 楊博顯

for-mail_簽名檔

 2F., No. 330, Sec. 1, Dihua Street, Taipei 10348, Taiwan

 T  (886) 2-2557-1799

 F  (886) 2-2557-1733

 M  (886) 921-060-416

 http://www.avecplus.net/blog

November 23, 2008 - 10:23 PM Comment (1)

« Older Entries