More

Wealth and Wisdom Presentation Builder

Wealth and Wisdom needed a presentation builder to help their users communicate with their clients. The idea was to put in place a gallery for the user to browse thumbnails of the pre-produced slides and demonstrations to be previewed.

Published in Blog

 

Making a good interface is essential to enhancing the user experience on a website. Many of the technologies we use and choose to implement on our websites we choose because of the effectiveness of the user interface.

 

 


 

 

 

01

Simplicity

The design should always keep in mind the function. The function of the interface, be it a graphical representation of data or to move an input from the user to something actionable like a contact form, has to be top priority. Lately the "flat" style has been the trend.

02

Clarity

The interface should be clear in its intent and in its function. It should inform the user as to "what does this thing do" without getting in the way of the function. So in designing graphic user interfaces (GUIs) the interface itself has to be self-evident.

03

Brevity

Over complicating the design with guides and finely nuanced prompts gets in the way of the overall goal which is the function of the GUI. Development should be brief and great thought should be put into the most concise way of explaining things.

04

Playfulness


Remember, your users are just like you and like to explore and discover. So there has to be an element of fun and play involved. This is what some people describe as "cool" or "neat." Simplifying the experience to those two words is proof that you have a playful design. There should be motion, cause and effect, rewards for actions that are stimulating but subtle.

05

Familiarity

One of the worst things a design can incorporate is being too off the wall or revolutionary. If there is no known analog to "how it works" then the user is likely to become confused and give up interacting with the GUI. There is a reason why we use "sliders" and "buttons" and "pins" (not to mention "desktops, folders and files"): We have a real-life tactile substitute. This makes designing and developing the software for GUIs challenging to say the least. You have to walk a fine line between pushing the envelope and pulling the rest of us along with you.

06

Speed

If you click on something and it doesn't "just happen" then you're sunk. As a GUI designer you have to understand that the way you want things to work is the way people want things to work. In the real world, there are often nearly instantaneous interactions with the environment. Strike the knife against the stalk and it cuts, leaving you with an ear of corn. Cause and effect. Reward for stimulus has to be incorporated into the interface.

  

07

Responsive

Does the interface "talk back"? When a user starts an action, there should be some response by the interface. Haptic controls give you touch, the sound effects give you sound, and of course the eyes see "what happens" when a user (you)  take an action. Responsive also applies to the platform that the interface will be seen on. If you see it on a laptop, that's one thing. (See this article). If you see it on a tablet, that's another. It's not a turn of phrase, the screen size varies and the relationship of the elements of the interface have to be responsive to the platform that the information is seen on. That often times means creating different platform regimes with your style/css and hierarchy of priorities for each expected device resolution.

 

08

Clean

Clean is a cousin of Brevity, but this is a word that is often used but most of the time...misused. It doesn't mean no graphics, in fact that's the quickest way to boring. Studies have shown that people love graphics and artwork, and respond in the same ways that they respond to other media: It elicits emotional responses. Clean means an appropriate balance between visual and coded information (graphics vs. text). We're pattern seekers, and crave balance and so clean means in correct balance.

The problem with Clean is that it is subjective. Everyone's idea of what constitutes this design metric is different. The best way to proceed here is developing the aesthetic that comes from application of the other principles. If it does come together, then it becomes clean to most users.

 

09

The Sizzle-Sexy

The wow factor has to be there. Great interfaces make users happy. If the application of the previous principles are deft then the interface will be hot...

...or not.

It has to at the very least live up to the current expectations for the audience/user. If the interface is going to be blah then at least it has to be modern-blah. "Modern-Blah" is when it meets expectations but doesn't give any additional stimulus or thrill of discovery.  "Modern-Blah" is the status quo right before it becomes passé

 

10

Succinct

Get to the point should be the point of the interface. If it's too cute by half then it's a waste of time to design or to use. There is rarely anything more annoying than unnecessary or superfluous functions or tricks. Page turned corners, aggressive use of sound effects, and self-starting media distracts from the function. Each design should be simple and succinct.

 

11

Comforting

The interface should be comforting enough so that the user doesn't feel that if they DO something that they can't UNDO it. No one wants to make a mistake or do something they didn't want to do. Giving the user the option to correct their mistakes within a certain period of time allows them to change their mind. It's forgiving. Above all, it's there to aid the user.

 

