Sharpen Your Skills: The Value of Multidisciplinary Design

Design is everywhere; It is all around us.

Every time we look around, everything we see has been designed at some point. We design our environments, our food, our virtual spaces and even our bodies. Design is a critical form of human interaction.

The word design comes from the 16th-century Latin verb designare. Although, it has Middle French (desseign) and Italian (disegnare) roots too. Designare is a compound word consisting of de (out) and signare (to mark) and originally meant to mark out. Even though this meaning is not present anymore, we still use its metaphoric extensions. Today, we use design as a synonym of preparing, planning, sketching or fashioning artistically.

We all practice design when we make everyday decisions. This might include when we decide on which table to buy, how we should serve our food or which shirt we pick for a date. We use the word design more deliberately in a professional manner when regarding the process of shaping of what we see and how we interact with it. Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. It may involve considerable research, thought, modeling, interactive adjustment, and re-design.

Since all design work is rooted in a familiar language, practicing one discipline, therefore, means getting better at another. Such is the value of a multidisciplinary background. Our growth in a specific discipline can increase our general design intuition simultaneously.

How does your multidisciplinary background affect your design skill set?

Concerning aesthetics, design is closely related to fine art. However, design’s ultimate goal is to provide theuser usability within the boundaries of a curated experience (more specifically graphic designs, user interfaces, etc.). Design converts emotion into an experience.

It’s also worth noting that since all design work shares the same cultural contexts and conditions at any given time, any design discipline is inherently affected by another. The designed world will always influence the designers which inhabit it. Ideally, designs of various disciplines should work together flawlessly to form a single curated experience. Understanding these connections could be essential.

My Multidisciplinary Design Background

For the designer, the act of design is so natural that most of the time we aren’t conscious of it. If I were asked “When did I start designing?”, I’m not sure that I could answer accurately. Many of us began in drawing, building and imagining as little children.

At some point, we define design practice as a professional discipline. In early schooling, I began with simple image editing, typography experiments, and web design, although all on a relatively low level. The same continued in high school with the addition of illustration and game design in my later years. Up until this point, I hadn’t put much serious thought into my work. It was natural, and artistic, but never really for any purpose.

Everything changed when I started my architectural design education. I learned about a true design process, the importance of concept and research, and that there are always endless design solutions for a problem. During my time, I became familiar with architectural, interior and urban design, and also improved my typographic and graphic skills. Here did I learn that how one presents a design can be just as important as the design itself.

Even though I studied architecture, I started experimenting with professional graphic design in early 2014. I took my entrance working on assets and illustrations, then got my hands on bigger scale projects of identity design, branding, and UI design at the end of the summer. Later, in 2015 I started doing UX design more and more frequently, and I ended up being the UI + UX design guy for many projects.

The Common Languages of Design

Only once I started my professional career did I realize how similar some aspects of these different disciplines are. There are corresponding elements throughout all the fields that—once learned properly—can develop an understanding of entirely new disciplines, and deepen the knowledge of existing ones. These elements include: the design process, such as research, conceptualizing, drafting, prototyping, redesigning, presenting, and so on. The more disciplines that you practise, you will better understand the core mechanics of them in a general sense.

Different design tools come from different disciplines.

There are also elements which can’t connect to any particular field, but to design in general. I’m talking about things like layout, contrast, and pattern. They are present in all design fields and serve as the tools we use to emphasize aspects of our design. We encounter them regularly in every creative process. Since they are always around, we shall deeply understand them. Neglecting or misusing them can be a real curse, while using them properly is a great strength.

I first realized how design knowledge accumulates when working on a runner game in early 2014. It went much smoother than I had expected, and I could also document the process very efficiently. Since my game design experience has never been too developed, I learned a lot of new things along the way, but I could also use the experience I gathered on different fields like graphic design, typography, branding, color selection and interface design. My initial fears evaporated as I realized that I already had the tools to solve the puzzle. This process is similar to what coders encounter: understanding the behavior and logic of a single language also develops a perspective and helps the understanding of others. Even though many things can differ between these languages, the concept is basically the same.

The Universal Design Process

There is a broad disagreement going on concerning what the ideal design process should be. Kees Dorst and Judith Dijkhuis agreed that “there are many ways of describing design processes” and discussed “two basic and fundamentally different ways”— the rational model and the evolutionary model. Although these models have their differences, their main role is to define the process of design and thus they can be used as the most fundamental bridge between disciplines.

The Rational Model

The rational model views the design process as a plan-driven, sequential progress through distinct stages. Here design is informed by research and knowledge in a controlled manner. The stages are pre-production design, design during production, post-production design and redesign, and consist of several smaller processes. The problem with this model is that most of the time designers don’t work this way, and assumptions could also be unrealistic as goals and requirements could shift as the design process goes on.

