Tag Archives: website designer

Flat as a Fiddle: 4 Benefits of Flat Web Design

Flat as a Fiddle- 4 Benefits of Flat Web Design

Just like the world of high fashion, web design has gone through several different trends during its relatively short existence. There was a time that simple flash animation was a pretty common sight on the internet. At the dawn of the 21st century, skeumorphism, a design language in which digital interface is made to closely mimic its real-life counterpart, a digital bookstore made to look like a bookshelf for example, briefly emerged as a leading trend before the world decided that a digital interface being limited to earthly restrictions kind of misses the point.

As a response to skeumorphism, the early 2010s ushered in a design trend that is still prevalent in today’s internet, referred to as flat design. Flat might be an adjective those in the music industry would like to avoid but it is actually one of the more functionally and aesthetically pleasing trend in web design. If you’ve ever used the oft-maligned Windows 8 OS, then you’re already familiar with how flat design looks like.

Flat design as a functional aesthetic

Flat design takes its name from the judicious use of two-dimensional characteristics, employing simple flat shapes as building blocks, contrasting color palette and noticeable typography to ensure a clean and minimalist interface. Flat design put its focus on the user’s experience. It aims to streamline user’s experience in order to provide optimum usability while still maintaining an aesthetically pleasing look.

Now, it’s true that the Windows 8 wasn’t favorably viewed by both the public and critics when it was first released but that’s more because it wasn’t a particularly good fit for mouse & keyboard users. Use it on a tablet or any touch-capable device and its brilliance shines through. Flat design came in part because of the world’s continuous shift into smartphones. With a much reduced screen real estate, web designers have to come up with a way to simplify navigation for users.

To do this, they look at the concept of minimalism and applied that similar line of thinking into the design of a user interface. As a result, flat design is stripped off of any frivolous features, displaying only the necessary elements for navigation to users. Using this approach results in a number of benefits for both the users and designers, functionally and aesthetically as well, which we’ll explore further in the article.

It’s highly flexible and modular

Because flat design relies on simple rectangular shapes and typography, it is highly modifiable by nature. It employs a grid-based design where things can be easily added or resized according to the whims of the designer, so long it doesn’t interfere with the user’s experience. The Windows 8 start menu and the pinned tiles in the Windows 10 is an example of this modular nature.

Content is still the focus on the modern internet and having an interface that allows you to mess with how that content is displayed without wrecking your website is a highly desirable characteristic for designers.

It fits perfectly with responsive design

Like what’s been stated above, Microsoft’s idea with Windows 8 is that it aims to present roughly the same experience to both smartphone users and traditional desktop users. As a result, Windows Phone 8, the mobile OS that was launched concurrently with the desktop OS, has the same interface as you’d find on desktop, only with slightly different layout and placement.

Because the interface is made up of smaller building blocks of rectangular shapes, adapting this interface to a smaller screen and different orientations (portrait and landscape) is simply a matter of resizing and placing these blocks differently, just like Lego pieces. This meshes well with the concept of responsive web design, in which a webpage adapts itself to the size and orientation of the screen it’s being displayed on to present the optimum experience for users.

It utilizes clean and functional design

Since it mostly relies on two main elements, rectangular shapes and typography, flat design won’t be confusing for users. The website for Wyss Institute, a bio-engineering research institute in America, employs a flat design for its main page, with news arranged in blocks akin to Windows 8.

To a lesser extent, the collection of information spread underneath, acting as introductory passages to what exactly the Wyss Institute stands for, employs a grid-based design as well. Each segment is placed within their own rectangular area. Flat design doesn’t always have to conform to the same uniform design language; brands can still build on the same principle of clean and functional design without looking similar to each other.

It is now an industry standard

While the unique applications vary from websites to websites, flat design works using the same underlining example. Using the same basic design saves users time by not having to adapt to another design language when they hop from one website to another. Think of it this way, if traffic lights around the world uses different colors instead of the same combination of red, yellow, and green, motorists would have problem when moving to another city.

Ask anyone who’s had to switch from right-hand drive vehicles to left-hand drive vehicles and I’m pretty sure cases of them opening the door on the passenger’s side instead of the driver’s side is pretty common.

Admittedly, flat design doesn’t give a lot of wiggle room for designers to be creative with their design, limiting customization to little more than colors and layouts. I prefer to consider this a good thing though. Brands should flex their creativity on contents while putting functionality considerations in their interface above all else. Flat web design achieves that goal while still enabling designers to achieve an aesthetically pleasing look, if done correctly.

Digital Makeover: 5 Steps to a Successful Web Redesign

web development tips

Every now and again, I got dressed for work or a wedding or whatever, look at myself at the mirror and says, to no one in particular, wouldn’t it be nice to try and style my hair a different way? We’ve all been there at some point in our lives. Whether it’s with our own looks, the way your kitchen is arranged or with how your phone’s home screen is styled, we’ve all had a moment where that makeover itch is waiting to be scratched and it’s no less true for web developers.

Planning a website makeover

When it comes to redesigning a website, sometimes the underlying reason isn’t purely about looks, it’s also about functionality. The realm of the worldwide web, just like every piece of technology in existence, progresses fairly rapidly. Take a look at how much Facebook has changed for example or compare the difference between the website of every American presidential candidate since 1996 for a more pronounced difference.

That is not to say that aesthetics doesn’t matter in a website redesign. Aesthetics or to use the cooler name, design language, is one of the core tenets of your brand identity. There are times when your company has tilted enough from its original purpose that a reformed identity would be needed, which means that it’s time for a redesign. Other times, it might simply because your design language hasn’t aged well, and a redesign is necessary to keep up with your competitors.