There are designs for interfaces all over the place. Just about anything you use as a tool, in essence, is a user interface. It's important to a designer to keep in mind that it's a tool. A tool has to be functional and work as designed. There are many tools out there, from awesome open source interfaces that are plug-n-play to custom interfaces like the ones we design for clients. We love the availability of tools that are out there, and we use a mix of our own and other's designs. A good tool is a good tool. If it follows the guide above, it will likely be "cool" enough to be used again and again.

And that's what makes a great graphic user interface design.

Published in Software Stories

Designing a website from scratch requires a lot of forethought and preparation. There are quite a few factors that determine what functions, look and invariably the cost of the website. You have to decide what types of technologies you use, what languages you want to program in, and most importantly: What the heck is this thing supposed to do?

 

That's a good place to start.

Information Architecture is the tech you use to accomplish your site's goals. At Tucknologies we usually start right here...determining what types of architecture is needed to pull off the job. What server operating system? What type of CMS is to be used, or do we develop one? What database software are we going to use? There are dozens of questions that need to be answered. Picking the development language is usually the first step.

There are a lot of choices

Think of the computing environment as two ecosystems. One, is the Server and that exists at some point down the line from you, on someone else's machine. The second, is the Client side. That happens on your machine and right in front of your eyes. So when we talk about the languages to develop in, we're primarily concerned with the Server side. I say primarily, since the client side is limited in choices and almost all of the server side languages need the client side to work properly.

For example, the client side languages are Ajax, HTML 5, CSS, Javascript, and Flash to name a few. The server side, with languages such as PHP, Python, Ruby on Rails, .NET, ASP and Java for example; handle the heavy lifting behind the scenes. These server side languages do most of the compiling and calculations. The client side programs generally handle the sending and receiving of information, changes to the active state, and other rich-media applications.

To pick one over the other usually is a decision based on the developer's experience in the particular language.  Each has its own hiccups and idiosyncrasies. Some are better handling certain types of processes than others. We don't favor one or the other, we try to develop in a bunch of different languages. But for the purpose of this article, we'll provide insight on a few of them.

 

PHP

PHP or "Hypertext Preprocessor" is a free, open source software system. It requires the PHP license (easy to acquire) and writes a lot like C. In fact, most developers consider the syntax to be a lot like Perl. This MVC (model, view, controller) is quite robust and is used in a lot of programs. We have developed quite a few technologies with this language.

ASP

ASP is the Microsoft development language and is available free from Microsoft. It's a well known language that is free and supported by an industry giant, but it does require you to use .NET as well. The syntax varies, and it's hard to point to ASP and compare it to another language...since it varies so much. There is an API for it, that's through Microsoft.

Cold Fusion

 

ColdFusion is a great enterprise software suite. It's from Adobe, and we here @Tucknologies absolutely love the Adobe. (I think we all have some form of CS on our machines!) It's not free...and that's usually the hang up. It costs you $1,299 to buy...but the developer's edition is free. The license is through Adobe, which always gives you that extra piece of mind. It's XML based, so if you know that you'll be able to cruise in Cold Fusion. One of the pluses is that Cold Fusion integrates with the Adobe technologies like AIR. If your hosting provider offers Cold Fusion to you as an extra cost to your hosting fee...take it!

 

Python

This Python is nothing to be scared of: The language is widely used and is open source. The license is a Python license, so you have to deal with the open source-y ness of the license but that's usually of little concern. The syntax has been explained to me as "C-Like" so if anyone has experience with C#, C etc they can probably pick it right up. Note that on shared hosting, Python scripts are usually run as CGI programs. Python is a general purpose scripting language often used to develop web applications. Python is arguably a more powerful object-oriented language than PHP, but the two languages are very similar making learning the other easy. Which is always a bonus!

Ruby (on Rails)

Nothing deploys faster than Ruby. It's one of the easiest languages to START something with, but the jury is out on how easy it is to finish. It's free, open source, and available online at http://www.ruby-lang.org/ . It's a newer language, and has some positives that make it a compelling choice (typically when time-strapped). It's often with the Rails network which is an MVC built on Ruby. All in all, a solid system.

Then all you have left to decide is...how are we going to handle the client side? Usually, Javascript, JQuery, HTML 5/CSS3 are your best choices. Usually.


 

Time to pick a host

So what kind of hosting you need? We prefer Liquid Web. As a partner, we are of course a little biased but their service is second-to-none. The products they offer are competitive, and the best part is all the real-time monitoring they do for your security. Heck, they'll even harden your PHP for you! We have used a number of different hosting services and have dealt with dozens more doing clients' websites. Liquid Web beat them all...in our opinion. Let me walk you through what we use to determine the host.

