DavideLongo

Bootstrap is the Most Popular Framework

Today more than 50 percent of Internet traffic originates from mobile browsers. Many of the initial challenges of mobile browsing related to speed, performance, modularity, and responsiveness. This gave rise to CSS frameworks that addressed these challenges.

CSS frameworks are sets of default CSS and HTML files that provide a handy platform for website design bringing the following benefits to the front-end workflow:

  • take care of website rendering by all browsers
  • help create a responsive design
  • provide clean and symmetric layouts
  • eliminate the need to write code from scratch every time.

Not willing to waste precious time reinventing the wheel, front-end developers often resort to CSS frameworks as an efficient tool to meet the demands of diverse platforms and screen sizes. Containing common UI components, grid systems, layouts, and many other features, CSS frameworks significantly streamline the workflow. With a CSS framework, a developer can bring up a simple website skeleton in no time, having browser-incompatibility problems fixed. As a result, the time saved can be invested in fine-tuning the produced website design.

Due to their popularity, many different CSS frameworks are available, and new ones regularly pop up. However, what works for one developer or project may not work for another, so it is necessary to research a variety of options before committing yourself to one.

This article will guide you through the most well-reviewed CSS frameworks in 2018, categorize and compare them to help you decide which one will suit your project best.

Looking at the list of the CSS frameworks, we thought it would be helpful to categorize them for further comparison. Consequently, we divided the CSS frameworks into three categories:

1. Full-featured: Bootstrap, Foundation, Semantic UI, UIkit, and Bulma

2. Based on Material Design system: Materialize and Material Design Lite

3. Very lightweight (smaller than ~10KB): Pure

Before going into detail about each category, here is a comparative table comprising the basic framework information: core concepts, size, features, grid characteristics, learning curve, and more.

CSS frameworks categorized and compared according to the given criteria

Full-featured CSS frameworks

A new project always starts with choosing a suitable framework that will solve given problems and save a lot of time and energy. You can’t go wrong giving preference to the most widely used CSS frameworks that provide a complete toolbox set for building a beautiful responsive website.

Bootstrap: leading responsive CSS framework

When it comes to CSS frameworks, Bootstrap is on the tip of everyone’s tongue. This toolkit is clearly the most popular fully fleshed out HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap offers the widest variety of themes and the best browser capability. The latest version, Bootstrap 4, introduces new components, utility classes, and more modular architecture, as well as profound improvements for easy customization.

Websites using Bootstrap: Newsweek, Vogue, Indeed, Walmart, Codecademy.

Benefits:

  • Being extremely popular, Bootstrap has a vast community to learn from. As a result, far more questions are answered around the Internet. An abundance of documentation makes working with Bootstrap even easier.
  • Bootstrap offers extensive prebuilt UI components: modals, dropdown buttons, ScrollSpy, popovers, dynamic tooltips, carousels and many more. Among the new ones are a card component, that can be used to display all types of content, and a responsive navbar, that allows for more navigation components styles to be fully customizable. There is also a unique flexible component Jumbotron designed to showcase key messages on a website. In addition, Bootstrap components are well-adapted to the popular JS MVC frameworks.
  • Built in SASS, Bootstrap allows users to quickly customize their projects. Using mixins and variables designers and developers can break out-of-the-box structure in favor of a more individual design.
  • Bootstrap’s calling card is its responsive grid system. It allows up to 12 columns across the page and rearranges them depending on the screen size. The Bootstrap grid system has four classes (for phones, tablets, small laptops, and laptops & desktops) that can be combined to create more dynamic and flexible layouts. Bootstrap 4 is built with Flexbox layout.
  • Bootstrap doesn’t have any extras bundled but there are powerful plugins built on jQuery that can add interaction to your website.

Weaknesses. The two most widespread complaints about Bootstrap have always been code bloat and overly detailed component styling. Bootstrap 3 included lots of extra code that remained unused and the components styled in every detail presented problems while overriding some CSS rules. However, both criticisms fall to pieces starting with the latest version which is a major rewrite of the entire project. In Bootstrap 4 users can create custom builds and include only the desired components. The changes you need to make to migrate to version 4 are generally just class renames and some set-up.