Although used rather rarely, this method acts as a base for many other design processes throughout the disciplines such as the waterfall model, systems development life cycle and much of the engineering design literature.

The Evolutionary Model

The evolutionary model is a more spontaneous approach consisting of many interrelated concepts. It posits that design is improvised without a defined sequence of stages—different stages of the process (analysis, design, and implementation) are all contemporary. Designers here use creativity and emotion to generate design possibilities. This model also sees design as informed by research and knowledge (just as the rational model), but these are brought into the design process through the judgment and common sense of the designer. Since this method is not hard-coded in term of stage order, it’s present in almost all of the disciplines. It’s basically a paradigm of how we design nowadays, and once we get the hang of it, it can be applied in any design process—making it the cornerstone of exploring new fields.

• 
• 
• 

How Multidisciplinary Design Improved My Skills

As I already mentioned, I was an amateur designer when I started university. I had no idea what a design process was, what should I look out for, or what to focus on. Our group’s first design task was to create three solid 5” cubes out of different materials. I chose two kinds of cardboard and gypsum as the materials and focused on shaping the cube as precisely as possible. It was only later in the class when I realized how else this task could have been handled. People made cubes out of layered glass, smaller wooden cubes or even metal planes. A girl from Kalocsa made her cube out of paprika—a nice homage to her hometown, where first records about the cultivation of paprika originate.

As my education continued, I learned what abstraction and concept meant in a design context. I prefer to make designs with straight-forward messages, sharp shapes, and high contrast. As a designer, to learn the merits of abstraction, and appropriately employ them can be a lifelong process. I’m still finding myself learning new things with new projects.

Abstraction is a really handy tool in the designer’s palette. To make something less in volume, density or complexity while communicating the same message is the way how the design of user interfaces and user experiences work today. Abstraction can also be about forming experiences or messages beyond the surface of perception. As well, communicating these messages with greater accessibility is essential in reaching bigger audiences. It’s also useful when designing new interfaces, logos, icons or any product due to the perspective of simplification it provides. As Ludwig Mies van der Rohe once said: “Less is more.”

My multi-disciplinary background also taught me that all sub-sections of a design should be equal. Much like how the elements of machine system determine the greater systems performance, the sum of the parts of a product also determines the quality of the holistic design. Therefore, it’s critical to provide respect the time required to develop all details carefully. In architecture even the tiniest of design mistakes can have a fatal outcome. A hole in the waterproofing, a slightly miscalculated steel value in a reinforced concrete structure or not knowing how some elements would change over time can ruin the whole design. The same goes for other fields of design. While they are not as fatal as a collapsing building, they can still implode a business.

Creating a logo without any concept, based on only current design trends could be such an issue for instance. A brand, whose logo, colors or style changes every other year is not providing enough time for its users to learn and recognize it. A good designer takes care of every aspect, every single little detail of the logo—things like brand history, target audience, message or placement. Mies also said “God is in the details”. This expresses the idea that whatever one does should be done thoroughly, and this describes the optimal design process very accurately.

The Importance of Design Research and Presentation

When we create new things or come up with a new concept, there is a probability that it has been either entirely or partially done by someone else. Looking for, and finding these examples can help our decision-making process and provide us with conductive experiences we can implement. Learning from others’ mistakes can also be helpful.

Designing something beautiful and thorough doesn’t always grant success. How one presents the product is just as important. Through my first semesters, I wasn’t really bothered about the presentation of my concepts. I spent very little time on the actual style of my presentations, but instead almost all of my time on the concept. Architecture, however, is a profession where you have to convince the client. You have to communicate in every possible channel that your solution is the perfect one. Presentation—as a channel—is a new opportunity to prove yourself and extend your concepts. To be able to serve your design in an appetizing manner, you must develop the skills to build a great presentation. These can include typography, color choice or composition—basically all graphic design skills that are also present in almost all other design disciplines. Being able to design good products and sell it as well can be a deadly combo.

You Don’t Need to Practice Everything

Knowing different disciplines doesn’t always mean that the designer needs to practice them all. Understanding their rules and how they function can be, in most cases, just as good. When designing a mobile interface, for instance, the designer should be aware of the design principles and usage rules of both the device and the platform, yet they don’t have to have past product designer experience to achieve a beautiful and fun UI. Having an idea about how things interact and when it is—and when it is not—necessary to know them in detail could be really helpful in all scenarios.

The Role of the Designer

When discussing designers, most people see them as design professionals with strong factual and procedural knowledge. Accurate knowledge refers to the essential elements that the designer must know to be acquainted with a discipline or solve problems in it: the knowledge of terminology and specific details and elements. Procedural knowledge is about how to do something such as subject-specific skills and methods, and also the knowledge of criteria for determining when to use appropriate procedures.

