A website has a personality — it is a reflection of the person or organization behind it. When people visit your website, you want it to stand out from the crowd, to be memorable. You want people to come back and use your website or get in touch with you.

So, to distinguish itself from the unwashed masses, your website not only needs remarkable content, but also has to be innovative yet functional. Ask yourself, what would make life easier for your user? Simple search functionality may be needed, or perhaps the navigation menu could use some sprucing up. Nevertheless, the personality of the website needs to be consistent throughout. The following websites will whet your appetite for extreme creativity. Browse through and explore them for yourself.

Creative Navigation Designs

Toybox
Navigation should always be there when needed, and graciously disappear when the user wants to focus on a particular task. For example, in designing the checkout for an online store, the navigation should always be accessible but also give enough prominence to criticial features of the website, such as the checkout form. The navigation for Toybox does just that.

It feels like you’re peeking behind the page or the lid of a toybox to see what’s inside. The navigation is easy to use, and the swivel effect directs the user’s attention to the navigation bar when they’re using it. Hiding the navigation also allows for a simple, clean design that makes viewing the projects quite pleasant, because the projects are not competing for attention.

Information you might want to know, such as what Toybox does and where it is located, can still be found in a discreet navigation bar at the top. The hover effect is also fun, as the other images get pushed back and fade as the user focuses on one project.

Olivier Bossel
The portfolio of Olivier Bossel, an interactive designer, is interesting. The navigation elements create an effect of exploding pixels as you hover over them. The effect is quite dynamic and contrasts with the otherwise clean design. It works nicely as a visual element because it encourages the user to continue through the website. The consistent visual voice and tone complement the brand’s identity. Just by viewing the website, the user experiences the designer’s work.

Tsto
Tsto, a design agency, has a simple yet unorthodox approach to design; its navigation is different from what we’d expect. A navigation element is fixed in each corner of the screen, framing the work being showcased. The visual identity is created with heavy hot-pink letters, along with the descriptive information. The hierarchy is clear, however, with the “Work” tab in the top-left corner, and the “Contact” and “About” tabs at the bottom of the page. In keeping with the style, the title of the work being showcased is in the same heavy pink font.

When clicking through the work, which presents like a slideshow, a preview of the next project is shown when you hover over the arrow. The images are large and take up most of the page. As the user clicks through and views the large images, they get a clear idea of Tsto’s identity and work.

Derek Boateng
Derek Boateng’s portfolio welcomes the user with a polite “Hi” upon loading, and an arrow directs you to scroll down. The general design is understated; it doesn’t shout at you, but rather gently guides you through the work. As you scroll down from the loading page, the header and navigation shrink back, allowing more space for the portfolio. This is a good example of navigation that is always accessible yet gives center stage to the main content.

Second Story
Ah, good ol’ horizontal scrolling! Second Story’s website works like a magazine app on a tablet. It is innovative in that it doesn’t have the feel of a typical Web page and it scrolls horizontally. The content is laid out in columns, and each section scrolls vertically. The navigation is anchored to the left, which helps to establish the rhythm. As you view this portfolio, the navigation minimizes to a bar on the left and reappears when hovered over. You can choose to view the portfolio in thumbnail view or as a slideshow.

Mostly Serious
As its name suggests, Mostly Serious has an element of playfulness to it. You are greeted by navigation that is designed as balloons floating around. The friendly animation creates movement on the otherwise static website and sets the tone for the brand. While you can come back to the home page at any stage, a subtle navigation bar appears at the bottom of the page. The website is functional, with a splash of the studio’s fun personality. Actually, it reminds me of funky Flash animations from the good old days (EYE4U, anyone?), but because the website is supposed to be a little playful, it works well in this context.

Minimal Monkey
Scrolling through articles in this bold simple design reminds me of browsing a bookshelf. The hover effect singles out an article for the user to focus on. This website also has a clever design for the “About” and “Contact” sections: When you click on a tab, the page drops down to reveal the information. It’s a simple way to provide information without redirecting to another page.

However, viewing old articles is not so easy because there is no search functionality. If the user is looking for a particular article, they would have to scroll through to find it. Search functionality would be useful without changing the overall design too much.