Use cases. Bootstrap builds projects with standard tools that can be easily understood and maintained, making it is easy to onboard new talent.

Ideal for:

  • a back-end developer who needs to make some UI changes but doesn’t know HTML and CSS well.
  • a trainee who is just learning CSS, as he or she can already leverage the power of Bootstrap.
  • a developer with little knowledge of JavaScript who can still make use of Bootstrap components without writing a line in JS.

Foundation: complex and professional

Being a mobile-first responsive CSS framework of the same ilk as Bootstrap, Foundation has some notable differences. Its interface is considered the most advanced one among the front-end frameworks. Being rather complex, Foundation encourages creating unique and custom websites. It is a truly professional CSS framework with additional paid services like business support, consulting, and training offered not only for individuals but for entire companies.

Websites using Foundation: Facebook, Mozilla, Adobe, Amazon, eBay, National Geographic, and more.

Benefits:

  • One of the greatest assets in Foundation is its responsive menu which is functional and easy to style. This way the framework allows designers and developers to create elegant websites with more of a design-it-yourself approach using Foundation’s broad customization settings.
  • Foundation empowers you to build complicated layouts that don’t require a lot of custom elements, while the framework has all the necessary components, including a strong responsive flex grid, JavaScript libraries, and easy-to-use templates available for download. Among the great components is a smooth scrolling feature. Built-in JS code, it can be added to any link inside the page.

Responsive store template by Foundation available for download
  • Foundation is well-optimized for hand-held devices as one of the first frameworks to adopt a mobile-first philosophy.
  • The framework has a built-in functionality that speeds up the prototyping process.

Weaknesses. When trying to customize, Foundation appears to be more complex making it not quite suitable for beginners.

Use cases. Foundation can be used for various purposes: building websites, mobile and web apps, creating email templates, and more.

Ideal for more advanced developers and designers who aim at creating a unique website and are willing to customize the framework.

Semantic UI: natural language that just makes sense

Semantic UI is built around the unique goal of creating a shared vocabulary around UI. Based on natural language principles, Semantic empowers designers and developers by making the code more readable and easier to understand. Users say Semantic UI is easy to work with and just makes sense.

Semantic UI stands out with functionality that goes beyond a CSS framework and includes simplified debugging, and the ability to define elements, collections, views, modules, and behaviors of UI elements.

Websites using Semantic UI: Snapchat, ESPN, Avira Lingo.

Benefits:

  • Semantic UI offers very well-organized documentation. Moreover, the framework has a separate website with guides for getting started, customizing, and creating themes.
  • All Semantic UI classes are human words and coding resembles writing a regular text. This user-friendly approach makes it easier to grasp and understand the framework even for beginners.
Semantic UI CSS class to create a 3-column-block. Example from Twitter Bootstrap vs. Semantic UI by Igor Chishkala
  • Many emphasize the strong design features of Semantic UI. It looks very clean and modern, and its customization elements go far beyond Bootstrap. Over 3000 variables may be customized to fully tailor the end result.
  • The framework has official implementations for popular third parties like Angular and WordPress.

Weaknesses:

  • The total size of the Semantic package is much bigger than those of Bootstrap or Foundation. Due to its size, some recommend using specific modules and components instead of the whole framework.
  • To get the most of Semantic UI, you’d better be familiar with JS, since many features in Semantic UI use JavaScript for behaviors and customizations. On the contrary, Bootstrap doesn’t require JS skills.

Use cases. Semantic development of the page supports nesting grids for much more complex use cases. Whatever your layout requirements may be, Semantic UI will eventually fit right in and help you design.

A grid inside a grid column sub-divides that column into more columns. Image source — Semantic UI

Ideal for advanced developers, who know JavaScript well.

UIkit: iOS specific CSS framework

