Design & Technology Blog   

Posts tagged web design

Enjoying the Process: Design Steps for Web and Mobile

In many ways designing requires skillful listening; sometimes it is not that easy to express what one wants or likes, we often know better what we don’t like.

And on the other hand, in cases where the client regards that they know exactly what they want, it is our job to test these ideas and make sure that the creative direction is indeed final. Sometimes things get nailed down faster; sometimes ideas and directions shift and the process takes more time. Ideally we recommend giving enough time for the design process in order to make sure that the design files will settle in and that our client feels connected and committed to them.

Ultimately, we regard it as our responsibility to work towards a professional web and mobile media design in the framework of requested direction and feedback. Our ten+ years in business has thought us a lot how to be sensitive to our clients’ comments while neither overburdening them with requested tasks nor overrunning their views and requests.

What does a typical design process for web and mobile look like? Below is a flow sample of how a typical web and mobile design process might go about. When working with our client we request feedback and approval on each step before moving forward with the code production process.

Setting Goals:
We listen to the client carefully and identify goals for the web and mobile presence.

What We Have:
Together we go through existing identity design elements, likes and dislikes. Sometimes certain identity elements can be taken literally to web and mobile, and sometimes they need a certain degree of interpretation.

Who We Are:
Together we identify, and analyze/strategize the client’s brand identity and market positioning.

Who’s Competing:
Together we go through web and mobile samples of relevant competition.

What We Like:
Together we identify different style options and web and mobile layouts that resonate with the client.

What’s the Scale:
Together we form a preliminary site map and feature set plan for the site development.

Here’s What We Have: 
We provide the client with first layout ideas; focus on the feel and primary identity elements.

This is How it Would Work: 
We provide the client with a basic wire framing of the navigation structure.

Here’s a User’s Experience:
We illustrate and/or wire-framing the roadmap for a user-experience road-map. Please note: regarding on the scale of required dynamic features – such as a registration system, an online product catalog system, an ordering and customer check-out system, My Account features – this workload often exceeds the timeline of a standard web or mobile design process.

Here’s How to Get User’s Attention:
We provide the client ideas with user engagement with call-to-action areas and optimal site layout.

We Heard Your Feedback:
We revise designs, layouts and wireframes according to feedback.

Here are the Designs with Your Content:
We test the designs against provided content. We imagine what future content might look like.

Can you take a Final Look?:
We request final approval before the coding begins

Developer, let’s sit down and talk:
We make sure that the design files are to be coded according to the plan.

OK, let’s see:
We adjust fonts, visuals and identity elements according to the real-life rendering on different browsers and mobile platforms.

We made some changes…: 
We adjust and improve the user experience flow according to real-life testing results.

Interesting new changes:
We foster acceptance and understanding that sometimes good ideas take their time: we agree that the client has the right to change their mind and request changes during and after the coding phase

The future is looking bright: 
We will adjust and create new designs according to new identity elements or direction on brand positioning

Interaria has walked through these steps many times in the past, and we know how to guide the conversation, structure deliverables and provide results. By breaking the design process into tasks, the process can feel enjoyable.

Custom Web Application Development for Dupree Dance

Dupree Dance conducts high caliber dance conventions and competitions in cities throughout the United States.

Interaria is excited to announce the launch of an extensive web application driven website for Dupree Dance, www.dupreedance.com, that features an online registration and check-out process for dance studios and dancers attending Dupree Dance’s dance conventions. Prior the new website, Dupree Dance had relied on paper based registration process that due to extensive data collection and variables required a lot of management and processing time. The new database driven online registration system, designed and developed by the Interaria web development team, provides a system for the Dupree Dance administrators to keep track of all data and run custom reports – ultimately making processing times faster.

The site features several custom web applications such as studio profile account creation, dance routines listings, loyalty program discount calculations, special teacher offers processing, total fees processing, and My Account functionalities.

The website’s database and web applications were coded with PHP/MySQL by Interaria’s web developers. The step-by-step registration process utilizes AJAX technology. The site’s identity and graphics were custom designed by the Interaria team. For more information about our web design and web application development services, please call 214-909-3900.

New Winds For Cross-Device Compatible Interactivity

Mobile and tablet devices not supporting the Flash player plugin have contributed to the overall decline of development of interactive web animations during the past few years.

Up until very recently, Web designers and developers have had very limited options to create cross-device compatible interactivity, typically relying on AJAX based components. Today we are closing the gap as new emerging technology and web programs are opening doors for new types of ‘Flash free’ interactive ‘animations’.

