How to create a minimalist site people won’t hate

Minimalism often frustrates visitors who can’t find what they’re looking for. Here’s how to do it well.

Minimalist design has risen in popularity over the past few years with plenty of beautiful sites around that reflect its content-focused design philosophy.

A good definition of minimalist design comes courtesy of UX Movement: “A truly minimalist design would have the highest possible signal-to-noise ratio”. But what exactly does this mean?

In design, noise is anything that distracts a user from accomplishing their immediate goals. An information-heavy  site with many design elements “dilutes the signal” and takes away from providing a great user experience. UX Movement point out that in order to avoid this, you should “shoot for maximum signal and minimum noise”.

Note the use of colour too, which we described in the free ebook Web Design for the Human Eye:

  • Black – denotes class, excellence, stability and strength
  • Gray – promotes feelings are stability and calm
  • White – Pure, cool, calm and modern

The smart colour choices present the shoe as a high class product, which offers a sense of calm and stability. But does the design cut out the noise?

Absolutely. There’s very little text on any of the pages and even the navigation menu remains hidden until you click on it. Nothing distracts from the main message – which is ‘this is a shoe that’s good enough quality that no gimmicks are required’.

Cutting out the noise is all about removing those elements that are not necessary in order to get your ‘signal’ across as clearly as possible.

Can you overdo minimalism?

That depends. If you design a site so minimalist that the signal (the message about the brand) isn’t conveyed, then yes, it is too minimal.

As discussed earlier, the idea is to strip away unnecessary elements, leaving those that amplify the signal. Again, minimalist doesn’t mean necessarily mean simple and it could be that the backend and the UI is actually quite complex, but this doesn’t show in the design.

It’s important that you arrive at the design process with no preconceptions, as they do exist with regard to these kinds of designs.

For example, a lot of people imagine that minimalist means flat design, while others equate it with certain colours such as white and gray. Others still believe minimalism is all about the use of strong colour to give signals. On the contrary, minimalist design comes in all shapes, sizes and colours.

Don’t sacrifice usability for visual flair

Use visual cues such as colours to give signals to your users. Use whitespace as a sculpting tool to create breathing room for on-screen elements  (thereby directing the user’s eyes to the more important content). But don’t get carried away.

If your navigation is represented by icons, make sure labels appear on hover. Make sure the user always knows where they are, and how to get to their next destination. Choose a legible and readable typeface in a size that won’t make people squint.

Preparing for minimalism

If you’re considering building a minimalist website for the first time, then do some homework. Web design always seems to be about one trade-off or another, so you should first consider the following.

  • Usability – The design should never distract from the usability of the site.
  • Content – What’s important and what can safely be left out.
  • Hierarchy – Where should everything live on the page and which elements should be given priority.
  • Typography – A key ingredient of minimalist sites, you can find plenty of stunning examples and best practices online.
  • Wireframes – Create low-fi wireframes based on the content that you need to include and decide early on which colours you want to use and why. It’s fine to use Lorem Ipsum in the first wireframe, but as you iterate, you should start using real content (even if it’s rough).

First, create a content inventory and only include what users care about. Next, start exploring the information architecture through card-sorting exercises, wrapping up with a site map. Once you’ve mapped out the content, then you can start wireframing and prototyping. Don’t be afraid to subtract design elements until you feel like the site is about to break – test it with colleagues or users and then adjust as necessary.

By following this content-focused process, you’re able to naturally create a leaner site without obsessing over bare-bones aesthetics. Follow the philosophy (not the aesthetic), use a grid to keep everything aligned and positioned correctly, and you’ll be on the right path to a more lightweight yet captivating site.

How fonts affect your website’s performance

The way you use fonts on your website can affect its performance. It usually doesn’t have a big impact, so you’ll probably want to worry about the big performance hits like images first.

But if you want to squeeze a little more speed out of your site, taking a look at your fonts can help.

First, keep in mind that each typeface you use on your site requires the download of a file. The more typefaces you use, the more files there are to download. Many sites will look fine with only two or three different typefaces.

If you need to differentiate between various types of content on the page, you can do so by adjusting the colour, weight and size of the text.

You can cut down on load time even more by using system fonts, which won’t need to be downloaded. You can even use a media query to ensure system fonts are only used on narrow screens, which are more likely to be on a slow connection (although bear in mind this is not always the case).

After using @font-face to declare the font you want to add to your site, the browser won’t actually download the file until it’s needed on the screen. So if the font is only called in a media query that doesn’t apply to the current screen size, the browser won’t download the font file.

Not all devices have the same system fonts installed, so you need to make sure to include options for each mobile platform in your font stack.

Does Alphabet’s website hint at all-new Google logo design?

Google has created a new parent company – but does it give clues to a bottom-up rebrand?