Designed precisely for iOS development, UIkit defines the core components of iOS apps from navigation controllers to labels, and buttons. Although most often UIkit is used for phone applications, there are breakpoint systems available for tablets, desktops, laptops, and large desktop systems too. UIkit helps create fast and powerful web interfaces and is often considered to be the best UI framework while having one of the broadest ranges of UI and interactivity components in the market.

Using UIkit: PHP CMS Pagekit, WordPress and Joomla themes YOOtheme Pro, themes tagged “UIkit” on Themeforest.

Benefits:

  • With an emphasis on structure-only styling, it’s easy to modify UIkit to suit your application, without preprocessor variables, using only raw CSS structure.
  • UIkit offers a concise collection of simple-to-use and easy-to-customize components that help create an entirely new look to fit the needs of a designer. This is highly appealing to modern developers who want to differentiate their creations. Furthermore, with its flexible control over the website/app elements, UIkit allows you to quickly make profound changes to the style of your website.
  • UIkit is stylish right out of the box and might need no additional customization. There are plenty of ready-to-use themes available. On downloading a theme from the official website, you can choose the core files in CSS, SCSS, or LESS.
  • UIkit has a wide variety of built-in animation features that can be used to enrich user’s interaction with the website components.

Weaknesses:

  • Since UIkit is less popular than its contenders, it may be hard to find learning resources other than the official documentation.
  • There are lots of classes used to support a wide range of UIkit components. Being helpful on the one hand, they add complexity in terms of dealing with a multitude of names.

Use cases: UIkit is successfully used in iOS development and many WordPress themes. It is great for simple and complex projects alike.

Ideal for experienced developers due to the current lack of available learning resources.

Bulma: easy-to-learn CSS framework

Bulma is a fairly new CSS framework that emerged in 2016 but is gaining quite a lot of popularity due to simplicity and a mild learning curve. Bulma doesn’t include any JS options, and focusing only on CSS it provides lightweight solutions that can easily be implemented in any development context.

Using Bulma: Bedtime Stories, Mod API, Pollygot.

Benefits:

  • With just a handful of well-crafted UI components and default styles, Bulma is a great option in terms of saving your time and energy.
  • Bulma has very readable syntax, which may be a considerable advantage for some developers. The framework offers almost a declarative experience with its simple class names like .button or .title and a straightforward modifier system like .is-primary or .is-large.
  • In addition to all user-friendly features, Bulma has a simple grid system based on Flexbox, making horizontal alignment and vertical centering much easier. To build a Bulma grid, you only need a single .columns container to wrap as many .column items as you want.
  • Bulma ships with 100+ CSS helpers that can be applied to almost any element, in order to specify its color, display, and spacing.

Weaknesses. While Bulma is still quite a new CSS framework, it has a much smaller community to contribute to a better understanding and further development of the product.

Use cases. Bulma enables rapid project development satisfying with results and the time spent to achieve them.

Ideal for developers with any background due to its simplicity.

Material-based CSS frameworks

Developed by Google in 2014, Material Design was born out of the need to create a consistent experience across multiple platforms. This design language set new standards for the web while synthesizing the classic principles with new visual approaches.

Material Design is based on the concept of paper and ink and its style is rooted in physics: apart from width and height, every element has a certain depth that determines its position on the webpage. The designer should aim at creating something that looks and functions like it could in the physical world. The trend for Material Design is increasing and a great number of animations, themes, and UIs that use Material-based frameworks is widely accessible.

Material design showcase by Google

Material Design Lite: Google official framework

This is a wide library of components for web developers that lets users add a material design look and feel to their websites. MDL is a self-dependent design framework as it doesn’t rely on any libraries or JavaScript frameworks. The “Lite” part of MDL comes from several key design goals:

  • easy to install and use
  • framework-agnostic, meaning MDL is compatible with every tech stack
  • light code size (~27KB gzipped)
  • narrow focus: material design styling for websites

Using MDL: Google wallet, Google Project Sunproof, Talks at Google.