What is the size of the site? 

The size of the site is a bit of a misnomer. Sure the site itself can be a "beast" in function, but what does the footprint look like? How many MBs & GBs does the site take up when it is ready to be deployed? The databases...are they pretty much full or will they fill up quite a bit over time?

You'll need to find out what the size of the site and system is to be on the server. That is a good place to start. 

Media

Media takes up a lot of space on a server, and can run your costs up if you aren't careful. For example, an image can range in size from a few KBs to over 1GB. We aren't talking about super big, fresh-out-of-the-camera images here, but images can take up a lot of space and cost you money with your host. Videos take a big chunk of space, that's why a lot of people prefer to host their videos on a Vimeo or YouTube. Then you can take the link and embed it without having to worry about the cost of storing and retrieving those large files.

Size of Expected Audience

Okay, smarty pants. We all know everyone wants the entire world to come to their website. We get it. That's not feasible in the real world. Ask YouTube how much their videos cost to serve each day to their millions of users! Research into similar websites is key, as is talking with your provider. If they will take the time to discuss your needs with you, chances are they'll be with you when you really need them to stop the Russian spammers from jamming your site full of comments. (Nyet!! Son of a Putin!)

Why does this all matter? Well the hosting companies are going to sell you service based on your storage and bandwidth needs. That is dependent on the size of your assets and system and the amount of push and pull you do. To get a better idea of what you'll need, you can do some research online. We've found a good resource from whoishostingthis.com which gives a pretty good baseline figure:

For example, a modestly-popular blog with 1000 visitors per day, a 100 kb page size, and 2 page views per average visitor will only need about 8.5 GB of bandwidth per month.

Your site might not ever exceed 1 GB of data transfer per month. High volume websites may exceed 1 GB of data transfer in a month, but the average business website can support up to 10,000 different people looking at their website and still not exceed 1GB of data transfer. (Source: anchor.com.au) However, if you are doing E-Commerce, social media or "rich" media like videos and animations it can go higher. The bigger the files you transfer to someone, the quicker that limit is reached.

Some hosts zing you pretty good when you go over your limit, that's why we would recommend a graduated hosting plan like they offer (again) at Liquid Web. They have plans that allow your site to grow and do so when you need it...without causing heart palpitations reading a bill! So look for solutions like their Storm Servers you can sleep well knowing that if that blog goes viral, you'll be able to serve the pages without being put in the poor house.

 


 

Operation System (OS)

Which operating system should you use on the server? That all depends. I have found that the two most reliable are the Windows Server software and Linux. There are compelling reasons to pick one or the other. It basically boils down to this: Are you developing on a Microsoft platform like ASP? Or, are you deploying a CMS with PHP at its core? 

If you are working with Windows, stick with Windows. This will most likely cause the fewest headaches. The opposite is true with Linux...if you are "Off the 'Soft" then Linux is preferable simply because there are less things to go wrong. We have used either and both, and for most things we prefer Linux but there are some reasons that we'd use Windows.

 


 

Database

Picking what you put your data in is a big deal. One would think that after all of this stuff we've covered, that this would be a simple calculation: Just go with MySql. Okay, that's the default and it works well but you need to determine what your database (DB) is going to do. Is the DB going to handle a lot of in-and-out data writing? Does it have the capacity to handle a large amount of data?

These are things you should answer!

Unfortunately, there are so many choices to pick from and so many reasons why you would want to pick one vs. the other, so we're providing you a link to see the comparisons yourself:

http://en.wikipedia.org/wiki/Comparison_of_relational_database_management_systems

Generally, if you check the reviews that are available online that will give you a good starting point. You may want to look for programs that are designed for the purpose, say like an e-commerce based database. Do you need a relational database? A relational database is one that allows you to link several databases together and run "queries" on them to provide functions. Do you need a suite, or just a stand alone? Stand alone may just do the trick.

Lastly, compare the ease of use and take a look at the interface and screen shots so you know what you are getting into.

 


 

Managing this mess with a CMS

Picking the CMS (or creating one) is your next consideration. If it's a custom site, that doesn't mean it doesn't have a popular CMS. Okay, you probably won't be doing a custom site with a WordPress CMS (why?) but there are compelling reasons to use Joomla, Drupal or Magento (to name a few). For instance, the entire website can be build line-by-line to have custom functions and custom and still need a user interface for the client to post blogs and pictures. McDonald's uses Joomla for their websites, but they have a lot of custom functionality. Drupal is popular for this reason, as is Magento.