Google has announced a major restructure to its corporate structure, with Alphabet becoming the search giant’s parent company and a new website – abc.xyz – being set up as its home.

The move has surprised many in the industry, but of most interest to us here at Creative Bloq is whether the new typeface used on Alphabet’s site provides a clue to a new logo design for Google.

Google’s last logo redesign was hardly earth-shattering, with a kerning tweak being all but invisible to everyone but typesetting enthusiasts. The only other major developments in Google’s playful logo were adopting flat design in 2013 and adding (then dropping) a Yahoo!

However Alphabet, as we must now call it, may be keen to perform a full-on rebrand with Google this time around, to reflect the big changes in company structure. Watch this space…

4 essential elements of a minimalist website

Create a beautiful, functional website by keeping what’s essential and removing everything else. Here’s how.

More and more, we’re seeing sites with less and less.

The artistic style of minimalism, rooted in the post-World War II movement, has found a re-emergence in modern web design. Embodying the concept of ‘less is more’, minimalist sites center around negative space, unadorned typography, and sparse elements.

But how does this apply to web UI design? How do designers navigate that thin line between “simplistic” and “boring”?

In this article, we’ll take a look at the most important characteristics of minimalism in web design. We can break them down into 4 components:

  1. Reduced Content
  2. Negative Space
  3. Visual Harmony (Symmetry)
  4. Contrast

We’ll explain the principles of each component, and then take a look at how the elements minimalism will likely evolve in the future.

01. Reduced content

If minimalism has one rule, it’s this: keep only what is essential, and remove everything else.

The main mechanism driving minimalism is that, the less elements on a screen, the more potent the remaining ones becomes.

02. Negative space

It should be no surprise that the most prevalent element of minimalism is no element at all. Negative space — also known as white space — is the most important feature of minimalism, and what give it its power.

03. Visual harmony (symmetry)

In order for a minimal design to be effective, it must have visual harmony (or an intentional lack-there-of). Because there are less elements to root the visual structure, it’s important that minimalist sites have a strong grid and a carefully constructed alignment.

The easiest solution in minimalism is to center the content. But it’s not the only one. Sometimes the text is aligned off-center for a more dynamic look, but the best way to stand out is to avoid the “center crutch” altogether.

This requires an understanding of the different forms of symmetry, and how to balance the large and small elements on a screen.

04. Contrast

Contrast becomes an even more powerful tool with other distractions stripped away.

The future of minimalism

In the near future, we’ll likely see a “less-minimal” minimalism. The style will enjoy more diversity and detail, while retaining its core of simplicity and scarce elements. On the horizon, pay attention to these changing elements.

  • Texture — Backgrounds might include more texture while retaining the ample negative space that shifts focus onto the main content.
  • Colours — More designers will move beyond the traditional black and white backgrounds and begin experimenting with more vibrant colours.
  • Animation — Animated effects in general are on the rise, so minimalist sites risk falling behind if they don’t implement them. However, these new effects will likewise follow the minimalist spirit: simple, smooth, with only what is essential.
  • Conclusion

    Minimalism as a theory is an enduring and timeless concept.

    The idea of stripping away the distractions will always resonate with designers, even if the techniques ebb and flow. If you can isolate this aspect of minimalism and apply it to your design, you’ll never have to worry about falling behind.

7 reasons the web is the next app platform

This article looks at identifying some additional thoughts on how the web may become the standard platform for future apps.

01. Native in Disguise

Web apps can be made to appear and act exactly the same as a native app – they can be installed for offline use from a web page to have their own home screen icon, offline accessibility and to open in full screen without any of the browser UI – this was the original option for apps provided by Apple with the first iPhone.

02. Business Sense

The real motivation is likely to come from businesses who start to realise that developing native apps doesn’t make commercial business sense when they have to invest both time and money to support multiple hardware and OS configurations – especially when new platforms types such as smart TV, wearables and Internet of Things are emerging to demand that apps have an even wider range of compatibility requirements. Web apps allow you to develop once and run everywhere to save time and money.

03. Speed

The argument of native apps running faster and smoother when developed using native code is rapidly becoming a redundant argument as browsers become more optimised, hardware becomes faster, developers learn how to better optimise code and tools such as Asm.js being creating to further optimise code. Add to this the upcoming WebAssembly standard, allowing apps to be compiled in the same way as native apps and distributed via the web to run in web browsers – this additional option will open opportunities for existing native code to be compiled for web distribution within minimal or no change.

04. Optimisation Relevance

Many commercial app requirements don’t need the speed optimisations offered by native apps – processing of text input and button clicks can appear smooth regardless of whether it is using unoptimised HTML with Javascript or highly optimised native code. The only difference is that it costs more to develop and maintain native code and inefficient use of time and money resources.