LayerVault
It’s amazing what effect a simple, clean layout with playful colors and fun animations can have. LayerVault balances white space and subtle animation to intrigue and engage the user. Animation can be used to illustrate a point, to guide the user through a website, or even to illustrate how-tos. Animation doesn’t always do the trick, but LayerVault applies it sparingly, and only when the user is browsing a particular section of the page. The result? A well laid out page with engaging and attractive illustrations.

Escape Flight
Escape Flight is cleverly designed, and the logo animation as a page is loading is novel and funky. The navigation is fixed at the top and looks like a departures and arrivals board, as though you’re at the airport already! The drop-down menus look like a travel checklist, which works well with the theme. When you click on a location and scroll down, all of the important information remains fixed at the top, making access to the content much easier and more comfortable for the intrepid traveler.

Making use of stunning photography, Escape Flight maximizes its space. It’s exactly what you want from a travel website. It gives you a little taste of the adventure that awaits, beautifully showcasing the amazing destinations. When you hover over a destination, you find exactly what you need to know: ticket prices, weather conditions, flight time and travel length. What more could you ask for?

aSCIIaRENa
Calling all ASCII enthusiasts! aSCIIaRENa reeks of the ’90s. People can register and post news on the wall, submit their own text art, and get featured on the wall of fame.

The Sartorialst
Photographs are the focus on this website, and the design supports that with no muss or fuss. More importantly, the website uses the hover effect quite elegantly; captions slide in from the side and slide out again, following the cursor.

SilkTricky
The people behind SilkTricky are out to break the status quo, and their website doesn’t let down. Mousing over the images creates an interesting effect. The movement on the page creates a sense of activity that intrigues the user. On this single-page website, the user doesn’t have to click from page to page to navigate. Just click “View,” and the chosen article folds out as the other articles shift off. This would be a nice way to showcase a photography portfolio, too.

SumAll
SumAll’s layout is clean, with no unnecessary extras that would distract the user. Hovering reveals more information in a simple understated manner, and the transitions are an extension of the hover effect. When you click on a button, succinct information and options appear below. I quite like that you aren’t redirected to another page when you click an option; rather, the information tidily appears below the button. A drawback: the navigation isn’t responsive, looking broken and inaccessible on smaller views.

Potluck
Sorry for being so enthusiastic about this one, but Potluck exhibits a fantastic user experience. The generous white space helps the user access what they need, when they need it. The forms and buttons have a fresh and open aesthetic that makes them easy to spot and use. Both the text and beautiful graphics are laid out in a way that guides the user through the website. The buttons and icons work well together, and all buttons and input areas feel consistent and engaging. This is a great example of how a bit of well-chosen typography and a subtle, clean user interface go a long way to engaging and delighting users.

Lowdi
The single-page responsive layout works quite beautifully. Lowdi uses lines and shapes to set off sections of the page, a great way to break away from the conventional boxy layout. I love how the “Order now” button is incorporated in the design with line and shape. These elements adjust to your screen effectively, and the design maintains a flow throughout, which makes for easy viewing.

Barcamp Omaha
Barcamp Omaha is an online invitation to an event. The single-page tool effectively guides the user through the narrative with a consistent visual theme. All of the essential what, where and when information is at the top of the page, but the design urges the user to scroll down to see what else they can find. I really like the clever integration of the Twitter and Facebook icons.

As the user scrolls down, more information is provided systematically, and the layout remains tidy and succinct, with bold headings. The categories of conference talks are illustrated with simple animation to keep the user engaged. Once you’ve scrolled down the building and reached the ground, contact information is waiting for you, easily accessible.

Combadi
This website feels tranquil as soon as it loads, a result of the careful design. While it does not have a lot of white space, it does not feel claustrophobic. Tabs expand on hover, providing more information and enhancing usability. Along with the other elements, this effect conveys an airy, calm feeling. The design mirrors the vocabulary of the website, and the various elements work together to achieve a coherent and consistent identity.

