Arranging and Designing Synchronized User Interfaces

By / Aug 16, 2011 / Tips

In the design field there is a deep understanding of intuition vs science. Often designers will stress when trying to perfect a layout. This could be within sizes, positioning, page structure, color theory, or a whole host of other categories. But as you mature your design senses grow with you, making it a lot easier to craft pixel-perfect interfaces.

San Francisco, California skyline photo

Below I’ll be going into some great tips for UI designers. We’ll mostly be focusing on designing for the web (browser-based apps). But mobile designers may take to heart a lot of the same information. And since intuition can only carry you so far, it helps to take a step back and understand the more methodological processes of interface coordination. You don’t need to know anything about Adobe Photoshop or HTML to understand this article, but it certainly won’t hurt!

Question your Processes

We all get stuck into loops. Or as we prefer to call them, schedules. These are the daily routines we follow through to get our objectives completed. There’s nothing inherently wrong with this, but how often do you stop to question yourself? This is an important part of growing as an interface designer and as a person.

Sketches of design work for page layouts

Since we use tons of interfaces every day it seems like we’d understand how they work best. And from a designer’s perspective, analyzing websites can give you some great ideas towards structuring your own projects. But when you take a step back you begin to notice that not all interfaces are created equal. Below is a small list of some questions you should ponder:

  • What are my users’ goals on this page?
  • How can I make it easier for the user to complete their goal?
  • What are the most important aspects of this page? should I remove or add anything?
  • Is there possibly a better/quicker way to do this current task?
  • Who else has done something like this on their website? Should my functionality mimic theirs in any way?

If you can put aside 5-10 minutes to think about these questions you’ll surely come to a sound conclusion. You should take note that ultimately any website is being created for the user’s sake. It doesn’t really matter how perfect or spicy the page looks, only that it works in simplicity.

Lock Down your Objectives

It helps to come into the process masking yourself as an anonymous user. Pretend you are any standard user logging onto your website. What goals are you looking to accomplish right from the home page? Can you currently find where you need to go for these?

Retro-style vintage cameras

The answers may surprise you. And they will vary from each type of website or web application. Sometimes users are looking to update their profile, or maybe upload photos. Other times visitors may be looking for a specific page. There are a lot of websites which strictly offer information – how quickly can you find the page you’re looking for? And subsequently, how quickly can you spot the information in text?

If it would be easier, try listing out a flow chart for a mock set of user interactions. Create a few aliases and give them objectives to complete on your website. Then either write or type a flow chart for each of their clicks and actions to get where they need to go. In this process you may notice some glaring flaws in your design work. This is by far one of the most useful techniques for nailing down some of your poorer interface choices.

While going through your pages also consider each section of typography. Are the fonts large enough, maybe even too small? This one is a bit more tricky since you likely can’t mimic the conditions of your users. Everybody is on a different type of system running many varying monitor resolutions. But you can at least get an idea of how your fonts display in the average web browser. From there you can update with slick new font styles to match your template design.

Arranging Page Elements

This is a really big aspect to consider on each of your pages. Most likely you’ll be running a mock design template which mirrors itself on each page. This means many of the overhead details will stay the same from page-to-page: headers, navigation bar, any sidebars, etc.

Things for iPhone - digital To-Do list

Since you’re always looking at the same template you may personally gloss over awkward layout elements. Try bringing in a colleague or friend for suggestions. You don’t need to apply their changes, but getting a 3rd party to look over your design gives you some external perspective into the issue. Just keeping things simple will always work in your favor. Users like things simple and easy to access, which also gives you less work.

Try also to remove cluttered areas with buttons and links scrunched together. When you first land on the page what grabs your attention? This should be whatever your users are most likely looking for! If that’s content, make sure your headings stand out bold and proud. Maybe your users will be looking to register or log into your website. If that’s the case don’t throw a form down into your sidebar, make sure it’s easy to find and work with.

Mobile App Instagram - Team HQ in San Francisco

If possible try sketching a basic mockup of your website components. You don’t need to match any color settings or detailed graphics. Just boxes with labels and maybe some arrows to describe the page flow (drop-down menus or other jQuery effects). Synchronicity is key here. Whatever changes you decide to apply should be site-wide. This rule can be excluded if you’re working with many different types of pages.

For example, a portfolio gallery will look much different than a user profile page. This is because the people viewing these pages will have completely opposing goals. You should certainly try to match colors, buttons, and at least your heading area to reduce confusion. Toying around with a mockup in Photoshop can give you a lot of ideas for these different page layouts.

Gathering User Feedback

Every web designer should understand that user feedback is vitally important. It may be the most important part of your contacts on any website. Without visitors, your website is just a lonely part of the World Wide Web. So their opinions may not always be perfect, or even good, but you should always make it possible for users to offer their feedback. Particularly in the simplest fashion you can.

Donald Duck synced in a Toy Shelf

If you know how to develop small contact forms PHP is a versatile language. Although for WordPress users there are many alternatives. Even if you can’t use either, just adding an e-mail address somewhere onto your site makes it much simpler for user contact. If you’re a passionate UX designer you may even consider adding an entire page dedicated to user feedback and bug reports! It’s a great way for startups to pinpoint errors in their design with their userbase as a free market.


Arranging perfect and harmonious user interfaces is a very difficult task. By no means is anybody the perfect web designer. It does take years of practice to fully understand the mechanics behind digital graphics and design theory. But you don’t need a degree to understand how user experience works.

This article should have gotten you thinking into some new realms of creation. Approach each website you visit with a keen eye, and try to take away some perspective for your own designs. If you have suggestions or ideas for synchronizing web interfaces please offer them in the comments area below.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at

  • Johnny T

    Thanks for this, I am working on a crazy interface for a launch and a lot of misc things get in the way of what I really want to do. WDL always has the right articles at the right time of year.

  • Anne Dorko

    This is perfect timing! I am experimenting with my first responsive design layout for my blog and I’ve needed some interface workflow inspiration.

    I think it’s most important to be able to remember what each page’s goal is and make sure everything fits into that goal.

  • xx89

    Thank you!! Finally something other than “look at these cool websites” and random photography collections.