Benefits:

  • Created by Google, MDL is up to date, easy to use, has a wide feature coverage, and no external dependencies.
  • MDL provides a great out-of-the-box look that may need no customization.
  • An important advantage is that MDL can be used with Elm, a language of graphical user interfaces.
  • MDL provides a rich set of components, including material design buttons, text fields, tooltips, spinners, and many more.
  • With their blogging templates, Material Design Lite enables you to get a blog started in minutes.

Weaknesses:

  • Currently, MDL has limited support and no further development is taking place.
  • Material Design Lite may be difficult to customize. Consequently, websites risk looking very much alike.

Use cases. MDL is optimal for websites heavy on textual content, such as marketing pages, text articles, and blogs.

Ideal for everyone as MDL essentially makes the concept accessible to pick up quickly and easily.

Materialize: a great option for a starter framework

With around 37K stars on GitHub, Materialize is the hottest Material-based CSS framework. It comes in two different forms. The first is a typical standard version with both minified and unminified CSS and JS files. The second version is SASS-based and gives you more control over component selection.

Websites using Materialize: RSJoomla!, Closeheat, Post Planner, Fuddruckers.

Benefits:

  • Following Google’s guidelines for Material design, Materialize is device-agnostic, which means that it looks good on every device.
  • Many choose Materialize over other more popular alternatives like Bootstrap, for its design, which is very opinionated on how elements should behave and look. This creates a consistent feel without making every product look the same. In addition, this framework enhances animation for a smoother experience.
  • Materialize also provides various components and behaviors not routinely found in other front-end frameworks. For example, CSS components: badges, scrollFire, scrollSpy, wave behaviors, and mobile-specific ones: slide-out drawer menus and toasts.

Weaknesses:

  • Materialize refused to use Flexbox, which results in lower compatibility with Internet Explorer 10+ and a potential lack of future cross-browser compatibility.
  • Large file size makes Materialize a bulky framework to work with.

Use cases. Material Design websites are few and far between — and that’s why they stand out in the crowd. Materialize can be also used in designing hybrid mobile apps.

Ideal for less experienced developers looking for a guided introduction to material design specifications.

Pure: very lightweight, simple, and fast CSS framework

While choosing a CSS framework, loading speed is a very important quality factor to consider. If you want to build super-fast loading websites, give preference to a lightweight CSS framework.

Pure is a set of small, responsive CSS modules for all your needs. Having all the common features you need in a standard web design framework, Pure’s size is incredibly small — only 3.8 KB minified. And if you choose to only use a subset of available modules, you’ll save even more bandwidth. Built on Normalize.css, Pure provides layout and styling for native HTML elements, plus the most common UI components. Its minimal styles encourage you to write your application styles on top of it.

Websites using Pure CSS: Yahoo, LastPass, Flickr, CanYouSeeMe.org.

Benefits:

  • Pure’s design makes it easier to override styles. Its minimalist look gives designers a foundation on which they can build their design. That said, Pure is super-easy to customize.
  • The framework is very simple. The class names are easy to remember, extend, and maintain.

Weaknesses. Some refer to Pure as “bare-bones styles” and underline that this framework misses a lot. Pure lacks some of the UI components like tabs or an accordion menu and the ‘mobile-first’ approach can sometimes be confusing. However, poor functionality can be easily solved if you are experienced in coding on JavaScript or integrating third-party plugins.

Use cases. If you’re building a theme for WordPress or a custom website of your own, Pure could be a good option.

Ideal for people who don’t need a full-featured framework but only specific components to include in their work.

Settling on a go-to CSS framework

To begin with, here is the following disclaimer: Using a third-party CSS should never mean caring less about your own CSS code.

Another important point to make is that hip and trendy never means best suited for the job. In other words, it is necessary to grow the understanding of why one tool would be better suited for the case than the other.

The framework should be in line with your needs and expectations. Therefore, it’s important to decide on the priorities: Are you trying to make a lightweight site that will work fast or a maintainable site to work for years? Once the priorities are set, you can choose a framework that will allow you to achieve the appearance that you want with as little effort as possible.