Waller Creek Conservancy: The Final Four
A hover effect should not only provide more information, but also contribute to the visual appeal of the website. This website does that quite beautifully by expanding the image as you hover over it. The image also changes from greyscale to full color, with a caption. The effect is quite captivating.

Lift
When laying out products or items on a website, it’s easy to end up with a static catalogue-style view. Lift’s simple hover effect rotates the books to display a 3-D version. This seemingly minor and simple visual effect really makes the website more interesting. The user feels that they are involved and can interact with the website. You can achieve this 3-D effect, too.

Snowbird
Snowbird is a dynamic website that involves the user. The current weather is displayed and, when you hover over it, folds out to reveal the week’s forecast. The hover effect on the “Full Report” button, as it transforms rounded corners into square corners, is subtle yet effective. The teasers are triangular and look like a snowbird’s wing; when hovered over, they unfold into a square for a larger view.

Etch
The square sections on this website are tightly laid out but don’t feel cramped. The navigation in the top-left corner takes up little space because icons are used for the various categories. You can toggle the navigation to show and hide in the large view by clicking the menu icon. The responsive design makes the website easily accessible on any device, without losing functionality or brand appeal.

Would You Like To See More Showcases On Smashing Magazine?

How’s that for inspiration? With so many fresh ideas to implement, we mustn’t forget that the personality of a website still needs to engage the user. An effective website should be creative yet user-friendly.

Leave a comment and let us know if this article was helpful and whether you’d like to see more showcases like it.

Would you like to see more similar showcases on Smashing Magazine?

(al)

© Shavaughn Haack for Smashing Magazine, 2013.

There’s been a lot of talk about iOS 7 since its unveiling earlier this month and most of it has been centered around the design, in particular the new icons. Now, as we’ve all had time to mull over the changes, questions are beginning to be asked about how they will affect the design of our own apps. As a result, a debate has broken out about how much of an influence iOS 7′s new UI should have.

While some believe that apps should remain true to their own style and shouldn’t be redesigned purely to match the look of iOS 7, others believe that apps should be redesigned in order to make them feel more native. To add to this, there appears to be some confusion over how strict Apple’s iOS Human Interface Guidelines actually are. 

In an effort to clear things up, I’ve taken a long look at the documents within Apple’s iOS 7 Design Resources and will use this post to share some of my findings.

Understanding Apple’s guidelines

With regards to the debate over whether all apps should now adopt a “flat” aesthetic, it’s purely a matter of opinion. If you use custom UI elements in your design then ultimately stylistic decisions lie with you and your team. Although Apple do suggest that you revisit the use of drop shadows, gradients, and bezels, I’ve seen no evidence to suggest that this is a strict requirement.

In the snippet of text below, taken from the iOS 7 UI Transition Guide, more details are given on different levels of customization and how each will affect the amount of work that you need to do in order to prepare your apps for the transition.

Think of app customization as being divided into the following three types:

• Standard. The app contains only standard, uncustomized UI elements provided by UIKit.
• Custom. The app presents a completely custom UI that doesn’t include any UIKit UI elements.
• Hybrid. The app contains a mix of standard and custom elements, including standard elements that you customized using UIKit tinting and appearance-customization APIs.

For a standard app, you need to decide whether your visual and user experience designs still make sense in the iOS 7 environment. If you decide to keep the current layout and interaction model, most of the work involves making minor adjustments and ensuring that the app handles the new systemwide gestures correctly.

Custom apps—that is, apps that use no UIKit UI elements—require a more nuanced approach. For example, if you feel that the current UI and experience of the app is still appropriate, there may be very little to do. On the other hand, if you feel that the app’s personality and user experience should change in order to delight iOS 7 users, you have more work to do.

Hybrid apps vary in the amount of work required, depending on the customizations you did and how you combined custom and standard elements. In addition to revisiting the overall design of a hybrid app, you need to make sure that your customizations still work well and look good when they’re integrated with standard elements.

It’s also noted at the end of the document quoted above that an app that mimics standard iOS 6 UI in a completely custom way is likely to require a lot of work because it will simply look out of date. This is certainly a prospect that you’re going to want to consider.

