Category Archives: Web Design

Guide to Static Website Generators

Most developers already understand how content management systems work. The popularity of WordPress has permeated the globe and become a staple for creating any blog.

However a growing trend is the use of static website generators for blogs or small websites. These are dynamic compilers that turn preprocessed code into static HTML/CSS/JS files that can be maintained on a server without a database. And while this may not be the best workflow for every site, there are many reasons why developers have been flocking to static site generators.

In this post I’d like to explore the depths of static website generators: what they do, how they do it and why you might want to use one. If you simply don’t understand static site generators then hopefully this post will shed light on the subject.

 

Origins of the Static Web

The web actually started as purely static HTML files in the 90s. Yes, there were larger applications that ran on Perl or Java, but HTML was the quickest way for anyone to publish content online.

Great Of Web Design

When visitors land on a new website they usually have no idea where to begin. They usually just look around for nav links that might provide the info they’re looking for. But the newest trend of the “start here” page offers a much better experience.

Brand new users on your site should be inspired to keep browsing deeper into your posts. The best way to achieve this is with a single unified intro page featuring links, a small guide to the site, and even some background about yourself & the site’s history.

In this post I’ll look into the trend of start here pages to see what they offer and how you can take advantage of them in your own projects.

 

Introduce Your Website

The biggest reason to use a “start here” page is to introduce new visitors to your website. Since each site offers something different the “start here” pages will have a different goal based on content.

Your page should share vital information and aim to educate visitors about the site. But it should also drive visitors further into the site by sharing the best resources and links to get started.

Personal blogs run by one person could have a “start here” page that introduces the person and their history with the website. This is the case with Darren Rowse on his site ProBlogger.

This is actually one of the more well-designed examples because Darren has years of experience with writing, design, and user conversions.

He offers a bunch of links to relevant posts right off the bat. He also has an embedded intro video for new visitors who want to learn more about the site. Down lower on the page you can read about Darren’s journey and how he built ProBlogger into the empire it is today.

Conduct a Card Sorting Study

Opinions differ just like tastes. That is why when making important design decisions we need to consider what users think. We may argue whether contact information should go in the “about us” section or in the footer or elsewhere and each team member may be right in a sense, but the only opinion that matters is that of the user.

But how can you incorporate users’ ideas into the information architecture of a product?

I suggest card sorting. It’s simple, easy to conduct and analyze and it’s an informative UX design process.

Card sorting is a user study where participants organize content pieces into groups based on topic similarity. The group labels may be predefined (closed card sorting) if you already have some kind of information architecture and navigation. However, it’s even more informative to leave group labeling to the participants (open card sorting), especially if you are unsure about the category naming. This way you will get an understanding of how your users “speak” about the same topic.

Now let’s go through the process of conducting a card sorting study step by step.

 

Choose Your Methods

Depending on your project goals you can choose to conduct either an open or closed card sorting study. While closed card sorting results may be easier to analyze, open card sorting provides more insights into user mindsets.

Another thing to consider is the medium of the card sorting research: web/remote or traditional paper based studies. There are plenty of online services that give you every single tool you need for a remote card sorting study. Just like remote usability testing, this type of research method comes with pros and cons.

On one hand it’s easier than ever to create cards, send the test to a bunch of users and let the system analyze gathered data and give you a final category tree. On the other hand during a moderated, real life card sorting session the researcher can observe and take notes of discussions, behavior, ideas and questions, which brings a somewhat emotional touch to the raw data.

Web Design Trends of the Future

One of the hottest techniques in web design is the HD background, enabled by the growing commonality of HD displays. But it’s not going to be easy when you’re creating a pattern whose trademark is visual complexity.

In this article, we’ll take a look into the future of web design. It’s not a question of if HD web design will dominate the web, but rather when high-res monitors become widespread enough to necessitate improved visual designs.

Let’s get a head start. We’ll explore how to build an HD background, using images, video, or animation, and layering everything together.

These are the most descriptive words of modern web design when it comes to background images. Not only are designers thinking about HD, but they are taking HD to the extreme with backgrounds that occupy the entire screen.

After all, as described in Web Design Trends 2015 & 2016, vision dominates a lot of our subconscious interpretation of the world around us. On top of that, pleasing images create a better user experience partly because we perceive attractive objects as working better. It seems harshly superficial, but when it comes to design, perception is reality.

High definition screen resolutions provide the perfect opportunity for users to see images with a level of detail that just wasn’t previously available. Small image details – such as the texture used by Junction Moama to the varying hues in Macquarie Park (both shown above) – add to the visual polish of the interface, contributing to the ever-important first impression.

Changing the UX 180 Degrees Made Grew Sales

Were you ever asked to fully change the experience and UI of a product that is used by more than 3 million people? Well, it happened to me.

Let me tell you my story and the journey of the 180-degree change of Bannersnack.

Have you heard about Bannersnack?

If you are one of our users, skip to the next section. If you don’t know what Bannersnack is, take a minute and check it out. Bannersnack is the leading banner making tool for creating static and animated HTML5 banners, Flash and various social media banners, all from one place. Find out more here, or keep reading to find out the whole story about the redesign.

Today’s world is changing fast, but the digital world is changing even faster.

More and more often, we see well-established brands, apps and services changing and adapting their look and communication frequently. Technology evolves at an astonishing speed. People want to do more things faster and they need tools that can make their lives easier.

Bannersnack began its journey in 2008, the culminating era of Flash banners. It was launched as the banner making app that helps you build flash banners within a couple of minutes. It was an extraordinary achievement and a revolutionary product, compared to other similar software.

Now, as flash is dying, our attention shifts from Flash to HTML5 banners; more and more static banners are created daily and the appearance of social media has blown away everything we learned about banner design.