To sum up, the right framework for you will depend on your project’s requirements, where you need help in programming: design or coding functionality and your personal coding philosophy. Experienced developers advise not to stick to one and only framework, but rather use several of them for the benefit of your website. Besides that, having a working understanding of multiple frameworks will contribute to building up your skillset.



What’s in the latest Chrome update? More new tab page customization, in-browser Google Drive search

With Chrome 78, tab hover text arrives, users have more options to tweak the new tab page, and yes, forced dark mode is possible. Business users get the ability to search Google Drive from the Chrome address bar.

Google on Tuesday rolled out Chrome 78, the latest version of its world-dominant browser, that included patches for 37 security vulnerabilities, new customization options for the new tab page, and search integration with Google Drive.

The Mountain View, Calif. firm paid out $58,500 in bug bounties — up 41% over September's Chrome 77 — to researchers who reported some of the flaws. Three were ranked "High," the second-most-serious category in Google's four-step ratings, but none was tagged as "Critical," the topmost rating. Two of the three High-ranked vulnerabilities were submitted by Man Yue Mo of Semmle, a San Francisco security company, in return for $35,000 in reward money.

Chrome updates in the background, so most users only need to relaunch the browser to finish the upgrade. To manually update, select "About Google Chrome" from the Help menu under the vertical ellipsis at the upper right; the resulting tab shows that the browser has been updated or displays the download process before presenting a "Relaunch" button. Those who are new to Chrome can download the latest for Windows, macOS and Linux from here.

Google updates Chrome every six to eight weeks. It last upgraded the browser September 10.

New new tab page options

Google continued to make progress in a slow process of, if not overhauling the new tab page, then at least upping the customization quotient.

Chrome 77 introduced backgrounds to the browser, giving users several image collections — landscapes, seascapes, geometric patterns and such — and letting them upload one of their own to fill in the previously plain new tab page. (The image is not like a skin, à la Firefox, but appears only on the new tab page.)

The newer Chrome 78 keeps that but also adds more options when the user flips some bits. After typing chrome://flags in the address bar and pressing Return or Enter, search for two settings:

  • Chrome Colors menu
  • NTP customization menu version 2

Set each to "Enabled" and relaunch Chrome 78.

In the lower right of the new tab page, click on the pencil icon to see and set the new options for colors and on-page shortcuts.

At some point, Google will switch this on for everyone, eliminating the need to set flags; it hasn't said when, however.

Search Google Drive from Chrome's address bar

A long-promised feature — comprehensive search of Google Drive — will also come to Chrome 78, even though it may not be immediately available.

"Rolling out in the coming weeks, users will be able to search for Google Drive files that they have access to from the address bar," Google wrote in its accompanying Chrome-in-the-enterprise documentation. "Their input will search through both titles and document contents, and the most relevant documents based on their history will appear."

There's a big caveat: It's available only to users of G Suite Business, G Suite Enterprise, or G Suite Enterprise for Education. "This behavior is on by default and can be controlled with the 'Google Drive search suggestions' setting in the G Suite admin console," wrote Google.

Google, like other software makers, often distributes its work in stages, rolling out new features and functionality in waves so that if problems pop up, those issues don't impact everyone.

Google also wrapped up work bringing Legacy Browser Support (LBS) into Chrome with version 78. Starting with Chrome 74, Google began deconstructing a long-available add-on and putting it inside Chrome. Configured by IT personnel, LBS automatically opens Internet Explorer 11 (IE11) when links clicked within Chrome lead to websites, web services or web apps requiring Microsoft's browser or its ActiveX controls. Administrators can deploy the baked-in LBS support and manage it using group policies or Chrome Browser Cloud Management's User Settings.

Tab hover, progress on passwords and, of course, who can forget dark mode?

Chrome 78 now puts text boxes at the pointer's position when the user hangs it over any tab. Dubbed "tab hover cards," the aides are particularly helpful when the browser's tab bar is overloaded to the point where there's no room for distinguishing labels.

chrome 78 tab hover cards

IDG

Tab hover cards pop up in Chrome 78 when the user suspends the pointer on an inactive tab (in this case, the middle of the three tabs). The box tells users what's on that tab.