Adobe has brought in two new software products to the market, Adobe Edge, and CreateJS Toolkit built for Adobe Flash Pro CS6, that both offer promising steps towards more quickly produced code based HTML5 interactivity. Google has also developed a program called Google Swiffy which will convert Flash animations to HTML5.

Adobe Edge, currently in beta/preview mode, uses CSS to draw objects, javascript to animate objects, and HTML div’s to place these objects on the page. This is an intriguing solution for making web pages more interactive but is visually somewhat limited due to CSS code not being able to render complex vector drawings such as hexagons.

Complex vector graphic animations can be created using Flash Pro CS6 which can then be exported as web friendly SVG’s (scalable vector graphics), and animated on HTML5 canvas using either the new built-in CreateJS Toolkit or by using the Google .swf to HTML5 conversion tool Swiffy.

Adobe’s CreateJS Toolkit allows a developer to export Flash animations to HTML5 format so where one can then program the further interactivity of the vector graphics with javascript. Google Swiffy on the other hand allows the developer to program the interactivity of scalable vector graphics in Flash, and then converts the rendered .swf file to HTML5.

With the new interactive tools available, there are now ways for web designers and web developers to increase cross-device compatible interactive creativity both economically and efficiently. A designer/developer can now put together an interactive experience where the exported code renders on all modern browsers and devices without the use of the Flash Player Plugin.

Contact Interaria at 214-909-3900 to discuss your company’s cross-platform compatible HTML5 animation needs.

New Website Launch: DQ Estimating

DQ Estimating is an Austin, Texas based development company of a professional estimating software system DQ2000.

Interaria’s web design and development team created a custom web identity design, layout and code for DQ Estimating. Our full solution includes a PHP/MYSQL content management system that allows fast and convenient web updates by the DQ Estimating staff. The website is at http://www.dqestimating.com

Scalability Design Maximizes Website’s Long-Term Usability

Website scalability web design in Dallas

Your website may have very different content and structure needs 12 months from now.  Scalability design creates elegant solutions for new page, content, data and growth.

The website scalability design process approaches a website as a dynamic platform that accommodates and adjusts to new brand messaging, new content and revised navigation structures. While some decisions may need to made in the context of the website’s layout style, page layout styles, and integration of identity elements, the website’s content – and the navigation that controls it – at least in most parts should be regarded as fluid as possible.

Core to scalability design is a strong commitment to functionalism: the design’s positive attributes and identity should not pose significant compromises to the website’s usability, content growth, content reduction, and changes in the navigation structure.

Website Scalability Design increases the website’s usability by planning out…
  • design and code for new pages so that they can be seamlessly created and integrated to the site’s navigation structure
  • design and code for sub-menu designs that can be expanded without breaking any existing design or page layout
  • content structure design that can be expanded without breaking any existing design or page layout
  • design and code for AJAX animations that allow content increase and content deduction
  • design and code for online store management that allows catalog growth, new product categories, and cross-referencing new products
  • design and code for member activity management that takes into account a growing member base on the site and how an increased interaction displays and functions on the site
  • CMS code that allows managing new content types
  • CMS usability and user-flow design that functions optimally even if the amount go content and pages to be managed grows significantly
  • documenting any restrictions in content growth, such as number of allowed characters in dynamic form fields
Your website may have very different content and structure needs 12 months from now.  Scalability planning and testing make sure that each website and web application can elegantly handle an increased number of web pages, increased text and digital content and increased data input by a growing number of site’s users.

A Branding Toolkit Sets Identity Standards Across Corporate Messaging

Branding Toolkit Creates Coheseveness

Does your organization have a branding toolkit that sets the standards for a consistent brand interaction?

A branding toolkit explains and demonstrates identity standards and provides specific details on brand messaging styles in order to create cross-marketing and cross-messaging consistency and cohesiveness. A branding toolkit is typically used as an internal company document that each department and employee involved with marketing and communication should be aware of.

The toolkit sets guidelines for internal and external marketing and communication by

  • detailing acceptable use of identity colors and color palettes
  • detailing specific color codes for print and the Web
  • detailing acceptable typography (use of font styles and sizes for print and Web),
  • detailing acceptable placement and size of logos and other trademarks,
  • detailing acceptable layout options for business cards and letterheads,
  • detailing acceptable practice of using envelopes, folders and other stationary,
  • detailing acceptable use of photography (types of images, file sizes), and
  • detailing acceptable phrasing and/or spelling of key words that could be written in different ways (for instance, “website” or “Web site”).

A company or an organization that has developed a branding toolkit or a brand guide is in a strong position of protecting its established distinctive brand identity across media and across different customer interaction points.

© 2011. Meri Kuusi-Shields / Interaria. All rights reserved.

Facebook
Twitter
Blog
LinkedIn
SERP Zebra