While this is true, designers also need to know the interrelationships among the basic elements within a larger structure (a single discipline, design in general, etc.) that enable them to function together (i.e. classifications, categories, principles, theories, models, structures) also known as conceptual knowledge. This knowledge is part of the common language of design as most of the areas it covers are easily translated between disciplines. Embracing the above concept can make the designer to be more aware of the whole design scene and can help transitioning between all disciplines more easily.

Conclusion

Design thinking is as old as human consciousness. We can explore and experience it, but it will always be able to reinvent itself and provide us with exciting new things. Being a designer means being able to explore, adapt and invent, and this starts with the understanding of the connections between the disciplines. “Exploration is the engine that drives innovation” as Edith Widder once said.

This article was written by Peter Varadi, a Toptal designer.

The Industry Could Do Without Pixel Density And PPI Marketing

A long, long time ago, I used to make a bit money on the side designing and printing business cards, along with ad materials and various documents. I was young and I needed the cash, and so did my buddy. Some of it went towards new hardware, while much of it was burned on 3-day barbecue binges, fuelled by cheap beer and brandy.

It didn’t take us long to realize the HP and Epson spec sheets, which proudly cited insanely high DPI for their printers and scanners, were as pointless as a Facebook share button on a kinky fetish site. So, we started using cheaper, older hardware other people didn’t want, and put the savings to good use: more meat and more booze. Fast forward twenty years, we still like to work hard and afford the finer things in life, and some of them were in part made possible by tech frugality. We didn’t buy into priter DPI poppycock back then, and we certainly couldn’t care less about display PPI today.

The evolution of high pixel density displays is about to stall, unless our eyes can evolve to keep up.

But your average consumer does. Oh yes, most of them still think they can actually see difference between 440 and 550 pixels per inch (PPI) on their latest gadget. I might have missed a few things over the past two decades, but either the human eye has evolved to such a degree that all kids and many millennials have better vision than ace fighter pilots, or they’re just delusional.

I’ll go with delusional, or at least immature, because I figured out my eyes weren’t that good when I was 15.

In this post I will try to explain what led the industry astray, and what developers and designers need to keep in mind when developing for this new breed of device. You may notice that I have some strong opinions on the subject, but this is not supposed to be a bland, unbiased report on a purely technical issue. The problem was not created by engineers, you’ll have to get in touch with marketing to find the responsible parties.

How Did The PPI Lunacy Get Started Anyway?

One word: Apple.

Apple was the catalyst, but it actually turned out to be the good guy in the long run. The real culprit was the Android mob.

Apple introduced the Retina marketing gimmick with the launch of the iPhone 4, which boasted a small, hi-res display that blew the competition out of the water. In fact, it still looks quite good, and there is a good reason for that: Our eyes couldn’t tell the difference in 2010, and guess what, they can’t tell the difference in 2015.

Apple may have started the high-PPI Retina craze, but the Android gang took it to absurdity.

Most people associate Retina displays with the density of the iPhone 4 display, which was 326 PPI (614,400 pixels on a 3.5-inch display). This is not inaccurate; saying that anything above 300 PPI can be considered a Retina display is more or less correct when talking about a mobile phone. The same metric cannot be applied to other devices because the typical viewing distance is different. Apple’s standard for mobile phones (at the time) was 10 to 12 inches, or 25 to 30 centimetres. The typical viewing distance for tablets is often cited at 15 inches or 38 centimetres, while desktop and notebook screens are viewed from about 20 inches (51 centimetres).

You can probably spot an issue here. Did you use your iPhone 4 at the typical 10-inch viewing distance? Maybe. But what about the iPhone 6 Plus, with two extra inches? Probably not. One of the good things about having an oversized phone is that you don’t need to bring it up to your face to view a notification or a message. Sometimes I don’t even pick my phone up, I just tap it next to my keyboard. Sometimes I pick it up and shoot off a short text without taking my wrist off the table, at desktop keyboard distance, which is much closer to what Apple had in mind for notebook and desktop screens than mobiles or even tablets.

Being the younger, insecure kids on the block, the Android gang quickly decided they had to do something about the iPhone 4. The response was swift and came in the form of 720p smartphones, with panels measuring 4.5 to 4.8 inches. When frustrated teens try to outdo someone else, they tend to overdo it, so a generation or two later, 1080p panels became mainstream, and they got bigger, 4.8 to 5.2 inches. The latest Samsung flagship, the Galaxy S6, boasts a 5.1-inch Quad HD Super AMOLED display, with a resolution of 2560 x 1440 and, wait for it, 577 PPI. There is just one thing: The panel uses a PenTile matrix, so many people would argue that it’s not really 2560x1440. Who cares, bigger numbers sell, right?