Interaction design is a process in which designers focus

These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we’ll answer both of those questions and offer a showcase of some great interaction design work.

 

Interaction Design 101

Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.

Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.

“Introducing Interaction Design” breaks the field into five pieces that are still useful and relevant today:

Use Color in Web Design

The current landscape of color in website design is interesting to think about. Most websites look more or less the same, yet color can be a powerful tool in design.

I’m not trying to state this as anything revolutionary or as an extraordinary find. But if most websites have similar color schemes, what does that mean for color? Actually, it means a lot. Imagine a world where every website was colorful – it would possibly be very pretty and rainbow-filled but it would mean that nothing stood out. It’s like having every paragraph bolded in your essay.

Therefore, when color schemes are muted, it allows for many opportunities.

 

Draw Attention to Anything You Want

Most websites start with a basic grayscale look – white background and black text. Color comes in as accents that get you to look places. That’s why websites are not filled with color – they use it to get you to look at the buttons, headlines or links.

Take Vibrant, for instance, when you first land on their home page the background and images are black and white. The logo, call to action and the hamburger menu are bright yellow. They stand out and grab your attention quickly.

Another example is Takeit; when you first land on their home page you’re greeted with a big blue background. However, everything else is white. The big headline that’s front and center is also the center of attention. Shortly after your eye notices the smaller but still noticeable App Store button. And that’s how color can guide a user’s attention.

 

Create Personality

Color is wonderful because it can set a tone and mood for a website or brand. Beagle is a service for creation project briefs and their site starts of with lighter earth tones. As you scroll down their homepage you view pleasant shades of brown, charcoal, green and even pink. The earthly tones look professional and elegant making for a great impression on behalf of the company.

Styles Are Continuously Changing

I was recently looking through some screenshots of apps from earlier versions of iOS. It had me thinking about where design is headed over the next five to 10 years, why we continue to iterate on style, and whether design is really getting better or simply changing in a long-term cycle for the sake of change. Is design progressive or cyclical?

The first point to consider is what style is, and why it continues to change.

In the case of digital design, there is a constant desire to see and create new styles. I’d liken it to the iPhone, for example. The style of the design is difficult to fault, yet we constantly crave a radical redesign at every year’s keynote event. The style might be different but often it’s very difficult to argue it is in fact better. The iPhone 6/7 might look different compared to the 5, but does it grip in your hand as well? Does it rest on the table flat? It’s a classic case of constant desire for change that does not always yield a better product. The same concept can be applied to digital design. We love seeing new things, experiencing new things, and design is no different.

Creatives are differentiating styles in order to maintain a unique selling point for services. Again, it’s not changing styles because they are better and help the user — it’s change as a byproduct of boredom, competition and the requirement to stand out.

José Espinosa of MIT wrote an interesting essay on a similar topic but around the concept of fashion. It’s hard not to see crossovers between the industries. This was one of the most interesting sections:

“As time passes, more and more people adapt the new style, but unfortunately not all of them fully understand its underlying principles but nevertheless follow the external changes in the fashion. Thus, the new style has become mainstreamed. The pioneers get frustrated because their style does not serve as a differentiation signal anymore.

Reality and Web Design

The 2D web could become immersive, interactive and tangible. Imagine Wikipedia as an extensive multimedia library. Instead of reading about the Egyptian pyramids, you could wander around them, explore the inside of the pyramids, view the texture of blocks used to build it or solve a puzzle to gain access to the pharaoh’s tomb. You could even have a virtual guide accompanying you, narrating the history of the pyramids and answering questions. And all this while being accompanied by distinct ambient sound effects and sounds.

Not impressed?

What about surfing Amazon, searching for the ultimate wedding dress? You could try them on, see yourself from a 3D perspective. You could create multiple avatars to compare several dresses to could choose the one that fits and have it delivered in one day. Visit a virtual car dealer, test-drive the car, select options, tweak the seat position, see if it suits you and … summon it (Hello Tesla!). Science fiction? Twenty years ago, shopping on the internet was science fiction. Twenty years ago, the idea that you could watch the Olympic Games on your VR headset was equivalent to Star Trek’s holodeck.

The hardware to achieve this, while still in infancy, is here. HD cameras, 360-degree cameras, fast graphical processors and VR handsets are the pathfinders to a new era. Expensive, bulky and sluggish at this time, as the rate of adoption will rise, the hardware will get cheaper, smaller and faster.

Illustrator vs Sketch

The ever-expanding world of design can be tough to comprehend as a newcomer. With so many tools and techniques available it’s hard to know where to start.

Three of the most widely used design programs are Adobe Photoshop, Adobe Illustrator, and the newer Sketch by Bohemian Coding.

In this guide I want to compare these three titans of industry to see how they stack up for common design tasks. All three programs are incredible, but they each have their own strengths and weaknesses for certain creative tasks. One you know which tool best fits the task at hand you’ll have a much easier time learning and mastering digital design work.

 

UI Design

Interface design usually relates to websites and mobile apps, but can also include game UIs or any digital screen that takes user interaction.

For years Photoshop was the #1 choice for UI design. In PS you can build vector icons and textured backgrounds to mix into one common layout. But Photoshop was always intended to be a photo editing suite, and while Fireworks was better it has since been discontinued by Adobe.

This is where Sketch comes into play. The very first release of Sketch App was in late 2010. It has since grown massively with a large community fostering learning materials and entire websites dedicated to free Sketch resources.

When it comes to UI design Sketch is currently the king. This program’s purpose was to be a UI design suite for web & mobile. Patterns, textures, and vectors all intermingle with each other much easier than in Photoshop.

The only downside is that Windows users cannot run Sketch because it’s OS X exclusive.