05. Politics Free Distribution

Both businesses and developers are vulnerable to having their time and money wasted when app stores for native apps (primarily Apple) put out mandatory update requirements or risk having their apps removed from the store. A recent example of this was the ban of apps using the Confederate flag, in which Apple imposed a blanket ban on all apps using the flag regardless of the context; in the case of Ultimate General: Gettysburg, the flag was being used for nothing other than historical accuracy.

App stores (especially Apple) can be highly fussy on what they accept in their stores to a point where they can ask you to make changes based on their opinion of what looks “pretty” – at more development time and cost to developers and their clients. Businesses and developers are already annoyed by this and will be more inclined to build web apps over native apps once the concept becomes more mainstream.

06. .App Domain

The upcoming .app domain extension is a good opportunity for web developers to promote the concept of apps being made available from a website because it can be used as way to make web apps clearly distinctive in marketing materials – e.g. get the app at something.app.

07. Physical Web

A new trend that has already started to take place with the use of QR codes, NFC and quite possibly with the use of Bluetooth low energy beacons (see video above) is the ability ability for the web to provide information and interactive functionality from the web – opening scope for new ways in which mini-apps can be useful in relation to real world objects and locations.

Web apps are ideal for this type of application because they are easy to download for single use functionality without the hassle of installation and request of permissions that enable standard features.

The importance of time in design

Interactive design happens in space AND time, but so many designers just think about space, says Jason Cranford Teague.

Screens are not static display devices. Unlike printed pages, they can change, act, react, and transform themselves within the limitations of their two dimensional spaces. The web originated as a way to present textual articles, but has evolved far past that now.

Temporal design means thinking of not only visual and interactive but change, progression, control and context to designs – something lacking in most ‘interactive’ design we see today.

The problem is that many designers still embrace static methods of planning and executing their ideas. It’s not really their fault – at least not until recently – because they were used to the static confines of the printed page and then the severe limitations of maintaining backwards compatibility with legacy browsers. So, too many digital interface were inherently static by design to meet the medium.

It is time to change that, but it will take a fundamental change in the way in which we approach experience design.

Existing Art

The good news is that not only is this change is already well underway, there is plenty of ‘existing art’ (literally) in other mediums that will help experience designers along the path. Comic strips and comic books have been around well over a century now, but sequential art has been around for all of recorded history. In fact it is the first way humans recorded history, and they idea of showing a narrative through visuals is that the core of needing to communicate.

Early films also mimicked the style of the prevailing medium at the time: theatre. Moving pictures were staged with single fixed points for an entire scene, often simply filming the same stage direction as the play. In other words, static. Filmmakers quickly learned that they could do so much more with multiple camera angles, close ups, scene transitions to name only a few techniques. What they really learned, though, was that they could play with space and time in a way that was impossible on the stage.

The State of Experience Design

Where we stand now as digital interface designers is not so different from where early cinematographers found themselves. We have been trying to use the style of the printed page, imposing its limitations on our new medium creating a static. The now all but defunct Flash technology allowed us to take some halting steps towards temporal design, incorporating video, transitions, narrative, and even limited self-determination for the actors.