In Samsung’s defence, the Korean giant did create a use-case for such high resolution screens, sort of. It’s a simple and relatively inexpensive Virtual Reality solution dubbed Gear VR. Google Cardboard is more of the same, but Samsung seems to be taking the whole VR trend a bit more seriously.

The Invasion Of Oversized Androids

There was a bit of a problem with this approach. Like it or not, once you start chasing pixels, you are more likely to end up with a bigger screen. This means more backlighting, more GPU load, more juice, and a bigger battery. And, how many pixels does that leave us with anyway?

Well, for a 720p display, the phone has to render 921,600 pixels for every frame. That goes up to 2,073,600 for 1080p displays and culminates in 3,686,400 on a 1440p panel like the one used in the Galaxy S6. To go from 720p to 1440p, an application processor has to figure out what to do with four times as many pixels with each refresh cycle. This, obviously, isn’t very good for battery life although Samsung did a great job thanks to its efficient AMOLED technology and industry-leading 14nm SoC. However, the general trend was a vicious circle and many vendors simply keep making bigger screens, to hide the even bigger battery at the back.

Apple may have started the craze, but the real troublemakers are found elsewhere, hiding behind green droids.

We have already reached the ergonomic limit in terms of smartphone and tablet size.

I know what some of you are thinking: “But consumers want bigger phones!”

No. Consumers want whatever you tell them. That’s a fact.

In this case, the industry is telling them they want bigger phones, which are becoming so unwieldy that the next thing they’ll need are smartwatches, so they don’t have to drag their huge phablets from their pockets and purses. Convenient, is it not? Huge phones with insanely high pixel densities are a triumph of cunning marketing over sensible engineering.

Besides, people also want better battery life and we’re not seeing much progress in that department. The industry is tackling this issue with bigger batteries, some of which are almost powerful enough to jumpstart a car. I wonder what will happen when one of them, built by the lowest bidder, decides it’s had enough, springs a leak, or accidentally gets punctured?

That’s one of the reasons why I always found those tabloid headlines about smartphones stopping bullets so hilarious. Sure, it can happen under the right circumstances, but theoretically, you can also win the lottery and get struck by lightning when you go out to celebrate.

Instead Of Pointless PPI, Try Using PPD

While PPI has already been rendered a pointless metric, especially in the era of convertible, hybrid devices, the same cannot be said of pixels per degree (PPD). I think this is a much more accurate metric, and a more honest one at that.

Unlike PPI, which only deals with density, PPD takes viewing distance into account as well, so the same number makes sense on a smartwatch and a 27-inch desktop display. Here is how it works, taking the good old iPhone 4 as an example.

The device has a 326 PPI display and it’s supposed to be used 10 inches from the eye, you end up with 57.9 PPD at the centre of the image, going up to 58.5 PPD at the edge. This is almost at the limit of 20/20 vision. However, if you have better than 20/20 eyesight, you could theoretically benefit from a higher resolution. However, on a backlit screen, covered by smooth and reflective glass, with a pinch of anti-aliasing, few people could ever tell the difference.

The PPD formula is simple: 2dr tan(0.5°), where d is the viewing distance and r is the display resolution in pixels per unit length.

Before you start breaking out your trusty TI calculators, here’s an online PPD calculator you can use.

So, let’s see what happens with a 5.5-inch 1080p phablet (iPhone 6 Plus) if we change the viewing distance. At the standard 10 inches, we end up with 71.2 PPD, however, at 11 inches the number goes up dramatically, to 78.1 PPD. At 12 inches it stands at 85 PPD, and at 13 inches we see 91.9 PPD.

PPI is becoming a useless metric for designers and developers. PPD is the way to go.

Now let’s take a look at some cheap Androids with 720p panels. The visual density of a 5-incher at 10 inches is 52.1 PPD, but since I doubt the distance is realistic (if we are using the same distance for a 3.5-inch iPhone), let’s see what happens at 11 and 12 inches: we get 57.1 PPD and 62.2 PPD respectively. An entry-level 5.5-inch phablet with the same resolution has a density of 47.5 PPD at 10 inches, but at a more realistic 13 inches, we end up with 61.3 PPD. Granted, used at the same viewing distance as the iPhone 4, these numbers look bad, but few people will use these much bigger devices at the exact same distance.

So, why am I changing the viewing distance to begin with? As I pointed out earlier, that’s something most users do without even noticing, especially on Android phones. When I upgraded from a 4.7-inch Nexus to a 5-incher with capacitive buttons, I noticed a slight difference in the way I handled it. When I started playing around with a few 5.5-inch phablets and going back and forth between them, the difference became more apparent. Of course, it will depend on the user; someone might have the exact same viewing distance with a 4-inch Nexus S and a 6-inch Nexus 6, but I doubt it. This is particularly true of Android because the UI is more or less a one-size-fits-all affair and does not take into account the loads of different panel sizes out there. Since I am a fan of stock Android, the difference was even more apparent; Lollipop looks almost the same on a 4.7-inch Nexus 4 and a white-box 5.5-inch phablet.