Elsewhere, Google moved closer to finalizing work on in-Chrome notification of exposed credentials. Originally intended to ship in this version (Chrome 78), the feature was pushed to Chrome 79 instead. Exactly how Chrome will notify users that a username/password pair has been revealed by a data breach has not been explained, but the tool has not been activated in Chrome 78. (Rival Mozilla just introduced password alerts in Firefox 70, the version that launched Tuesday.)

Even though it hasn't been switched on by Google, users of Chrome 78 can do so: After accessing the chrome://flags page, find and set Password Leak Detection to "Enabled." That will turn on the feature; to verify, users should call up Settings and look under Autofill > Passwords for the toggle marked "Check password safety." If the toggle is in the on position, Chrome should tell you when it detects that a data breach-revealed password has been used.

chrome 78 check password safety setting

IDG

Chrome 78 is supposed to warn users when they type in passwords that have already been blown by a data breach, but the feature requires a trip into chrome://flags. The toggle shown here is how the alert system is controlled from then on.

(Computerworld's spot testing of leaked-password detection in Chrome 78 returned iffy results. Entering the password of one of the accounts that Google said had been compromised caused a pop-up to appear, carrying the message "A data breach on a site or app you use exposed your password. Chrome recommends checking your saved passwords now." But other accounts that Google lumped in the same compromised category did not trigger the warning.)

Another not-quite-ready feature, dubbed "Force Dark Mode," can be enabled by those who can't get enough dark mode. Rather than wait for websites to support an operating system's dark mode — the sudden fascination with flipping light to dark — Chrome will invert every website. From the chrome://flags page, locate Force Dark Mode for Web Contents and set it to Enabled. (This option has seven switched-on options; experiment to find a preference.) Relaunch the browser, and the web will be turned inside out, or at least go dark.

Chrome's next upgrade, to version 79, is slated to debut on or about Dec. 10. That refresh will be the last one for 2019.

One Framework, Every Device

What is Ionic?

Ionic makes it easy to build high-performance mobile and Progressive Web Apps (or PWAs) that look and feel beautiful on any platform or device.

Ionic’s open source Framework and developer-friendly tools and services power apps for some of the world’s best-known brands - from highly successful consumer apps like Sworkit, Untappd and Dow Jones MarketWatch, to mission-critical apps supporting Nationwide, Amtrak, and NASA.

<h2>A complete app development kit.</h2> The open source <a href="https://ionicframework.com/framework">Ionic Framework</a> features a rich library of front-end building blocks and UI components that make it easy to design beautiful, high-performance mobile and Progressive Web Apps (or PWAs) using web technologies like HTML, CSS, and JavaScript. <p class="sm">Our universal web components pair with any JavaScript framework, including Angular, React, Vue, or no framework at all (just add a script tag!). Ionic apps are backend agnostic, with connections to AWS, Azure, and Firebase.</p>
Steve Jobs

A supercharged platform for teams

Teams building with Ionic can boost productivity with Ionic Studio, our powerful and secure rapid development environment, and Appflow, an integrated suite of Mobile DevOps services to automate every phase of the app lifecycle - from native builds to live updates.

Original and Innovative Web Layouts

The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.

An original, creative layout goes a long way to improving the user experience of a website, although not letting your creativity get in the way of usability is important. As usual, we have to put ourselves in the users’ shoes: What do we want them to see first? How will your message be best communicated? We have to ask these questions before we start designing, because the layout will shape the rest of the design.

Original Web Layouts

Beurre & Sel This website is just beautiful. The automatic slideshow plays in the background, with the main navigation bar at the top. As you scroll down, the navigation shrinks but remains fixed at the top. Below is a colorful list of the different cookies the company makes, but these also serve as buttons in a submenu. When you click on a flavor, information overlaps this submenu, allowing you to click through the assortment of cookie flavors. The navigation bar at the top and the submenu are confined to the middle column of a three-column grid, maintaining the user’s focus at the center.

Beurre & Sel

Hackery, Maths & Design As the page loads, a fun 3D line animation starts to fill the screen. The arrows indicate movement and fluidity and encourage the user to scroll down toward the content. The content below is laid out in a three column grid with two main columns and one smaller side bar. However, it doesn’t feel boxy and constrained but has a more open feel — this is due to the ample space given and the use of rounded corners. The layout of this site is comfortable for the user.

Hackery, Maths & Design

The Drawing Room I love this layout, simple yet so visually interesting. The studio’s work is displayed in diamond shapes of different sizes that fit together. The center diamond is the nameplate, which isn’t too prominent and so doesn’t detract from the work. As you hover over a diamond, it fills with a description of the work. This single-page website has an original and clean layout that it easy to use.

The Drawing Room

We Love Noise Luke Finch’s portfolio has a fun and friendly layout. The work seems to be haphazardly scattered, breaking away from too clean and predictable an approach. The transitions tell you a bit about the projects, and you can navigate using the arrows. The little heart in the top-left corner is the navigation for the whole website, it swivels into an “i” on the home page. When viewing a project, you can exit by hovering over the heart.

We Love Noise

Ende This layout is dynamic. Upon loading, it greets you with a quirky photograph and prompts you to scroll down, where the navigation appears and eventually affixes to the top. I really like the transparent navigation bar, which opens the page up a little, revealing the content underneath. The content is scattered around the page, although the website does have structure; each section is set off by a different background color. The projects are prominently displayed in a three-column grid, but the section for the team members breaks away from the grid and uses the space in an interesting way.

Ende

Edward Carvalho Monaghan How’s about some color? This portfolio website has some serious personality, and the work is loud and lively as it moves about. Most effective is the consistency in style. The website coheres as a complete work, representing the designer while supporting the individual portfolio pieces — which is precisely what such a website should do. The color palette is incorporated in the nameplate, and the flashing animation brings energy to the website.

Edward Carvalho Monaghan

Huys This site has an original take on layout with the right side of the page acting like a kind of letterhead, providing all the necessary information like who they are and what they do. The left side of the page scrolls vertically and resembles the layout of the windows of the condominiums they build. Once you click, you are directed to a more blog-style layout which is easy to navigate.

Huys

KathArt KathArt has a great video layout. The personality just about oozes from this simple yet highly effective design, as you meet the members of this team. The team members are introduced as they’re working, as though you’re in the office with them! The navigation as a timeline is clever because you can track the progress of the video easily.

KathArt

Wacom Wacom targets a wide audience of both professional and non-professional creatives with its website. The layout is an integral part of this and creates a user-friendly experience. The navigation on the left minimizes when hovered over, and it shows the various categories available. The user is in control and can choose which products to look at; they are not coerced or subjected to a sales pitch. The layout of the home page is simple and guides the user to the product that best suits their needs. I like the subtle hand-drawn elements that accompany the products.

Wacom

Amsterdam Dance Event The layout here really helps to showcase the attitude and spirit of this event. The navigation runs down the left side, becoming a reference point across the website. A slideshow of strong, visually stimulating images rotates, with teasers for the event’s festival, playground and conference. This is an effective way to engage users.

Amsterdam Dance Event

As you scroll down the page, the content below slides over the slideshow, bringing the submenu from the bottom to the top. Each section of the website has a banner that runs across the screen, making for a visually appealing introduction to that section. The rest of the articles are laid out in a grid. The rows in the grid don’t line up perfectly; each column starts slightly lower than the last — another small yet effective visual device.

Cropp Cropp has a big and bold personality, and the layout showcases it. As you hover over an image, the image pixelates beyond recognition, which grabs your attention. The navigation bar at the top is consistent across all pages, and the home page is basically a loud, visual representation of the options in the navigation. The layout captures the idea of pixellation, and all photographs and videos are laid out in blocks, like a pixelated image.

Cropp

 

Creative and Innovative Navigation Designs

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.

 

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.

Toybox

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.

Olivier Bossel

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.

Tsto

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.

Derek Boateng

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.