Entries Tagged 'ui' ↓
Found on Smashing Magazine authored by Jacob Gube
November 17th, 2008 — ui
By Jacob Gube and Smashing Editorial Team
Minimalism, in the context of design, refers to simple, unadorned designs that embody only the most basic and fundamental needs. In art, it is a movement that has its roots in the post-World War II era, started by highly regarded minimalist artists such as Donald Judd, Carl Andre, and Robert Morris. Minimalism today refers to a certain style (or even a certain attitude or way of life) that transcends different fields, such as architecture, philosophy, law and, of course, Web design.
In this article, we explore the meaning of minimalism in the context of Web design. First, we’ll look at some features of a minimalist Web design in the hope of learning by way of deconstruction. Then, we’ll see a showcase of minimalist designs. Finally, you’ll find some useful resources on the topic of minimalism in Web design.
Showcase of clean and minimalist designs
Though there are different ways to achieve a minimalist Web design, and designers have varying definitions and interpretations of what minimalist Web design truly is, there are certainly some commonalities among what we can consider minimalist designs.
In the review below we’ll consider some common features and attribues of a minimalist Web design. However, let’s first take a look at some truly outstanding examples of excellent minimalist and clean web design.
Jan Reichle
HUGE
Markenpersonal.de
Rodrigo Galindez
BrynnShepherd.com
SpiekermannPartners
MaximNew
Muller
FLOWmarket
Rbg6.se
80/20
Minus.dk
Cubic
Vitor Lourenco
Deep.co.uk
fellswoop
3rings
AIGA New York
Kalle Gustafsson
Clagnut
BetterInteractive.com
Concentric-Studio.com
Clandrei.de
Ab-c.com.au
Forgetfoo
MAYØ
Berit Sømme
Poccuo
SMeltery
kraaft
Hermes.com
Sitening
bora aksu
hillmancurtis
BuuHouse Interactive
Theme
Marek Levák
Mark Wieman
Rogier Bikker
Razvan Stavila
Lovecreative.com
1. Design is focused on the content
In minimalist designs the focus lies not on the visual presentation, but on the content — the information presented in a “naked”, clean and intuitive way. The property of being minimal refers to the structure of the layout; but it is the main task of every simple design to keep its functionality and communicate the information it is supposed to present.
The content is the focal point of the Web page, whether that content is a showcase of photography, Web designs, or writing. The design provides little to no distraction.
Autumn Whitehurst Illustration
In this Web design, the use of a plain white background and de-emphasized text makes your eyes gravitate towards the artwork.
Frieze Magazine
When viewing this design, note where your eyes look first. Probably, you would have looked at either the large image or the “frieze” logo first.
2. Whitespace is the king…
To make it easy for readers to scan and read the content, minimal designs usually need a lot of whitespace to breathe. In some cases whitespace dominates in the design, taking 60-70% of the whole layout space. In such designs whitespace, while remaining passive, strongly bundles user’s attention on very few site elements and thus effectively influences users’ perception of the overall design.
Rule of thumbs: the fewer elements you have and the more whitespace you have, the more attention will each element in your design get.
Cameron.io uses whitespace as the primary element. Notice how little space is used by content and how strongly your attention is focused on the navigation menu and the blog posts. Please also notice that very calm, neutral and subtle colors are used.
3. Typography is the queen
Typography is used to convey messages to the user. Larger, bold text draws the user’s attention to the intended area. Careful use of color, size and style of text is used in the design phase to underscore important elements and make others less prominent.
i love typography
Notice how the large bold, centered logo on the page manages to grab your attention.
Astheria
This design directs the user’s focus straight to the “featured” content (in this case, the most recent article of the author). Notice how your focus bypasses the logo, even though it appears before the “featured” content; completely the opposite of i love typography’s design, which directs you to the logo/website name.
Corporate Risk Watch
4. Color palette consists of solid colors
The in-your-face, flashy, loud color schemes associated with Web 2.0 and vintage/retro design trends are avoided. Usually, designers pick one vibrant color and use it effectively to communicate the most important information presented on the site. Such elements are usually clickable; the number of these elements rarely exceeds 5-7.
Behance
Alltop
5. Plain, solid white/gray or solid dark backgrounds are common
Solid backgrounds are effective especially when the content is vibrant and colorful (such as in design showcases). Plain colors doesn’t fight for users attention; instead, they support the readers and make it easy to actually scan the page when looking for the content. “Minimal” designg almost never have vibrant background images — patterns, textures and vivid colors are used very rarely.
kind company
The thumbnail project images really stand out from the solid white background.
The Consult™
The same concept applies to dark backgrounds.
6. A minimal number of colors
Many minimalist Web designs use only one to three colors, and page elements outside the content are often monochromatic. This again reduces distraction from the Web page content.
Rikcat Industries
This design showcases a monochromatic color palette in the foreground.
Cameron Moll
In this design, page elements such as the logo, navigation bar and sidebar use different hues of gray.
7. Text-based logos instead of illustrative, iconic logos
Again, to uphold the concept of minimalism whereby you strip down the design to the bare, unadorned minimum, the logos of minimalist websites are plain and simple.
The Idiot Behind the Iron Mask
8. Clean right angles and lines in use
Very often clean right angles and lines are used instead of rounded and uneven edges. Rounded graphic elements, the main clichée of Web 2.0, and the uneven edges seen in grunge style are avoided in minimalist Web designs.
Monty Lounge
Builtbybuffalo.com
Antonio Carusone
SIGMA6
9. Minimal ≠ white, gray and black colors
White/black (or dark gray) is the typical color scheme of minimalist Web designs, but others use different colors to achieve the same goals.
Soulellis Studio
Emigre
10. Use of vibrant, colorful images
The use of colorful, bold images can enrich the visual impact of the design by providing a stark contrast to the muted, solid colors of the minimalist design elements.
Coptix
11. Use of grid-based designs
Many minimalist designs use a grid-based layout to reflect the structured, right-angled, rigid nature of minimalism.
Jamie Gregory
Resources
About the Author
Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.
(al)
Found on Ajaxian » Front Page authored by Dion Almaer
November 12th, 2008 — ajax, ui
John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:
He made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time - all of which is done by moving the mouse over the times that you desire. The final click is anywhere - filling in the time that was chosen. It’s hard to explain, you simply have to try it.
One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.
I would be remiss not to mention John’s other post of the day, where he goes into detail on CSS Animations and CSS Animations.
Found on Smashing Magazine authored by Steven Snell
November 11th, 2008 — ui
By Steven Snell
News websites can be intriguing to examine from a design perspective. Regardless of what type of news they cover, they all face the challenge of displaying a huge amount of content on the home page, which creates plenty of layout, usability and navigational challenges for the designer. The lessons that can be learned from examining how news websites address these challenges can be valuable for designers who work with other types of websites, including ones with blog theme designs.
Monetization is also a major factor for news websites, and it’s interesting to see how they integrate advertisements in the design. In some cases, the ads are somewhat intrusive or excessive, but most news websites are able to use ads without turning readers away, in part because of the content that’s available.
For the purposes of this article, the term “newspaper website” refers to any news-related website that has the editorial focus of an online periodical. Many of the websites mentioned here are the online versions of major newspapers, but others are standard news websites and some blur the line between news website and blog.
You may want to take a look at the following related posts:
- Award-Winning Newspaper Designs
This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.
Common Trends of Newspaper Websites
1. Color Schemes
Most news websites use dark text on a white background. Obviously, these websites contain a huge volume of content, and readability is important. A few of the websites mentioned later in this article use darker colors for headers or for the body of the page outside the content.
A large percentage of news websites also use blue and red in addition to a dark gray or black for text. Blue is extremely common for headlines, article titles and links. Red is often used sparingly as an accent color. Some news websites also mix in more colors in other places, such as in the navigation.
The L.A. Times website demonstrates a common color scheme:
2. Header and Sidebar Banners
Of course, all of these websites need to produce revenue, and banner ads in headers are a key source of income. Some websites use banner ads on all pages, and others exclude banners on the home page but display them above the header on other pages.
While blogs commonly use 125 by 125 pixel banners in sidebars, news websites commonly use 300 by 250 banners or tall skyscrapers. Many of the websites mix in some AdSense or other text link ads.
The Telegraph uses a 730 by 90 pixel banner over its header.
3. Top Navigation
Although there are a few notable exceptions to this trend, most news websites put their primary navigation menu just below the header and above the content. The New York Times and MSNBC are two of the exceptions, as they both use the left sidebar for the main navigation.
The Times Online uses a two-level navigation menu.
4. Tabbed Content Areas
Many news websites use tabbed content areas that allow visitors to see popular articles, recent articles, most commented articles, etc. This is sometimes used in the sidebar, and other times in the main content area, such as on Wired. This allows for more control by users over what content and links they see, and it can save space in the design by making more content accessible in a specific area.
5. Grid-Based Layouts
Newspaper websites are commonly built with grid-based designs. The grid is a popular choice not only because of the sharp look it creates but because it’s one of the most effective ways to manage and organize a large amount of content. The New York Times has one of the more well-known grid-based layouts.
Notable Differences Between News Websites and Blogs
The line between a news website and a blog is a fine one, and the two types are difficult to distinguish sometimes. For the purpose of this article, “blog” refers more to a traditional blog than to a commercialized news blog by a team of writers. While there are certainly similarities between blogs and news websites, there are also some key differences.
Social Media Integration
Seeing widgets or voting buttons on blogs is extremely common; in fact, most blogs use them in one form or another. Most news websites, however, use them more subtly, if at all. It’s common to see a “Share” section on articles, such as the one shown below from ABC News, but voting buttons are not used in quite the same way as on blogs, where a standard “Digg This” button may appear at the top of every post. A growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.
A few websites shown in more detail below do make more use of social media than others. The Huffington Post has a section specifically to display stories that are new on Digg, and the website certainly makes plenty of front page appearances.
RSS Feeds
Subscriptions and RSS feeds are a huge part of blogging, and most blogs use large icons or FeedBurner counts to make it easy for visitors to subscribe. Most news websites, however, don’t push RSS feeds on readers like a blog would. Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.
The Guardian promotes a link to its feed in the website’s header, but with much less attention drawn to it than most blog themes.
Comments
Reader comments and discussion are a critical element for most blogs, but they’re not as important to news websites. Many news websites allow readers to leave comments, but they’re usually an afterthought in the design and are rarely promoted the same way as they would be on a blog. For example, many blogs show excerpts of posts on the front page, and almost all will also show a comment count with the excerpt that links to the comment section. This is used on a few news websites, but it’s rare.
ABC News is one of the rare news websites that shows a comment count by the post excerpt on the home page.
A Look at 20 Leading Newspaper Websites
The Onion
Satirical news website The Onion features a grid-based design (it’s been called the funniest grid you ever saw) that makes excellent use of the screen space that’s available. There is a lot going on on the website, which can be both good and bad. The main navigation separates the content into video, radio, sports, election, etc.
The header includes an ad on each side, and the sidebar has some advertising as well, but nothing too intrusive. Some parts of the home page are used essentially as advertisements for features that are part of The Onion, such as The Onion Personals and The Onion Store.
New York Times
The website of the New York Times is another well-known grid. The majority of the website’s navigation is down the left side of the page, which is not as common as top navigation. The website does use a tabbed navigation bar at the top with links to such features as “Today’s paper,” “Video,” and “Most popular,” but all of the content category links, such as World, U.S., Politics, Business, etc., are down the side.
The website’s design includes a nice use of blue and black headers and links, with a touch of red added in a few places, such as the time of an article’s publication. Overall, the New York Times presents one of the better newspaper websites.
Chicago Tribune
Unlike many of the other websites featured here, the Chicago Tribune uses only one small banner in the header of its home page, although individual article pages use a 730 by 90 banner. Aside from the header, the rest of the home page is fairly ad-heavy, including text link ads.
The content on the Chicago Tribune website is spaced out a bit more than, for example, the New York Times’. Again, blue is used for headers and links, with a touch of red.
Washington Post
The Washington Post also uses the common colors of blue, black (or dark gray) and red on a white background. The header includes a small 290 by 45 banner, and the top of the sidebar includes a 300 by 250 banner. The rest of the home page contains only a few other small banner ads.
The layout of content on the home page is focused on providing categorized links to specific content. An image is included for the lead story, but other headlines above the fold do not have thumbnails. At the top right, there is a section for the most-viewed articles.
Los Angeles Times
The L.A. Times website takes a different approach with its header than some other news websites. There is relatively little going on there, with plenty of unused space that could be filled with ads, something that most other news sites are doing. The rest of the home page uses only two 300 by 250 banners and a few text link ads. Individual article pages use a 730 by 90 banner above the header.
The content of the L.A. Times home page is contained in a grid-based layout, with primary navigation on the left. Again, blue, black and red are the colors of choice for text, links and headlines.
Tennessean
The Tennessean isn’t one of the largest newspapers in the U.S., but its website is worth noting. The Tennessean breaks some of the norms of the other websites that have been examined so far, primarily in terms of color. A dark orange is used for headlines and links, instead of a more common choice, such as blue. Additionally, a green background color is used on the sidebar.
There is a 300 by 250 banner in the sidebar and a skyscraper in the left sidebar, with more ads at the very bottom of the page. Individual article pages include a 730 by 90 banner above the header.
Houston Chronicle
The Houston Chronicle packs a large number of headlines onto the home page, including in the top center of the layout. This means there are more links to content above the fold, but each of them stands out less than it would on a news website that uses more thumbnails.
The website has no ads in the header of the home page, but has a few banners in the right sidebar and some text link ads at the bottom of the page. Article pages have a 730 by 90 banner above the header.
USA Today
The USA Today uses more color than many other news websites, particularly in the navigation menu and with links throughout the website. Category links for feature articles, such as sports, markets, education and people, all use different colors, which help them stand out.
Unlike most news websites, the USA Today shows the number of comments on articles right by the headlines on the home page. Only a few smaller banners are located on the home page, aside from a 730 by 90 banner at the very bottom of the page. Individual article pages are much more ad-filled, and at times while navigating through the website you may encounter a full-page ad that you have to skip to get to the content.
Mail Online
British news website Mail Online uses a more colorful design than many other news websites. The headlines and links are a lighter blue than those on the New York Times or Chicago Tribune websites, and they turn red on hover. The right sidebar includes tons of thumbnails from recent posts and colorful headers and roll-overs.
The website includes AdSense ads in the header and various ads throughout the rest of the layout, including some in the middle column. The grid layout keeps the content organized and makes use of virtually the whole page, which is incredibly long.
Telegraph
Another leading UK news website, the Telegraph, uses a nice, clean grid-based layout. Above the header is a 730 by 90 banner, and the only other advertising on the home page is a 300 by 250 banner and a skyscraper, both in the right sidebar.
The home page design makes extensive use of thumbnails to go along with article headlines and brief descriptions. Blue and red are used for headlines and links. The main navigation is located at the top of the page.
Guardian
The Guardian uses a clean but colorful design. The main navigation at the top of the page consists of various colored links to different sections of news. The home page uses little advertising, but individual article pages include a 730 by 90 banner above the header of the page, and 300 by 250 ad at the top of the sidebar.
Headers on the Guardian website are a common blue, but colorful borders are used to add some visual appeal. Thumbnails are used in several spots on the home page, but most stories have only a headline and brief description or just a headline.
Times Online
The Times Online is one of the few news websites to use a bright color in its logo/branding area, but it does accomplish the goal of distinguishing the website. Above the header is a 730 by 90 banner.
The home page uses a two-level navigation menu above the content and a fairly typical blue color for headlines. Several article excerpts on the home page include thumbnails, but there are no large images for featured articles as there are on many news websites.
MSNBC
MSNBC stands out among other news websites due to its dark yet colorful header, a look that’s been imitated by many Photoshop users. The header includes no advertisements, and in fact there is only one ad visible above the fold. Text link ads are used in a few places throughout the home page. Individual article pages do include a 730 by 90 banner above the header at the very top of the page.
Overall MSNBC is a very well-designed website, with an attractive color scheme and a layout that’s well-structured but not overly cluttered. Like the New York Times, MSNBC uses the left sidebar for its primary navigation.
ABC News
ABC News features a dark header that helps distinguish the website from other news leaders. There is relatively little advertising on the home page. The right sidebar contains a 300 by 250 banner and the only other ads are at the very bottom of the page.
At the top right of the page there are three current videos, plus a link to more video content. While other news websites include video, most don’t place videos as high on the page as ABC News does.
Ars Technica
Tech news website Ars Technica has a vastly different design than mainstream general news websites, which should be expected. Unlike the image-heavy general news websites, Ars Technica does not use thumbnails on its home page. Additionally, the article pages have very few images in comparison to general news websites.
The website uses tabbed navigation at the top of the page to take visitors to different categories of news, such as Business, IT, Apple, Hardware, etc. The header includes a 730 by 90 banner, and the top of the right sidebar includes a 300 by 250 banner ad. Further down the sidebar is a skyscraper banner.
CNET News
Tech news website CNET News uses a fairly basic design with a dark header, a featured content area, and a long list of headlines with brief excerpts. Blue and red are used for headlines and links.
The header includes a small text link ad on the right side of the screen and a few 300 by 250 ads in the sidebar. No additional ads are used on individual articles.
TechRadar
UK technology news website TechRadar includes a few items that currently aren’t very common on other news websites. Just above the content of the page, there is a “TechRadar Update” section that scrolls through links to the most recent content. Additionally, there is a featured content area that rotates through the six leading stories. Below the featured content area is a grid of the latest news headlines with brief excerpts.
The website header includes a 730 x 90 banner, and the sidebar contains some other banners and text link ads. The navigation on TechRadar is a bit different as it uses tabs for news, reviews, blogs, and forums.
Wired
The design for Wired is rather unique. Most notably, thumbnails, headlines and excerpts of featured content reside above the main navigation menu. Thumbnails are used below for the most recent article in each of seven different categories.
The header includes no banners, just an internal advertisement for WiredBiz. The sidebar contains a few ads as well as additional monetization through a job board widget that links to recent job postings on the website’s job board.
The Huffington Post
The layout and design of individual pages on The Huffington Post is quite different than that of the home page. On individual pages you see a small logo/branding area at the top left, with a very long banner on the right that takes up most of the width of the page. Advertisements throughout the rest of the page are fairly minimal.
On the home page, most of the area above the fold is used for a headline and image from a featured article. The rest of the home page includes a lot of images and headlines, as well as post excerpts from a variety of writers in the left sidebar.
Sporting News
The Sporting News has one of the most outdated designs. The header is used primarily for displaying scores, but with less space efficiency than other major sports websites. Above the header is a 730 by 90 banner.
Much of the real estate of the sidebar is used for directing visitors to other sections of the website, such as Sporting News Radio, the Blog Network and community blogs.
Related posts
You may want to take a look at the following related posts:
- Award-Winning Newspaper Designs
This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.
About the Author:
Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)
Found on Smashing Magazine authored by Torley Linden
October 21st, 2008 — ui
The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design.
The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.
Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.
OkayDave
OkayDave.com
I’ve noticed Dave Werner’s portfolio mentioned in passing on Smashing Magazine before and thought it was well worth a closer look, even if it dates to 2006. One basic way to provide focus and emphasis is to desaturate everything except the target element. On OkayDave, all is in black and white until you mouse over an element.
Things get startlingly more vibrant when you actually click something; a burst of colored particles brighten the screen before transitioning to the selected media. It’s a tad on the over-compressed side but only lasts a second. What a great way to combine very artificial and earthly organics (see Dave’s handwriting and scratchy notes, in particular). And, rewarding visitors for clicking will encourage them to spend more time discovering your content.
Vimeoland
Vimeoland
Video-sharing website Vimeo is known for a number of things, foremost among them being an astoundingly consistent user interface, an example being its very user-friendly roadmap. Vimeoland is a playful form of data visualization: little figurines teleport in, representing unique website users and their status. For example, hearts appear above their heads when they like a video. From time to time, an airplane will fly by.
YouTube may be the biggest video website, but its user interface falls short of Vimeo’s elegance. Vimeo’s video quality, which can go up to true high definition, is superior, too. Something worth thinking about the next time you want to make a film easily accessible.
Grooveshark
Grooveshark.com
Looking for music? Grooveshark may have what you want. In a turbulent time when popular mainstays like Pandora and Muxtape have run into legal tangles because of archaic copyright laws, Grooveshark claims to be in the clear, compensating artists for their work.
Alas, this also means that unlike other services, such as imeem, you can’t (at least yet) embed music on your blog. But I was surprised by how many rare tracks that I searched were already available (they apparently reward people for uploading). Two problems I noticed: (1) some broken help files, and (2) the circular progress indicator will keep going infinitely if it can’t play a song. Hopefully they’ll be smarter about that in the future.
But overall the player is very slick: queued songs visually lock together like Legos, elements slide horizontally to show and hide controls and hierarchies as needed, and the overall blue and gray theme — like a shark! — is sleek.
If you want to download songs, your registration needs to be approved. It’s not an automated process yet, and I’m still waiting for my approval.
SpaceCollective
SpaceCollective.org
Into trans-humanism, fringe science, and the far reaches of space? Space Collective bills itself as “a cross-media information and entertainment channel for post-ideological, non-partisan, forward-thinking terrestrials”. And its website is a joy to visit: in the new posts section, fresh content is arranged in a curved-corner matrix, with green tabs to indicate specific projects.
It seems pretty far out at first, and you may not buy some of the beliefs, but even a glimpse of this imagery will uplift your perspective on humanity’s creativity in the cosmos.
Funnel Design Group
FunnelDesignGroup.com
Do you remember the bizarre devices in the first Myst game that combined familiar elements, and by doing so, came off as alien? The “dentist-chair planetarium” hybrid was a striking example of that. When you visit Funnel’s website, you’ll sense a similar atmosphere: gears are churning away, and a little automaton with a lightbulb for a head is there to help you view its work. It’s almost Steampunk-ish.
I appreciate the detail they’ve gone into: selecting a different section makes the art in the O-shaped viewfinder spring a little, and the title up top closes and opens, as if it were a piece of paper in a rotating carousel. (The old-time Glenn Miller music and whirring sounds are fitting, too.)
Viewzi
Viewzi.com
Finally, in the visual search arena, Viewzi’s results aggregate other websites (like Google and Amazon) and present them in the most sensible context it can detect. For example, searching for “Royksopp” (whose “Remind Me” video has been popular on Smashing Magazine) brings up the album view first. Clicking on it brings up a list of the group’s CD covers.
If that doesn’t suit you, multiple other views — like the traditional “Simple Text” and the pseudo-3D “Photo Tag Cloud” — allow you to explore the same data in different ways. They have other views for specialized searches, so try them all out for appropriate media.
GoDesignate
GoDesignate.com
Here’s another fine example of a goodie-hook. The Web developers at Buffalo were inspired to create this after a “‘discussion about whose turn it was to make the tea.” It provides a clean twist on the old “cards in the hat” process and takes seconds to use. The reference to Buffalo at the bottom is a compact pixelfont, a subtle reassurance that they’re not intrusive marketers.
I couldn’t help but ask if this was actually used by the company, and Dan Griffiths, Managing Director, graciously replied:
“Glad you like it! We do use it for all sorts of things still. You should see some of the things people use it for. :)”
“Should I leave my husband?” was one of the strangest ones I have noticed!
Some more from a list of highlights Dan shared with me:
“Why does my boss call me lady?”
“Will Chris ever regain his masculinity?”
“Should I make a new site design based on Buffalo’s design?”
When hooks like this are in tune with your company’s overall image and sense of humor they build brand familiarity through repeated usage, not to mention subsequent smiles.
Hypnoteis
Hypnoteis.nl
Teis Albers is fond of splashy color. His style is more about grungy splashes of paint and pseudo-decoupage, as demonstrated in his gritty depictions of font flourishes set against a backdrop of various animal and human body parts. But similar to Pagano’s website, clicking on any thumbnail will dynamically zoom and enlarge that picture without refreshing the page. While Pagano’s zooms are Flash-based, Albers uses the magic of Highslide JavaScript.
Serge Seidlitz
Serge Seidlitz
But sometimes you want to make everything stand out, and that’s what this guy is here for. Using a mess-on-the-bedroom-floor approach similar to Werner’s, Seidlitz has nothing fancy in the way of mouse-overs. But his motley assemblage of mayhem does invite clicking: he even urges you to “click on things.”
Needless to say, if you keep updating your portfolio with new stuff, maintaining a website like this could become a time-consuming jumble. But if you already have a wealth of work to show off, the discover-my-creative-chaos approach might work for you.
Six Pixels of Separation
Six Pixels of Separation is Mitch Joel’s showcase of social media insights. It looks pretty usual and boring at the first glance, but a closer look reveals a close attention to detail. Consider how sparse graphical elements are used for maximum effect. Embedded podcasts fit perfectly into the theme; it’s relatively easy to navigate, despite the large amount of links; and leaving a comment rewards you with a surprising (but non-annoying) pop-up; try it!
There are too many social media blogs out there that buy into the same generic “Web 2.0″ conventions. Six Pixels bucks that banality with a layout that doesn’t get in the way of “the meat” and is all the better for it.
Fontpark 2.0
Fontpark 2.0
When I see Web typography guides, they’re often in the Roman characters that I’m well familiar with, so it’s refreshing to look beyond this style and bask in what else is happening around the world.
Japan’s Morisawa is a venerable typesetting company, and in addition to a brief but helpful primer on Japanese Kanji Culture, they have created Fontpark, a unique way of looking at characters with hundreds of years of history. Sit back and watch pieces be animated into animals and faces, or be an active participant and submit your work to the gallery.
Like FontStruct, this is a novel way of promoting your paid products with a quality freebie, another kind of goodie-hook. It may not be as funny as CSS Homer, but finding faces in the swashes and strokes is enlightening nonetheless.
Picnik
Picnik.com
Staying on the food theme, here is a Picnik of a very special sort. Sure, you rely on Photoshop for your more heavy-handed tasks, and rising Web-based image editors such as a.viary boast complex features. But when you want to retouch photos in a jiffy, Picnik is nothing short of a usability dream!
From the smooth registration form (observe how password and email confirmation fields are hidden until you need them, reducing the perception of complexity) to the actual “in-the-basket” look and feel of this Flash application, Picnik is a joy to use inside and out. It simply puts other Web-based image editors to shame — or at least inspires them to do better.
Bestiario
Bestiario.org
Fancy more data visualization? This isn’t as playful as Vimeoland but is substantial in its own right. At first, the lack of anti-aliasing may hurt your eyes, but scroll over (or down) the projects and watch the collection unfold. It’s almost like a very graphical elevator.
It’s fun to move your cursor to the right, whereupon the whole gallery will tilt, as if to look at you askance and ask “Now what?” Well, there’s a pop-out collection of tags on the far right, containing another way to navigate the set. And if you love mathematical visuals…
Phatterism
Phatterism.com
This website is one of the neatest ways I’ve seen (even if somewhat impractical) to share a blog (and other media). Upon visiting, Luis Santi Jr. will greet you with ample white space, fidgeting and occasionally gazing to his left, imploring you to check out his stuff. Like Funnel Design, he’s got his own head-bopping music, which reminds me of the Austin Powers movies.
Click “TXT” and Luis goes to work for you, pulling out an index card of his journal entries. His hand even moves a bit unsteadily, adding to the realistic feel. If you click on a title, you’ll see him scribbling a note, then hold it up for you. The shakes are gone now and the handwriting is obviously a font, but what impressed me is how he presents his comments; they, too, are shown as separate note cards.
What a fun way to show yourself off! For more of Santi’s work, see his main portfolio.
Energi Design
Clickenergi.com
From the get-go, Steve Holmes’ compact Flash website doesn’t have very much, but what’s on it is amazing. He has done video tutorials for well-known stock content provider ArtBeats, and you owe it to yourself to watch his demo reel. The earlier, more up-tempo music he used when I first saw this a while ago was better, but the visuals are captivating nonetheless. If you enjoy type-in-motion videos like Justice’s “DVNO,” this will definitely appeal to you.
Mirror’s Edge
MirrorsEdge.com
It seems like every big game title coming out nowadays needs a Flash website. They’re usually very glossy and don’t have a lot of content, but the techniques involved are well worth experiencing. Mirror’s Edge, which is due for release in November 2008, has already been acclaimed for its aesthetics. Promoting a game with authoritarian cyberpunk gloom but set in a very clean white-blue city, the website complements it almost perfectly.
The waving of the main character’s hair and the slow rotation of the city are nice little touches. Games with such a striking and individual look are rare (some of my favorites include the Wipeout series and Ico) and beg to be copied. Of course, the irony is that copycatting leads to angry cries that the spawns are too derivative.
Observe also that the buttons and headers are slightly askew but not horrendously so, lending a certain sense of dynamic imbalance that reflects the fleet-footed parkour seen in the game.
Like.com
Like.com
Visual search continues to rise. A couple of decades ago, the mere idea of searching through thousands of catalogued images seemed improbable. Today, we can enjoy it everyday on websites like Flickr. Websites such as Riya’s Like.com go a few steps further, and they claim to be “slowly innovating” by improving facial and object recognition. Like a handbag but think the material’s a bit too shiny? Narrow not just by color but by style, and feel like you have more investment in (and control over) the overall search process.
Someday, this will be commonplace too, but until then, it’s flirty fun to drill through look-alike Halloween costumes to pick out one that’s just right for you.
Navigaya
Navigaya.com
Think visual search is too quiet? Navigaya is another value-added search aggregator with a twist: by default, as you search, a halftone-mottled music video (from YouTube) plays in the background. Most of the selections are electronic dance, and, while not immediately obvious, you can reveal the transport controls by moving your cursor to the top of the screen.
Highlights to look out for: the blurred in-and-out (not just faded) effect for hover tips and certain menus, and dotted icons for arrows and other buttons. It’s a tight, dark design that gives the appearance of staying in the background even when it’s in the foreground.
Overall, Navigaya is too claustrophobic at times for my taste compared to Viewzi, because it mainly shows its search engine results in windows within windows. But if you like your search activities to be an information onslaught, give this a spin.
What common threads can you identify running through different design styles? The surfaces may look different, but the underlying spirits and code may have more in common than you think. Take a moment to gaze, absorb, and mentally deconstruct; it will increase your overall understanding of why great Web design works.
About the author
Torley Wong loves to “amplify your awesome” as a screencast pioneer, virtual worlds expert, and aesthetic enthusiast. His video tutorials, which you can watch on Torley Lives, have been viewed over three million times. (al)
Found on KillerStartups.com - all authored by (author unknown)
September 10th, 2008 — ui
What it does
If you’re trying to make your site stand out from the masses, you should definitely take a look at Gradcolor.com. With this easy to use site, you’ll be able to generate gradient color images that are sure to breathe new life into your site’s already existing design. The process is done in two steps. Just choose the size of the gradient you want to create, the two colors you want to incorporate into it, and generate it. You’ll then be given the picture and the HTML code for you to embed it on your site. The strength of this site has to be its simplicity. There’s no way you won’t have this figured out in less than a couple of minutes. Another great thing about the site is the fact that you can generate as many gradients as you want, there’s no limit. Overall, this should be of interest to anyone looking to create a cool background for their website or blog.
In their own words
“Gradcolor is a website that creates in 10 seconds gradients colors pictures for website use by example.”
Why it might be a killer
This is so easy to use, you’ll be creating gradient color pictures in no time.
Some questions
Do people even use these for their sites any more? Is this enough to keep people coming back for more?
Link:
http://www.gradcolor.comOur Review:
http://www.killerstartups.com/Video-Music-Photo/gradcolor-com-gradient-color-generator 
Found on Mashable! authored by Kristen Nicole
July 25th, 2008 — ui
Squarespace, the Web publishing platform that offers a variety of tools from design templates to hosting and data reporting, is launching Squarespace V5 today, with a handful of new customization options and partnerships with Oracle and Peer1 to offer extended features to its customers.
As a publishing platform, Squarespace is also looking to change the very concepts surrounding website publishing, hoping to allow users to create sites with a process that’s more aligned with the human thought process, which, according to Squarespace, is semi-structured publishing. That allows a great deal of room for customization, merging many of the existing models already in use by other website publishing tools such as WYSIWYG editors and template designs with the structured back-end CMS for building a fully functional website.
Squarespace V5 expands on the custom options made available through the company’s fluid approach to website creation, with a live editing interface, pluggable features that work for all aspects of Squarespace’s site building, including search and data collection. There are more than 60 new style templates to choose from, all of which are fully customizable by users.
A couple of new partnerships grant back-end grid architecture powered by Oracle Coherence and hosted by Peer1 Network for improved support for a wider variety of sites, regardless of size. To see how Squarespace can be implemented, you can check out the video here, or stick around for Kevin Rose’s announcement in the coming hours, as his diggnation show on Revision3 will be taking advantage of Squarespace’s site creation capabilities.
The aim with Squarespace’s tools are to offer a platform for simplified design options that are available to all user types, despite technical knowledge. As platforms such as Squarespace and Secondbrain create a more accessible process for site creation, the need for easy, all-inclusive services are being met with continued development coming from the platform space.
Everything from advertising and analytics to redistribution and application creation will eventually become part of this one-stop shop concept that these services are approaching, targeting those website publishers that don’t have a strong technical background but would still like highly customizable and easily implemented options for their online presence.
---
Related Articles at Mashable! - The Social Networking Blog:
40+ Free Blog Hosts
Found on Ajax Rain authored by (author unknown)
July 11th, 2008 — ui
Scrolls a collection of phrases of your choice across the screen, with various sizes for perspective.
July 7th, 2008 — ui
The Paris-based Twitter search engine and meme tracker Twitscoop rolled out a live tag cloud for Twitter today. While a tag cloud was always a major part of Twitscoop's design, having it update in real-time makes it a lot more interesting to follow. Twitscoop is also a very capable Twitter search engine that can hold its own against Summize.
Tag Cloud
The idea of using a tag cloud to track memes on Twitter is obviously not new, but having the tag cloud update dynamically makes for a whole new experience. While testing Twitscoop this morning, for example, the news about Carl Icahn's newest letter to Yahoo's shareholders was breaking on Twitter and made it onto Twitscoop's tag cloud within less than a minute.
Sometimes, the items on the tag cloud seem to appear more because of serendipity than because they are real memes. If five people write the 'dumb' or 'w00t' within 10 minutes of each other, for example, it will show up in the cloud, even though the tweets are not related at all.
If a tag cloud seems especially noteworthy, you can easily send a tweet with a permalink to the cloud. While this might only be useful in a very limited number of occasions, it is a nice feature to have nevertheless.
As of now, Twitscoop does not feature an API, nor does it have a widget for its live tag cloud that you could put on your blog or your desktop.
Search
Twitscoop is also a very capable Twitter search engine. While it is pretty basic, in that it doesn't feature live updates like Summize, or organize conversations like Quotably, it does show a nice graph of how often a search term has been used on Twitter in the last 6 to 72 hours (see screenshot). Just like on Summize, you can reply to a tweet from the search page and there is a link to the original tweet as well.
Twitscoop picks up new tweets very fast - most appear in under one minute.
Verdict
The ideal Twitter search engine would combine the live updates and API from Summize, the live tag cloud from Twitscoop, and the conversation tracking from Quotably. As of now, we still have to wait for this, but Twitscoop's live updates are definitely worth taking a closer look at and its search engine is a good alternative to Summize.
Found on ReadWriteWeb authored by Marshall Kirkpatrick
July 3rd, 2008 — ui
RSS is magic and the things we do online are often beautiful - so why are all the interfaces for displaying the feeds of our activities so ugly? Enter Swurl, a visually stunning system for displaying a timeline of your activities on various sites around the web.
Developer Ryan Sit specializes in leveraging the visual to create new interfaces for data, his ListPic application lets users browse Craigslist by images. Just like Listpic creates a whole new experience for Craigslist, Sit hopes that Swurl will make interacting with lifestream data a much more visually enjoyable experience.
How it Works
The most important part of Swurl is the timeline view, where all the messages, bookmarks, album covers and photos you've saved in various services are organized in a calendar view. It's a great way to look back at days gone by - we've found already that it can't help but put your experiences into a different perspective.
In addition to the timeline view, Swurl also publishes your activities in a blog-type format. Each person's blog is highly customizable. If you've hesitated to send the URL to your crazy-chaotic FriendFeed page to your grandma, maybe you should send her to a Swurl page instead.
Inside of each item you'll find all kinds of visual treats, like a nice slideshow viewer, song lyrics displayed below the Flash audio player for each song in your time line and elegant captions on your photos. There are lots of nice little touches here and we hope it will only continue to improve.
One of the areas the app could really use improvement is in viewing your friends' activities. You probably don't want to use it for that, unless it's very casual. Swurl discovers your friends on various services but displays their activities in a boring list that's spotty and hours behind.
The big picture here for us is that RSS feeds and lifestream data in particular can really look great when displayed nicely and mashedup with various sources of data. By grouping your activities into a calendar view, Swurl really facilitates a change in perspective. We think you'll enjoy this app and we are excited to see where it goes in the future.
Found on KillerStartups.com - all authored by (author unknown)
July 1st, 2008 — ui
What it does
BGPatterns is a fairly small, but quite handy design tool for creating patterns, textures and designs. When you first enter the site, you’ll notice four main tabs—these are your main creating tools: colors, canvas, image and rotate. Under the image section is a selection of patterns and photos which can be tiled and scaled to your liking. From there, you can change location and opacity. Next, you can redo the back ground color using a sliding palette tool. There are five different canvasses to choose from and each can be resized; you can also fine tune the texture opacity. Finally, there’s the rotate tab which is for rotating your image, of course. Your designs can be previewed in the image window on the right hand side. Each design can be downloaded and saved to your very own ‘my patterns’ folder. BgPatterns is free for anyone to use. Check out the pattern gallery and vote for your favorites.
In their own words
“Just small usefull tool to create patterns.
Experiment with pictures, colors, textures and transparency to get best result.”
Why it might be a killer
BgPattern is a very simple, yet extremely practical tool. No real skills are needed to use it. In fact, you can have a brand new pattern for your website or blog in a matter of minutes; it’s also free to use.
Some questions
How many new designs are added each week? What’s the business model?
Updates
»
original news