Apple does it differently. Well, to be honest, Apple didn’t even have to do it until the launch of the iPhone 6 Plus because it only offered one screen size, which allowed it to optimize the user experience in no time.

• 
• 
• 

Why Pixel Density Matters

Why should developers and designers care about all this? It’s mostly a hardware thing, anyway. Developers have nothing to do with this mess, just let Google, Samsung, Motorola and Apple sort it out.

Devs and designers aren’t part of the problem, but they can be part of the solution.

Like it or not, we have to waste perfectly good clock cycles and milliamps on these power-hungry things. Unfortunately, apart from optimisation, there’s not much developers can do. All mobile apps should be optimised for low power anyway, so that doesn’t make a difference. Designers can’t take into account every single resolution on every single screen size when they polish their designs. At the exact same resolution, they might have to use virtually no anti-aliasing, or moderate anti-aliasing, or go all out with some really aggressive edge-softening. It all depends on the type of device and screen size, not the resolution.

This is trickier than it sounds. Using slightly different settings for 5-inch and 5.5-inch devices with standard resolution screens sounds easy enough, but it would only address one side of the problem. Will a tall, 40-year-old Swede use a 5.5-inch 1080p phone at the same eye distance as a 14-year-old Taiwanese teen chatting with her girlfriends? Of course not.

PPD and viewing distance depend on a number of factors. PPI is just one small part of the equation.

This, among other things, is why I’ve come to despise PPI. It’s become a useless marketing number; it does not provide consumers with accurate information when they purchase a new device, and from a developer’s perspective, the PPI arms race is doing more harm than good. It’s not making hardware better in a noticeable way, yet it’s making it more expensive and less efficient. It is no longer improving the user experience, either, and in some cases it is even degrading it.

A few years ago, mobile designers had to take into account a few standard Apple resolutions and a handful of Android resolutions and screen sizes. Now, they have to deal with Apple products in more aspect ratios, resolutions and pixel densities. Android, due to its trademark fragmentation, poses a lot more challenges than Apple or Windows (Phone). While the trend has been to inch towards bigger screens and higher resolutions, a lot of Android devices still ship with 4.x-inch screens, and sub-720p resolutions. Add to that a host of legacy devices, and you end up with a pool of green goo.

Ten Easy Ways Of Wrecking User Experience On High-Res Devices

Let’s take a look at how high PPI displays have a negative impact on user experience, starting with hardware and performance issues.

• Heavy websites are too demanding
• Battery life and durability may take a substantial hit
• Effect on storage, bandwidth, load times
• Games that would otherwise run smoothly become jerky
• SoC may be throttled, refresh rate lowered

Websites with a lot of demanding content, such as elaborate responsive sites, can be problematic even on underpowered desktops, let alone mobile devices. Five years ago, most of us relied on 1080p desktop displays and the iPhone 3GS had a 480x360 pixel display. Today, most people still use 1080p on desktop platforms, but at the same time they buy 1080p smartphones on the cheap. For some reason, people think it’s OK to place the same strain on a desktop and a $200 smartphone that has a fraction of the processing power. Toptal Software Engineer Vedran Aberle Tokic authored an excellent post dealing with problems caused by responsive websites on mobiles, so please check it out for more details.

High pixel density displays can cause performance issues without adding much to the visual experience.

Of course, as soon as you start pushing a smartphone or tablet to its limits, battery life takes a massive hit. So, now we have bigger batteries in our phones, and more powerful chargers, and wireless charging, and powerbanks; and we still run out of juice by sundown. This is not just an inconvenience; the battery has to endure more charging cycles, it degrades over time, and now that most smartphones ship with integrated batteries, this poses a problem for the average consumer.

Who cares if your app or website look marginally better than your competitors if they end up draining the battery faster? And, what if your gorgeous hi-res designs end up loading slower, taking up more storage, and sucking more bandwidth than the competition?

Games and other graphically demanding applications might benefit from higher resolutions, but they can also experience nasty performance issues. Casual games that don’t stress the GPU to its limits can look muchbetter in very high resolutions, and they can be smooth even on underpowered hardware. However, 3D games, even casual ones, are a different story.

I am no gamer, and it’s been more than a decade since I was hooked on a game (Civilization, of course). However, I recently discovered World of Tanks Blitz for Android, and experienced a relapse, so here is some anecdotal evidence.