Also taken from the iOS 7 UI Transition Guide is the text below, which features two lists — things every app must do and things every app should do. Given the change in language, I’d consider the first to be a list of strict requirements and the second to be a list of things that at the very least should be given some thought.

Things every app must do

• Update the app icon. In iOS 7, app icons are 120 x 120 pixels (high resolution).
• Update the launch image to include the status bar area if it doesn’t already do so.
• Support Retina display and iPhone 5 in all your artwork and designs, if you’re not already doing so. 

Things every app should do

• Make sure that app content is discernible through translucent UI elements—such as bars and keyboards—and the transparent status bar. In iOS 7, view controllers use full-screen layout (to learn more, see Using View Controllers).
• Redesign custom bar button icons. In iOS 7, bar button icons are lighter in weight and have a different style.
• Prepare for borderless buttons by moving away from supplying button background images and by reassessing your layout.
• Examine your app for hard-coded UI values—such as sizes and positions—and replace them with those you derive dynamically from system-provided values. Use Auto Layout to help your app respond when layout changes are required. (If you’re new to Auto Layout, learn about it by reading Cocoa Auto Layout Guide.)
• Examine your app for places where the metrics and style changes of UIKit controls and views affect the layout and appearance. For example, switches are wider, grouped tables are no longer inset, and progress views are thinner. For more information on specific UI elements, see Bars and Bar Buttons, Controls, Content Views, and Temporary Views.
• Adopt Dynamic Type. In iOS 7, users can adjust the text size they see in apps. When you adopt Dynamic Type, you get text that responds appropriately to user-specified size changes. For more information, see Using Fonts.
• Make sure your app doesn’t respond inappropriately to the new Control Center gesture or to a navigation controller’s swipe to go back gesture, especially if you perform custom touch handling.
• Revisit the use of drop shadows, gradients, and bezels. Because the iOS 7 aesthetic is smooth and layered—with much less emphasis on using visual effects to make UI elements look physical—you may want to rethink these effects.
• If necessary, update your app to best practices for iOS 6—such as Auto Layout and storyboards—and ensure that the app uses no deprecated API.

iOS 7 doesn’t mean the end of the ultra detailed app icon either. The snippet of text below, taken from the iOS Human Interface Guidelines, suggests there is still a place for realism. However, as mentioned above, all app icons will need to be updated.

If you want to portray real substances, do it accurately. Icons or images that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

To summarise

Although there is a lot more to the documents within Apple’s iOS 7 Design Resources, and I would recommend reading through them all, I felt that these three snippets in particular provide some much needed clarity. Apple’s new approach may do it’s best to shun drop shadows, gradients, and bezels, but it doesn’t mean that you have to follow suit, and whether you should or not is purely a matter of opinion.

Regardless of what stylistic choices you make, as long as you carefully consider all of the above, then you should have no problem in successfully transitioning your apps to iOS 7.

Has this cleared up any concerns you had? Are you looking forward to making the transition? Let us know in the comments.

1000+ Fun And Engaging Cartoon Illustrations – only $17!

As Google Glass gains momentum, companies and researchers are trying to decide what will be the next big breakthrough in wearable technology.

We’re just starting to see the early adopters of wearable computing wandering the streets gazing through Google’s head-worn computer or staring down at their Pebble smart watch. But a slew of researchers are already hard at work figuring out what will come next. Among the more outlandish ideas these researchers are experimenting with: sensors embedded in clothing and teeth, and—oh yes—a wearable computer designed just for dogs.

Kevin Maxwell ’02, has been appointed chief executive officer of Prince George’s public schools. As CEO, Maxwell will be tasked with turning around the struggling school system and closing the achievement gap so it is more aligned with surrounding county systems.

Maxwell has a long history in public education, having spent more than 20 years as a teacher, principal and chief educational administrator of Prince George’s County. Most recently, he was superintendent of Anne Arundel County.

Maxwell received his Ph.D. in Language, Literacy and Culture from the University of Maryland, Baltimore County (UMBC).

You can read more on Kevin Maxwell’s appointment below:

Washington Post article »
Baltimore Sun article »
The Bowie Blade-News article »
Afro-American Newspapers article »