Helpful Design Principles To Use When Redesigning A Website

by Charlie Fuentes

Thoughts to keep in mind

• What story do you want to tell?

• What types of media assets do you want to use to tell your story?

• Think about the sequencing of components.

• How will you arrange your media/components visually and

cinematically to tell your story?

• How do you want to guide your audience through the

interactive journey?

• Will the call-to-action button need to be pinned to one place

or can it be in the final frame?

Finding the right platform

First, decide the purpose of your site! Figure out whether it’s a store? Portfolio? Blog? Newsfeed? There are so many site-building apps available! Among them are WordPress, Squarespace, Wix, Muse, and Dreamweaver.

• Unique design with no coding versus CMS

The only app that handles content management and word relevance is WordPress. However, the other apps, in some cases, provide more templates. They’ve also been known to offer friendlier interfaces, more freedom. For example: Muse, enables designers the ability to create websites without using code. Prioritize your needs and pick the platform that’s going to allow your website to perform at it’s best.

Categorize your content

Overloading web visitors with content is unforgiving. However there are several tools and principles that can combat the challenge of creating a content-rich site. White space is always inviting and the organization of your information is what keeps visitors looking around. Visual categories within grids can provide a consistent flow and structure that helps reduce the effort required to process the information. Hierarchy of information is vital to retaining your visitors.

Defining web assets

Today most web browsing is done over mobile devices. When defining assets such as your menu bar, image carrousel, videos, map, live chat, etc., one should consider how and when to display assets across all devices. What may have seemed to be an organized and systematic website on a desktop computer can quickly turn into a dysfunctional mobile site if the assets aren’t considered prior to the build. Site navigation often needs to be restructured, resized, repositioned, and in certain cases removed when converting from desktop to a mobile execution.

• Responsive is king!

Everyone has by now caught on to the trend of responsive websites. For those of you who haven’t, it’s an approach to web design where all elements of the site are on a fluid grid. The units of measurement for everything on your site are based on percentage and not on a fixed value. This means that your layout will adapt to the viewing environment.

• Menu items and functionality

Common menu bars are usually pinned straight across the top of most websites. With mobile devices, one may have noticed that menu bars now disappear or minimize. Scrolling now determines when to display certain menu items or assets.

Draft your execution.

Don’t skip the pencil sketch! It can potentially save you hours of designing around in circles. If you can’t draw, stop and consider your objective. Visualize a plan by using basic shapes; it doesn’t have to be pretty. A person with bad handwriting can still write down an idea. So a person that can’t draw should be able to sketch out a concept…right?

Mapping out the site navigation

Adobe Xd Experience Design CC (Beta) is the latest software developed for bringing those concept sketches to life. Yet, don’t take my word for it! Check it out yourself: Adobe Xd Experience Design

Just to put it out there, if you’re building a portfolio site or website that is not content heavy then perhaps you can skip the digital mapping and resort to your pencil sketches for reference. The Adobe Experience Design app is for intense websites that are dense and packed with information. This app will help you layout your pages and check your links to see if they’d all hypothetically work before actually taking your site live.

Be sure to make your site thumb friendly

Nowadays scrolling on mobile devices is the most preferred method of web surfing! In web design we are increasingly seeing the use of long scrolling pages and vertical layouts on websites. Clicking on buttons to navigate through different site pages is a thing of the past. People have adapted to long scroll-down navigation. The use of vertical layouts and scrolling within a web page also has other advantages across all platforms. Aside from functionality, long pages can be a great for telling stories because they guide visitors from section to section.

Scroll wins over click

Usability studies have long shown that scrolling to consume content is generally faster than clicking. It is faster to scroll than to click, this is especially true for users viewing your website on a smartphones or when using a slow limited data network, when scrolling will always be preferred over loading a whole new page.

Hope you found this page to be useful, informative, and entertaining. Let me know your thoughts? Please send your emails to cfuen040@fiu.edu or post your comments on my facebook page: Charlie Fuentes Blog Page.