The game is easy to master, fast-paced, doesn’t require wasting hours per match, and it combines my love of history, technology, trolling people and blowing stuff up. Since I never install games on my phone, I tried it out on a 2048x1536 Android tablet, powered by a 2.16GHz Intel Atom Z3736F processor with 2GB of RAM. UX is good; after all, this is a popular game from a big publisher. Prior to the last update, the system would set the graphics preferences automatically and I was happy with overall performance, about 30 FPS in most situations (dipping to 20+ in some situations). However, the last update allowed me to tweak graphics options manually, and then I got to see what I was missing out: much better water shaders, dynamic shadows, fancier particle effects and so on. I tweaked the settings a bit, but had to trade a lot of eye candy for performance.

With that particular hardware platform, the game would have been able to run at maxed out quality settings at 1024x768, at a substantially higher frame rate. In other words, my user experience would be better on a cheaper and slower device, with just one quarter of the pixels. Changing the resolution would obviously solve everything, but it can’t be done.

Reducing the load would also allow devices to run smoother for longer periods of time, without having to throttle their processors, automatically reduce screen brightness and so on. In some cases, hardware vendors even opted for lower screen refresh rates to preserve battery life and reduce load.

This brings us to aesthetics, and ways of messing up UX on hi-res devices that have nothing to do with performance issues:

• Reliance on rasterised vs. vector graphics
• Use of resampled images
• Viewing old low-res content
• Using legacy apps
• Inadequate or overly aggressive anti-aliasing

Although vector graphics play a prominent role in design, we still have to rely on rasterised images for a lot of stuff. Vector graphics are more or less useless for everyday content delivery. For example, when developers create a simple news reader app, it might look magnificent, even on a low budget, on all devices. However, if the content provider doesn’t do a good job, the sleek and sharp design will be ruined, with inadequate visual content, such as low resolution images and video, compression artefacts, bad anti-aliasing, and so on. If forced to reuse older images, they may be tempted to resample them, making an even bigger mess.

Even if your design looks good on high PPI devices, it can be ruined by substandard content.

The same goes for old content and apps. Not all websites look better on high resolution displays; not all websites are regularly updated to take advantage of new hardware. Ancient CSS does not look good on high PPI devices. Older apps can also misbehave, or end up with a broken UI.

Anti-aliasing can be another problem, but one of the ways of making sure it’s spot on is to rely on PPD rather than PPI. Of course, there is only so much developers and designers can do, especially if their products rely on third-party content, uploaded and maintained by the client.

Things Will Get Worse Before They Get Better

During any period of rapid tech evolution, teething problems are bound to occur. The fast pace of smartphone development and adoption has created numerous opportunities, along with more challenges for developers.

This high resolution race won’t go on for much longer; it’s impractical and becoming pointless. High-res screens are already shipping on low-cost devices, and the trend is going to slow down before it comes to a grinding halt. In the end, we will end up with a few standard resolutions from $200 to $1000 devices, and that’s it. There is a lot of room for improvement on other fronts, specifically, battery life and overall user experience.

Still, I think it’s a good idea to keep an eye on market trends and keep track of sales figures, just to be one step ahead and to know what to expect. It’s almost as important as tracking the spread of different OS versions and platform market share.

Unfortunately, there is not much developers and designers can do to tackle many of these issues. In my humble opinion, the best course of action is to keep clients in the loop, make them aware of potential issues beyond your control and issue clear guidelines on content that should be added to websites and mobile apps.

This article was written by NERMIN HAJDARBEGOVIC, a Toptal Editor.

Design A Better Website: Foundations First

How many times have you finished a project, only to look back and then say, “Man, if only I knew the things I know now and I could go back in time and redo it over again.” I know I have.

It happens to all of us; we get excited about a project. You make jokes with the client about the current website, contracts are signed and you start mocking up prototypes. On small projects you might get away with this. On big projects, changes and scope-creep will start sneaking up on you as soon as you do your first presentation. If you ever do end up launching your project, it will most likely resemble the monstrosity you were hired to fix. It might only just look a little better.

Good design and user experience begins not with a pretty mockup, or even layout, but with a concept foundation that focuses on company goals. And those goals are not “let’s make a prettier and simpler website.” Since you are responsible for UX and UI, (User Experience and User Interface) it’s your job to make sure users have the best experience through the interface that you design. To do that, everything has to be thoroughly planned out from the beginning.

Initial Website Design Research

After the initial research of the client’s field, as well as their competition, I inspect what we have to start with. I have a separate cost just for this analysis (it’s then included in final quote) before I ever quote a project. This avoids ambiguous high quotes with hope that it will cover whatever is discovered later.

Today my client is a non profit organization in an archaeology field. They explore and protect archaeological sites in the south west. Their current website is a monumental achievement in disorganization. Imagine mountains and mountains of unorganized horded content inside an ancient cms portal. Thus, the first step is to organize what we have.

