Arranging and Designing Synchronized User Interfaces
Over 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
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.
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.
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?
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.
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.
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.
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.
Conclusion
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.
Source http://webdesignledger.com/?p=11072Tue, 16 Aug 2011 04:55:27 GMT
Tags: Tips, UX, web design,
Over 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
Related Tags: Tips
How to Design a Proper Banner – One That Actually Works
Let’s address the big pink elephant in the room first. Banners are not dead. They’re not on life support either. They’re doing fine and they’re going to be around for a while. They’re doing fine mostly because of their new ho
Legal Guidelines for Freelance Web Designers
Handling the legal side of freelancing could possibly be one of the more annoying tasks required for the job. Having worked as a full-time freelancer I can attest the amount of legal paperwork and information can become overwhelming, especially for newbie
HTML5 & CSS3: Take Your Design to Another Level
While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look
Related Tags: UX
Related Tags: web design
New Year’s Resolutions for Your Website
The end of 2010 is quickly approaching. That means a fresh start for a new year filled with possibilities. Everyone makes personal resolutions that vary from spending more time with family, starting a fitness routine, or quitting smoking. These are great
30 Examples of Big Backgrounds in Web Design – Round 2
Four months ago, we showcased 30 Examples of Big Backgrounds in Web Design, and we can say that the trend surrounding big images as backgrounds is still hot. As we noticed that a number of new websites were using big backgrounds, we decided to do a fresh
25 Tasty Restaurant and Food Websites to Inspire You
Restaurant and food related websites are always inspiring. Elegant layouts and beautiful images are pretty common to this kind of site. Last year we showcased 40 Tasty Restaurant Websites to Inspire You and since then, there have been plenty of good food
Need Interactive Website Design? Check out our member profiles:
Offering Proven Effective Marketing Services for Real Estate Professionals, Custom Web Site Design, Real Estate property and personal promotion. Virtual Tours, Direct Mail Campaigns, and more.
apache Junction , Arizona US
SERVING ALL OF IOWA - Professional, Customized, Search Engine Optimized Websites. Typical price range is $175 - $5,000. OTHER SERVICES INCLUDE: Logo Design, Graphic Design / Print Design, and Search E
des Moines , Iowa US
You need a great website that will be seen by your potential customers that are ready to buy. We will get your site to be seen by your customers, or build you a brand new optimized site that will buil
Peoria , Arizona US
SuOakes Graphic Design, Your Personal Design Source Graphic communications for the small business without an in house art dept. You need a unique, professional image, not one right out of the can. I'l
Lake Worth , Florida US
New Hampshire based website design and marketing company specializing in services for small businesses or entrepreneurs. Affordable, reliable and creative, our focus is meeting the marketing needs of
Claremont , New Hampshire US
Your small business web site solution starts here. Let's build a relationship. Professional custom workmanship. Personal & friendly service. Call today to schedule your free consultation.
Saint Paul , Minnesota US
SERVING ALL OF MICHIGAN - Professional, Customized, Search Engine Optimized Websites. Typical price range is $175 - $5,000. OTHER SERVICES INCLUDE: Logo Design, Graphic Design / Print Design, and
detroit , Michigan USOver 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
Get 8 Free Bids:
Service
Location:
Budget:
Deadline:
Compare:
Get 8 Free Bids:
Service
Location:
Budget:
Deadline:
Compare:
20 Fresh Icon Design Photoshop Tutorials
20 Fresh Icon Design Photoshop Tutorials
25 Beautiful & Inspiring Navigation Menus
The importance of a website’s navigation shouldn’t be overlooked. After all, without it,
Camalien watch can sport different colors just like the reptile it's named after
Radhicka S Saxena: Inspired from the much spoken about newt that changes the color of its skin, the
Dancing Dragons Complex blends traditional Korean culture with modern architecture
Jaspreet Kaur Walia: South Korea is about to get another architectural marvel in the form of Dancing
IBM’s supercomputer to crack the big bang
Radhicka S Saxena: The big bang theory has intrigued so many people and the fascination to find out
Article Tags
Interactive Website Design Articles
Lifestyle
Inspiration
Designers
Concepts
gadgets
Freelancing
Freelancers Union
All Posts
Writers
web design
architecture
Featured
design
Marketing
Transportation
Tips
Premium
Illustrators
Freebies
Friends:
Ecommerce Web Design