(I’m trying to move away from calling the people who work with our products users or customers with the implication of passivity or (worse) addiction those words connote. I have sought a better term for over a decade now, and finally realized that what we should call them – and how we should think of them – is as actors. You may also notice that I no longer refer to User Experience design or User Interface design, preferring simply Experience design and Digital Interface design.

However, Flash turned out to be a blind alley for several reasons, and the core Web technologies (HTML, CSS, and JavaScript) are only just now really catching up to the power once provided by Flash. We’ve only just scratched the surface of what is possible thinking about our experience designs as existing in time and space, but we really like what we see.

That’s why parallax and other movement design tricks have been so popular of late. Finally someone started moving things around on the page in a somewhat realistic manner, providing visual interest and motion queue. Yes, there’s some backlash now. Parallax was pretty much a one-trick pony, giving the illusion of flow while providing very little extra information.

The traits of temporal design thinking

Temporal design is beyond the cliched ‘interactive’ which has been diluted to such an extent that it has little meaning anymore. Instead, what actors are expecting is something much more immersive and naturalistic.

How to attract larger clients

With high-profile clients comes professional kudos, but how do you go about attracting one – and what do you do next?

Every freelancer and small agency owner wants to succeed in getting a big gig with a large, high-profile client. These jobs bring you the instant prestige of being able to say you’ve worked with these companies, boosting your profile for future gigs.

At Ballistiq, we’re privileged to be able to say that we’ve worked with companies such as Autodesk, Nvidia and Intuitive Surgical. But where do you start when you’re looking to score yourself one of these kinds of gigs?

The unfortunate ‘secret’ about the consulting business is that most of the jobs you will get will likely be based on your relationships. In the history of our company, we have only landed one major deal through someone visiting our website. Other than that, it’s all been through the network of people we know or have met at events.

In today’s globalised world, most companies get countless emails and LinkedIn requests every day from outsourcing companies. Relationships and recommendations from friends and existing clients cut through the white noise.

Making connections

Many creative or technical freelancers just want to focus on the craft. It’s easy to forget that you’re a business and so you have to sell. That means networking: talking to people, calling them, following up, having lunches … going out and bringing home the bacon. Networking can help you to find opportunities that you would have missed whilst sitting at home with your Dribbble account, waiting for an enquiry.

You know you’re good at networking when the people you’re meeting start introducing you to others, and leading you to jobs. Industry events are a great place to network. Go to where the clients are. For example, we work in the media and entertainment industry and attend the major trade shows that attract all the software and hardware companies.

Once you’ve scored a meeting with someone that might want to hire you, it’s important to set the right tone. It should not be about you, it should be about them. The number one question I ask any client, big or small, is: what are your business objectives?

This not only helps me understand the project better, it shows you’re interested in what their company is trying to achieve. Many of these larger companies don’t particularly care about HTML5, responsive web design and all this ‘stuff’ that we internet pros are obsessed with. They’re more interested in how you can help them achieve their objectives.

Money talk

The great thing about working with larger companies is that they tend to have set budgets and are usually more open about money than smaller companies. A large company that wants to build a micro-site would say with a straight face, “We have $15k budgeted for this. What can you do?” I’ve found that smaller companies don’t have budgets and tend to squirm when you ask them what their budget is.

Large companies also tend to work with quarterly budgets. Find out when your potential client’s fiscal year ends and use this to figure out the quarters. This helps you work out when you should follow up with your contact. The best times are at the beginning of the quarter when they are setting budgets, and the last month when they need to spend any remaining budget.

Once you’ve settled on the project and budget, it’s time for the contract to be signed. You need to have a contract and a lawyer handy, period. The contract can be done one of two ways: either the client will ask you to use their standard vendor contract, or they’ll ask for yours (which should be professionally drawn up) and it will be reviewed by their legal team. If they ask you to use their contract, have a lawyer do a sanity check and make sure you’re not exposing yourself.

When working with larger companies, you’re usually at the mercy of their payment cycles and it’s difficult (though not impossible) to demand anything other than 60-day payment terms. You might like to consider a higher rate for these long payment term clients. You can still invoice at the start of a contract and split payments up into milestones. It sounds scary when you start, but once you build up enough cash reserves to ride the payment cycles, it’s just business as usual.

Overview of the Web Design Technologies

Web pages are created for both personal and professional tasks nowadays, where the introduction of new tools and technologies has made the process of web development very convenient to use and easy to understand. The latest advances in technology are beneficial for both users and developers, which is proved by the increased number of websites and users of web services. The space provided to every user across the web is the main advantage of this technology over other technologies like radio and television.

The Evolution of Web Design

Initially, web services were purely meant for sharing of ideas at academic level only, while the web space was provided access to public users that resulted in the mixture of professional and personal websites. The growth of web pages at personal level achieved next level with personal pages for individuals including their basic information and personal photographs. After personal and professional levels, the sale of services and products on the web became popular. Various companies boomed up on the internet and this became a matchless place for promotion of business online.

Process of Web Design

The Lifecycle of creation of a website begins with the evaluation and research analysis of the need of the website. Then the web design for the purpose is created. The design created by the designer team is evaluated and modified by the developer team. The development of websites is a specialized task that needs a complete understanding of the process and the end of the website is dependable directly to the developer’s team.

Development of websites is carried out by using different languages like HTML, Perl, Flash and others and these languages have similar logics like any other language used in this world. A web developer needs to have a full understanding of different languages and the involvement of tools and techniques of the process of web development. The process of development of a website is a lengthy process that requires reworks and revisions of the designs. Generally design and redesign processes are both involved under the development services.

Role of Technology

Advancements in technology have made for making the process of website development more convenient and easy for a common person. A number of tools have been developed for making the process of website development easier like there are many websites developed to ease the process of developing.

AJAX (Asynchronous Javascript and XML) is the latest technique that is used extensively for developing interactive and unique web applications. It is a term related to the combined use of XML and Javascript techniques and has gained a lot of popularity among web developers. It helps make the website alive by adding more functionality to the website without the need of reloading of the complete website. This is done by the back-end processing of the activity requested, thus maintaining the speed of web surfing. Other than AJAX, there are other services like Joomla, Magento and others having their own specialization. Many web designers including website designers in Bangalore use all the latest techniques to provide valuable and unique solutions related to web services.