Step 1: Familiarize Ourselves with the Content.

When you need to build a new house you don’t tear down the old one without first taking out things that are inside. Our first goal was to go inside all of the rooms, and take out all the content. In design speak, we needed to go inside and figure out what content deserves to be a unique post type and what pages are static.

We can then come up with a strategy on how to best organize this. The reason we are not checking to see what should stay and what should be removed first is because in the real world this can’t be done right away. There are different people responsible for different parts of the site and there is too much unsorted content. Our best bet is to classify it first.

I usually start with the main navigation and go page by page. This way, I have a site blueprint before the first meeting. This was not the case with this project, most links were not accessible through top navigation and where hidden within the content (you’d be in for a treat if you just quoted the project based off their navigation). Only by talking to different people on the client’s team was I able to get a better picture.

Finally, I had a brainstorming session with the client, where I asked them to identify their current website focus, workflow, site content and features. We then came up with the following core types (some are new and some were already in place):

The most difficult part was that the majority of links were not accessible through top navigation and were hidden within the content. Only by talking to different people on the client’s team was I able to get the whole picture.

Step 2: Create focus, simplify and organize.

Now that I had all of the content out of the house and placed it in boxes with labels, it was time to come up with the blueprint for a house that will showcase our content in its best form. Before we get to that though, we need to create focus.

According to the client, its users visit this archaeology website for research information about its projects, learn about ongoing events, as well as read its monthly magazine. Even though these content areas are where visitors end up, it’s not what the website revolves around; in order to find the focus, you have to look at the organization’s core.

I pinpointed that “location” is at the heart of all this content. Without location there would be no archaeological sites, ruins, museums or exhibits. At its core, everything in archaeology relates back to a location.

Now that we have our focus it’s time to simplify and organize. Next, I further broke down the content into things that were not related to locations, such as team pages, annual reports, and so on. After a little tidying up we ended up with this rough map:

As you can see now we have two core areas: “Things to Do” and “Locations.” “Things to Do” covers everything you can do in the organization while “Locations” focuses on content that’s related to a specific location. The idea is that an average user might not know the name of the video or a project but will likely know the location it relates to. For example, by going to a projects page, a visitor will find the desired project through its location.

Additionally, each color represents a unique post type. I realized that from an organizational perspective, events, exhibits, classes and online exhibits are all, essentially, events, just different kinds.

In the current site there was a static page for a magazine as well as a store page. I decided to eliminate the extra step of going to the store page and, instead, have a unique template for magazine store items. The rest is pretty straight forward: An about page to learn about the organization; a direct link to the store; a donate page (because those pages make money and need a place in the main nave), plus new pages for updates and a direct link to the store/donate. Those pages make money, so they deserve a place in the main navigation. We have created our organization blueprint, now it’s time to connect actual content to it.

Step 3: Looping in the Client

As you can see from the site map above, it only includes the page types but not the mapping of content. And, as you probably already know, most of issues occur when the client starts adding content to its site. To avoid this, the client is looped in from the beginning. I created a Google doc that included the sitemap above and asked the client to map its current content to the new structure.

If something didn’t fit we figured it out later. This is a critical step as it not only gets the client involved but it uncovers issues with structure before implementation begins. In this case, some of the site map menu items were changed, and since the client also had many different donation pages, it made sense to create a unique post type just for that.

Creating Visual Structure Through Wireframing

Now, it’s time to give all this a visual structure. To have the system function successfully, and to take the idea of “everything is related to location” correctly, I created a bidirectional relationship between post types.

The idea is this: When a visitor comes to this archeology website and picks the Grand Canyon, not only will she see information about that location, but will also find the projects, events, exhibits and anything else that the client marked as related to that location. Since the link is bidirectional, visitors will also get to the Grand Canyon from visiting a project page, too. So, I ended up with this:

The locations index page showcases all locations with the most recent at the top. The search bar is the first thing the user sees when they get to the page. I envision that upon entrance the google map will take up around 80% of the screen, so users can pick points on the map, then as they scroll or search the list grid will come into view.

On a single location page main body is on the left, since it’s the most important information and related meta information is secondary, so it’s on the right. When designing a layout, to achieve good composition you always want to have very distinct primary, secondary and third element blocks. This way your eye will follow from one to another instead of getting stuck on a page.

Therefore, in our layout, the user’s eyes will start with the header, then move to the content block, followed by the right sidebar. Each piece of related content is displayed in order of relevance and importance. If the user is reading about the Grand Canyon, for instance, it will likely be followed by photos and a map.

This is chiefly an educational site, so “Related to this location” comes next. Since the client doesn’t have much that’s uniquely associated with each location, I combined seldomly used related content into a single block under the body.