A CMS can be created specifically for the website, and in some cases that's exactly what is needed. So reviewing the pros/cons of the various CMSs out there will allow you to pick the very best one. Personally, I prefer Joomla because it allows me to create custom script within deployable modules. But hey, that's just me!

 


 

Creative Direction

Now it's time to create the "look" of the website. Consulting your graphic designer or design book will go a long way. The same color and form theories that are prevalent in art school still apply on the web. You should know about your color wheel, the emotions it is supposed to elicit (some robust debate about this), the basics of form and function, composition, and light. Complimentary...contrasting...leading...bleeding...and a whole lot more. If you don't know how to design, simply pick up a good book on design. (Here is one example: 

Basics of Design: Layout & Typography for Beginners

Your color palette should be one of the first things you think of. This book is a good guide for those who want to delve into color theory and make sense of it all: 

Color Choices: Making Color Sense Out of Color Theory  

The Style Sheet is basically the next step in your process. You have to know what types of colors, textures, effects and fonts you will use for the site. This keeps it all consistent, and having them put together into one document helps any creator or editor down-stream. The Style Sheet will come complete with both RGB and CMYK colors, the hexadecimal and/or Pantone numbers for the colors, and examples of the textures and other effects. (For example you could go for "brushed metal" and have a few examples of brushed metal that illustrate a range of effects to get the "look.")

Of course, nothing happens without the logo! The only reason it's not first is that most businesses and organizations already have their logo. True, they may want to spruce it up a bit but normally new logos come with new businesses...but moving on. The logo should be a document with at the minimum of two and the maximum of eight different ideas or iterations of the logo. These should be distinctly different. Care to discuss each one with the client is paramount, to make sure the graphic that represents the company is plain to see.

With the developer, the creative services team works on creating the CSS for the page. The CSS, or Cascading Style Sheet, is a way in which a website can render the similar look and layout across all pages, without having to insert the code for each look and layout on each page. This allows for complex designs and functions that all get their own distinct style. For example, you can have a CSS for a home page...then one for an internal page...and one for the contact form...one for the slider/carousel...one for the login form...

CSS is a combination of art and tech. This is why we cross-train our designers and developers in CSS. Because one will invariably need the other, just not always at the same time and not always working concurrently. At Tucknologies, we take CSS seriously! (If you want to be a good designer, you will too). All the actions, the animations and state changes have to be coded. One of the big advantages that CSS has is speed. It doesn't take long at all to render a site with CSS (normally). Another big advantage is the time it takes to change is a fraction of the time it would take to change every page!

Then of course, we turn to the User Experience. (Well that's in the top of mind as you go, but we have to mention it before we jump into coding!) This finds you working on creating galleries, sliders/carousels, forms, functions and really getting into the guts of how people use websites and what the site is supposed to accomplish. How will the menus work? Will there be a drop down, a fade, a cascade? 

Maybe the client will want the users to have a profile. What goes in the profile? What functions does the user have to use, or are encouraged to use? Is there anything lacking for the user? Does the system, in current form, fulfill the user's expectations? All great questions to ask. Then there is social media. How much of a tie in do I want? You can pick between having them login with their ID, just the ability to share via their network of choice, or being able to post content through the social media network. Lots to decide on!

All of these things are considerations for you before you even START on coding the website. Next we will take a look at the Development portion of building a custom website. We hope you'll be back for that next week.

 

 NFS5VNWHCRUN

Published in Blog

Recently one of our clients and friends had a problem with their website.

Published in Blog

Designing a website from scratch requires a lot of forethought and preparation. There are quite a few factors that determine what functions, look and invariably the cost of the website. You have to decide what types of technologies you use, what languages you want to program in, and most importantly: What the heck is this thing supposed to do?

 

Published in Blog

Making a good interface is essential to enhancing the user experience on a website. Many of the technologies we use and choose to implement on our websites we choose because of the effectiveness of the user interface.

 

Published in Blog

Words words words. We use them everyday to communicate, express ourselves, and, in the web world, use them to drive more attention to our website.

Published in Blog

Don't settle for software that "doesn't exactly work for you." Customize it! We develop custom software solutions for your business from your User Interfaces to your Points of Sale.

Published in Services

Who We Are

Calendar

« October 2017 »
Mon Tue Wed Thu Fri Sat Sun
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31