In the end, it doesn’t really matter what your reasoning is as long as it’s a good one. A redesign shouldn’t be approached haphazardly, even if it’s a minor one. When done wrong, the backlash, as has been proved by what happened to Snapchat earlier this year, could be detrimental. Both the planning and execution has to be done correctly in order to not mess with the user experience while still achieving your specific business goals.

Step 1: Identify what you want to achieve that’s currently not being met

Before you begin the makeover process, the first step you’ll have to take is outline what you would like to achieve from this redesign. These goals should always be concrete and not vague, ambiguous goals, such as because you’re bored of the current look. If it’s related to a new functionality, ask yourself if it’s important enough to warrant a redesign or if it’s something that could be added to the current design.

A redesign doesn’t always have to start from zero. You have to determine which part of your website works the way it was intended to and which is falling short. Keeping some of the old parts intact might save you both time and money once the actual work has started. This is the stage where you, as the business owner, need to determine whether this redesign is actually needed or not. Don’t forget to set an acceptable timeline for this process.

Step 2: Get an opinion from your users and/or a neutral third party

Once you’ve outline your own goals, the next step is to cross-reference your own goals with what your users want. They’re the ones who’ll be spending time in your website and if it turns out that what they want is in conflict with what you want, it might be a good time to reconsider your own position. This doesn’t mean that you should always take their word over your own, because actually, the customer isn’t always right.

People have a tendency to resist changes, even if those changes are actually in their benefit and even necessary in some cases. Apple’s idea of selling one song at a time when iTunes was first launched was unpopular within the industry but it proved to be a hit and managed to drive established businesses like Tower Records to bankruptcy. If you have the necessary data to backup your views over the customer’s, it might be worth it to stick to your guns.

Step 3: Figure out the sitemap and information architecture

Once you have an idea on how your website is going to look, the next step is to design the layout of the pages in that website and how they connect to each other. You do this by using the concept of information architecture that maps the hierarchy of every page in your website and how they interact with each other. Think of these as the foundation for your website, something you have to take care of first before you could paint and decorate them.

Step 4: Start the design process, with a focus on your homepage

Whenever you go on a first date, a great first impression is the number one thing you’re striving for. Every subsequent interaction will always be informed by what you think of your partner in those first few moments. Transplanting that idea into the world of web development, that first impression is the kind of burden your homepage is going to carry. As such, always stress the importance of your homepage in your redesign.

Step 5: Prepare mockups and prototypes

Before you put pen to paper, do a simple prototype of all of the ideas you’ve accrued in the first 3 steps to see how they would work in real life. Great ideas don’t always translate well into the real world and it’s common for those ideas to require some fine tuning before they can be unleashed to the public. While it is possible for you to perform some on-the-fly changes to a website once it’s live, this is not advisable. Always make sure your product is fully prepped before they’re out.

Once you have your prototype and running, you can evaluate for yourself whether the design you’ve created works the way it was intended to. If you’re completely satisfied, you can proceed with the actual development according to the timeline you’ve set. If it doesn’t, which is more likely, then you could go back to any of the previous steps to figure out things that could be improved. Feel free to take your time with the redesign; it’s too important of a task to rush through.

Designing for Print vs. Digital Media: Feel the Difference Based on the Viewers’ Impression

Web design tips

Design projects may have different kinds of purposes. Whether it is a brochure design, web design, or even interior design, each has different purposes as to why it should be done. However, design has one thing in common when it comes to aim; clients’ satisfaction. Yes, every designer must have a design and practical thinking to a certain extent before diving into a project, because they should also think in clients’ perspective about how a design should be done. In this article, we are going to discuss about the difference between designing for print and designing for digital media. Keep reading to find out.

Viewers’ engagement

The interaction between your viewers and your design is expressed in a different way when it comes to screen and print. For digital mediums, you want to make sure your design is easily accessible, usable, navigable, intuitive and clear while entertaining at the same time. Also, many users arrive in a digital space with a particularly informative goal in mind. When you design for these users, your work should function to facilitate their goal in browsing so that they can get all the information they want to know without having to bounce from the space immediately after entry. In the digital world, there is actual data that can show how effective your design is. For this reason, there is often a statistical element at work alongside the creative design process.

However, in printed mediums, the environmental conditions of how a viewer will find your work can really depend on location and function. Sometimes it is unknown whether they will find your work or not, which can result in these questions; “Will they find my design?” or “Is it seen when they pass by?” or even “Will they even touch my design?”

Senses

Printed mediums give you the opportunity to engage viewers on a physical level. Aside from thinking about the imagination of what you design, you should also consider many of the physical aspects of the printing process. When it comes to printed designs, you should also consider the texture and weight of the paper, foam core or canvas print material. Embossed lettering and design is another way to evoke both visual complexity and the sense of touch.

As for digital designs, we may use our fingers to work on scrolling while viewing a digital design, but it doesn’t give you a sense of touch – it will only let you see visuals. That being said, you can use video and music so you can evoke emotions from your viewers both in audio and visual. Interactive elements can also work to simulate an immersive experience with your design.

That’s how you can feel the difference between printed designs and digital designs. Whether you need it or not, it all depends on your company’s needs. However, when you decide to choose one of them; at least try to make it when the time is right. For example, you are joining a relevant seasonal event to your business; you might want to design brochures to let people know what you are up to in this event. Try to make it more appealing with a choice of paper that can make it more unique and different even though it is just a brochure.