Placing magazine and video thumbs under related content adds additional visual elements and directs users to the “buy” page. The page is completed by showing related locations since this entices users to further explore the site.

The next step is to continue this structure for other post types. Here are a few of them:

Now that I have a general model for the post types, I can focus on the home page. Just as with all UI, the first step is coming up with the goal for the home page. The client’s research showed that many users stumble upon the site without fully understanding what it is. Therefore, an introduction and welcoming text needs to be the first thing users see. The new, core focus revolves around locations and that should be the secondary block, followed by what’s going on at ArchaeologySouthwest.org (the current magazine, blog, events, newsletter and so on). Here is the iteration of the layout process:

With V1, I came up with a basic layout that resembles the original homepage. There is not much hierarchy; the first thing a user will see is the featured location and then he will get lost in the columns. With V2, I created a separate column that makes it easier for the eyes to follow. However, it can still be improved. This is where knowledge of the content plays a major role. I know that ArchaeologySouthwest.org doesn’t have more than two events going on at a time, so it doesn’t make sense to have many on the home page. In V3, I focused on the upcoming events so that if there will be more than two, the user can click a ”More” button and see the rest. I also put additional emphasis on the current magazine since it’s the client’s moneymaker. Users start at the top and using an F-pattern, move down. So now, the eye flow is Featured Location > Welcome > Magazine > Events > News.

Now that I have a visual wireframe and structure of the site it’s much easier to solidify features and how things will work. I have another meeting with client to go over actual functionality (which now comes to light) and flow of user interaction. I know there are still going to be tweaks in the end, but they will be tweaks and not entire process changes. Most important is that there will be no surprises.

Website Design

Now comes the exciting part. Converting the wireframes to something that people will use and experience. Using this design, I wanted to reinforce the flow further by using brands colors and typography. The client’s style guide is as follows:

Start with Typography

Typography is the foundation of a good design, that’s why we figure it out early. Most of their identity uses Univers Condensed Light and Adobe Caslon font. There were no rules on when Adobe Caslon was to be used, but I noticed that it wasn’t used as often as Universe. I conducted a small font study to see what pairings create the best feel for a professional humble non-profit organization without looking too different from their current collateral.

Upon doing font comparisons, it’s clear that Adobe Caslon will work great as a title font, and Universe for sub titles. By having our main titles in sentence case gives the brand a more personal feel. Having it in all caps makes Archaeology feel too much like a corporate institution.

For main headings I’ll use Adobe Caslon, and use Univers Condensed Light for everything else to match their current branding collateral.

Creating the Look and Feel of the Website

I wanted to create a light and open experience for users who should feel that this nonprofit organization takes them seriously without being cold and corporate. Based on analytics data, the majority of visitors arrive from desktops (probably because most people visit the site for research) and therefore, my initial focus was on designing for desktop users. This turned out to be the final design:

When arriving from a desktop, I wanted users to see immediately the featured location, welcome text and the upcoming events followed by part of the magazine title. This way people see what the company is about, and what they are promoting before they have to scroll on most laptop devices. By using a soft shadow on the left column it gives it more focus and solidifies the hierarchy.

On mobile devices, the priorities are a little different; since users are accessing information on the go, the Events are more important so they are higher on the list. The complete layout ends up like this:

I updated the donation button in the footer to be more friendly by changing it into a sentence instead of a button.

Creating the Rest

I can then apply this design concept into our other layouts as well.

We know for certain that users come to the details page for two reasons: either they want to learn more about the landmark, or they already know about this location and are just looking for information (directions, phone numbers etc). Therefore it’s important to present both options right away so our users are not searching for it.

I decided to break out the details column out of content area to give it more weight as well as make the page more interesting. This helps to create a compositional hierarchy so when user comes to the page they see the title first followed by gallery images and then meta details column. This insures that they will notice additional meta information right away. A little bit extra padding the column keeps the eyes within it and makes it easier to skim down through information.

The client does not plan to have many videos and magazines related to each location, therefore we are only showcasing 2 items and if there is more they can click the link.

The Mobile view collapses as you would expect with the content wiping first, and then the meta information. I made the videos and magazines last on our mobile page since they are least important for mobile users. Other inner sections follow this same structure and wireframes to create a consistent flow and experience.

Looking back at the design process you can see that the majority of the time was spent organizing and planning. Whereas only 30% of the time was spent actually designing. Often when designers show their work, they are dishonest about how much time is spent on google docs organizing, rather than doing pretty mock ups. Thus, many other designers jump straight into mock ups and end up with derailed projects and unhappy clients. There is no one way to plan, it just has to be done if you want to have a successful project. Let me know what your process is, and how it differs - I’m excited to see the workflows of others.

This post was written by Alex Guverich, Toptal Freelance Designer