All posts tagged “Designing”

10 Most Prevalent Myths in Web Designing

When it comes to aesthetics people have different perceptions and misconceptions. Same is with web designing, as it is a form of art and art certainly comes with misconceptions.

10 Most Prevalent Myths in Web Designing

Perhaps, after quite a lot of analysis web designers have reached to a consensus that the Consumerization of web development is the ‘ne plus ultra’ for success in web design.

We have seen its positive impact on business and it can also be seen in the graph mentioned below.

Impact of Consumerization of IT on business.

This was the upper crust of the web designing with which everyone do agree but speaking of the inner intricacies in web designing there are various misconceptions which still have strong roots. In this article we will discuss them and try to understand the discipline of web designing more clearly.

1. Intermixing designing terms

The biggest myth in the industry is that designers fail to understand the difference between the terms called as user experience, service design and customer experience.

Intermixing designing terms

User Experience

Being into designing from quite sometime, I figured out the difference between the basic designing terms. User experience primarily focuses on the design pattern and implementation of a single customer touch point. The main aim is to make the touch point more intuitive. In a website and mobile app, a touch point means the experiences and they can occur in the form of paper invoice, kiosk or interactive voice responder. There are times when people perceive touch point as channels, such as a website or an in-store, where in a touch point is the single point of interaction. The firms use them to provide their customer an optimal experience with its products and services. It definitely works on user’s behavior with minimizing the time and efforts for a task.

Competency:

In order to create good user experience the users need to have different competencies. User research and analytics, interaction design, information architecture, content strategy, visual design and front-end developers are the requisites of a strong team for creating a good user experience website.

Customer Experience

On the other hand customer experience aims to design and place the touch points aptly throughout the entire journey of the users. However, the customers can not differentiate between a touch point and a channel; all they need is a flawless experience. Thus, in order to accomplish this we need to see that how they hop form one touch point to another. So, you need to craft brilliantly what each of the touch point do. Thus, omni-channel experiences can allow customers to help them to sway through the website using their preferred path.

Be consistent!

All your earnest efforts in creating a good user experience will be futile if you break your consistency at any point. Any misleading advertisement or communication can be very dangerous.

2. Understanding Service design

Like customer experience, service design also aims to improve and innovate new online service experience. It is a multidisciplinary approach which amalgamates the user experience, design methodologies and operational model design tools and techniques. It aims to connect the journey across all the touch points and channels and not only for the customers but also for the organizations perspective.

This process seeks the organization to break into the information silos in order to enhance their business model, operations and strategies. It functions like a backstage support staff which help to deliver optimal front stage performance.

Understanding Service design

Skill Sets

A service designer has to don a bigger hat which can cover up the strategy, research and design. It is not just it because at times he needs to connect the engineering and architecture.

3. User Experience is not is not a user interface design

The founder and principal at Kicker Studio, feels that it is very common to consider the design being merely an ornament. Dan Saffer says, “I’ve had clients tell me not to worry about what their strategy is,” he adds, “because why would a designer care about that? UX is more than just skin deep.”

Mixing up the “user experience” with “user interface” seem to be a very common. This is because it has a major contribution in generating a good user experience while going through the products and services online. I know it can be quite a riddle at times, but one can easily solve it if he gets to understand the clue. So, you need to understand these different terms.

“Interface is a component of user experience, but there’s much more,” said Peter Merholz, founding partner and president of Adaptive Path. Christian Crumlish, curator of the Yahoo! Design Pattern Library. Furthermore, he elucidates design as, “isn’t about cosmetics, pixel-pushing, and button placement. It’s holistic and it’s everyone’s concern, not just the realm of ‘artistic’ types.”

4. User Experience is not a step in the process

The most lingering myth about user experience is that it is merely a step in the complete process. However, we need to understand that the complete essence of the project is the user experience and it is the only thing which helps the user to distinguish among the websites. And in order to do this we need to keep on regulating and refreshing our process. To do that we need a flexible module where something new can be easily accommodated.

According to Dan Brown, co-founder and principal at EightShapes , “Most [clients] expect experience design to be a discrete activity, solving all their problems with a single functional specification or a single research study. It must be an ongoing effort, a process of continually learning about users, responding to their behaviors, and evolving the product or service.”

“User experience design isn’t a checkbox,” adds Liz Danzico, an leading user experience consultant and chairperson of the new MFA in Interaction Design program at the School of Visual Arts. “You don’t do it and then move on. It needs to be integrated into everything you do.”

5. User Experience is not about technology

User experience is not remotely related to technology. Categorizing user experience on the basis of technological skill set would be very unfair as in this tech savvy time period where we can find erudite work force very easily. So, creating a good user experience is something independent from the technology. In the words of says Mario Bourque, manager of information architecture and content management at Trapeze Group, “It’s about how we live. It’s about everything we do; it surrounds us.”

“User experience design is not limited to the confines of the computer. It doesn’t even need a screen,” contends Bill DeRouchey, director of interaction design at Ziba Design. “User experience is any interaction with any product, any artifact, any system.”

6. Usability is not just a synecdoche for user experience

Now, in this time we need to go beyond just providing the usability and user engagement. In order to get to people change their perceptions we should generate a need for the stuff which we are selling.”People often think that [UX design] is a way to make products that suck into products that don’t suck by dedicating resources to the product’s design,” articulates Chris Fahey, founding partner and principal of Behavior.

We know that usability is imperative, but while focusing much on competence the designers tend to lose the importance of user experience. This also comprises of various behavioral responses of the user towards your online store. Simple things are easy to use but are not all the time appealing enough to attract the users. However, it can also be taken that users might not interact with the appealing things. Usability is not just a synecdoche for user experience. A smooth user experience is something which is required, available, reliable, findable, and extremely valuable.

7. Page size defines user experience

Web page size has been a great discussion in terms of user experience. Designers have this perception that lengthy web pages decreases the bounce rate. They might think that a long web page will make the users stick to the website and this argument sounds quite different to the latest parallax web page trend. However, it can be seen that the web page sizes are growing with the passage of time.

Page size defines user experience

So, the long and short of this is that people propose different argument based on their encountered experience. However, as a business developer it is your duty to find out which argument suits your business requirement.

Another biggest misconception of user experience is that it is “U” centric. We all know that there is a business motive which needs to be fulfilled while designing our business website. Although, it is designed for the users, but it is not always that we can put forth users of our business motives. Thus, we need to satiate the needs of the users and simultaneously not to forget our business motives. As a user experience designer you need to balance between both the business needs efficiently. Providing a good user experience and not sideling the business needs is what we need to do.

8. It all means the same

You will certainly go to an ENT (ear, nose and throat) specialist and not to an orthopaedic in case of an ear problem. Similarly, you need to know that there are also different specialist for your user interface design. Well in order to suffice this we have renowned publisher of books on designing user experience, Louis Rosenfeld, publisher at Rosenfeld Media and also the co-author of the book Information Architecture for the World Wide Web who also opines the same.

Web designing in today’s world is a challenge and it needs synthesis of varied design proficiency. Modern web designing needs inputs from people from different expertise who have hands on experience in building good web designs. Even after the rise of the technology, various companies are still oblivious of the fact that terms like user experience architect, information architect, usability engineer, design analyst, interaction designer and many more such designations do not means the same. These are merely nebulous titles for them which means the same to them.

However, in order to edge out the competing we have different post for people who specialize in different process in the designing. Some focus on mental models such as Indi Young, web forms, usability testing or focused activity.

9. You just need to know your business

Designing is not just as easy as we think it is. This might sound easier as you might be knowing your business thoroughly, but this doesn’t makes the complete process a cake walk. Running with this notion that there is only one single way to craft a successful website and that is to understand the business; is just a sheer misconception among the designers and clients.

Another major trap which engulfs a lot of companies is that they are also the end users. According to Erin Malone, principal at Tangible UX, programmers and managers run with the view that they will create the experience after they build the project. The UX designers are struck in the middle position where they try to explain the developers and the business executives that why do they follow the practices and how positively it will helps in their business gains.

You just need to know your business

Making random assumptions about people such as their behaviors and what they expect will not give you the finest results. You need to spend some time to derive a conclusion out of the big data analysis and then speculate about users and their needs. After this you need to draft the complete strategy which can make them tick and then certainly all these efforts will culminate into something fruitful.

10. Reading articles will help sway through

If you think that reading articles about developing a good user experience can help you to develop an optimal web design then you are highly mistaken. You might not drastically fail but success on a larger scale is impossible, though. So, start your analysis now.

In this cut throat competitive world where users bank on web solutions creating a highly reliable and engaging solution for them is certainly what is required. A good designing experience can certainly help out in developing some of the sublime solutions which users actually need. We also need to keep in mind that we do not have to confuse or irritate the users with a complex design, after all we are building the solution for a problem, not a problem itself.

Please do share your valuable comments.

Visit us at InstantShift.com

PSD to HTML


InstantShift

Designing Digital Strategies, Part 2: Connected User Experiences

“A digital strategy is the who, what, when, and where of listening and responding to consumers, bridging brand experiences, iterating offerings, and collecting and activating consumer relationships in order to accomplish an actionable and measurable objective.”—Digital strategist Bud Caddell

Simply stated, a digital strategy is a plan for how to support business goals through the benefits of digital tools. Strategies guide us in major decisions by providing a sense of direction and cohesiveness to our work. Having a well defined and clear digital strategy ensures that decisions about digital channels are not made on impulse (“let’s make a new app”) or merely in response to available technology (“let’s use QR codes”) but rather as part of a coherent plan that enhances the user experience and maximizes business opportunities. However, we can only have a sense of direction after we have properly oriented ourselves—and this is where the ecosystem map helps.

Through ecosystem thinking, we can leverage business opportunities while at the same time providing better experiences for customers. The aim of this article series is to show how to apply ecosystem thinking in design projects. In the first article of this series, Digital Cartography, we discussed ecosystem thinking and how to draw ecosystem maps. In this second—and last—part we will look at how to use ecosystem maps as tools to guide us in designing digital strategies.

Digital strategy vs. business strategy

Before we get into building a digital strategy, it’s important to identify what this strategy is not.

A digital strategy is not a business strategy. A business strategy provides a long-term roadmap and budget forecasting. But technology moves too fast for a digital strategy to give an accurate 3-year plan or budget. Digital strategies are, therefore, less detailed than business strategies and they are more focused on creating a framework—consisting of policies, priorities, and people—for making strategic decisions.

Digital strategies should be based on what we know about the users from our user research and the business strategy of the company. To make sure that the intersection between user needs and business goals are taken in consideration during the design process we need a digital strategy that can guide the design and development team.

A digital strategy

Design a digital strategy, based on user needs and business goals, before you start developing new solutions.

The anatomy of a digital strategy

A clear digital strategy can ensure that we build profitable ecosystems, resulting in a cohesive user experience across multiple touchpoints. The ecosystem map shows at a high level who the users are and how we might address their needs. Next, as part of the digital strategy, we identify the specific path to reach our goals. A digital strategy should identify:

  • A digital vision and objectives. Rather than focusing on a single product or service, we should look at how we can meet the needs of users through several interconnected products and services. The company GOQii, for example, provides a wristband that monitors physical activity and sleep. They also have an app that tracks nutrition and lifestyle. In addition, they offer personal follow up advice from coaches; all of these products and services fit into an ecosystem designed for helping users achieve a healthier lifestyle.
  • The target audience. We began thinking about users when we drew the ecosystem map. In the strategy, however, we need to define our target audience much more precisely. This is also the time to prioritize the primary user: is it a working woman in her 40s, or is the product more suitable for teens?
  • Actions to reach the objective. Here, we are defining what we will do to reach our objectives: this will become the final ecosystem of products and services. We made assumptions when drawing the initial ecosystem map, and now we choose concrete paths, and identify when we aim to design and launch different products and services.
  • Success metrics. To track our progress, it is important to define measurable objectives. Key performance indicators (KPIs) should be measured continuously to track if our chosen strategy is working. Examples of KPIs include everything from the number of site visits, to the number of customer support calls (hopefully few!).
  • A delegation of roles and responsibilities. To ensure the digital strategy is implemented, it’s important to have a clear, shared understanding of who is responsible for what. Some clear guidelines, and even a full responsibility assignment matrix can save everyone involved a lot of frustration.

To help us reach decisions about these aspects and specify them in a strategy, it is useful to analyze the map from different angles.

Analyzing the ecosystem map

Let’s design an ecosystem map for a fictional online home-listings company. The company also provides mortgage calculators and links to online mortgage applications, as well as price statistics for listed areas. In the ecosystem map, the functions and services the company already provides are listed as “inside activities,” whereas the activities that users have to do are labeled as “outside activities.”

During the moving process, users make many decisions—where do we want to live? What is our price range?—and use a number of services—real estate agents, inspectors, movers, and so on. The steps are complex, and the timeframe can vary significantly. Our ecosystem map matches this, with no specific sequence of events, and no timeline. Nevertheless, the map presents the main elements of finding, buying and settling down in a new home.

One example of an ecosystem map

The company wants to expand their business by offering more services related to purchasing a new home and moving. Their target audience consists of private buyers, 30-60 years old, looking for a place to live (not professional real estate investors). When people move, their ultimate goal is not just to buy a house or to move physically, but to settle into a new home. The company has therefore decided that their digital vision should be “to help people find and settle into their new home.”

To take advantage of the many user insights we have illustrated in the ecosystem map and use those insights strategically, we need to analyze the map through multiple lenses:

  1. Pain points. The first thing to consider is troubles the users currently experience. Pain points represents business opportunities, since they show us where we can make a difference. But we also need to investigate the nature of the pain points: How often are they experienced, by how many people, and what emotions do they evoke?

    For example, home buyers are often concerned that their new neighborhood will be safe, and have easy access to services like parks and supermarkets. They can explore the area near open houses, but this is time consuming. Offering an overview of the area integrated in the online listing will ease this pain point.

    Another pain point is scheduling. It takes a lot of time and energy to visit open houses, and it can be frustrating to keep track of the different homes and remember their unique features. An app showing schedules for open homes and suggesting the best travel route between several would be a useful tool, particularly if the app made it easy to save personal notes and pictures from each house.

  2. Relevance. Which of the “outside activities” should our solution provide? We can analyze which features are essential, which would be nice to have, and which would add an insignificant value.

    There are myriad services and functionality that people could use in the process of finding and settling into a new home, but it can’t all be provided by a single company. For an app intended to track upcoming open houses, calendars and a map will be essential, neighborhood information for the listings can be nice to have, whereas a checklist of questions to ask is less significant. Such evaluations must be based on user research and not on own assumptions.

  3. Competition. We can learn a lot from our competition. What competing solutions are in use today? What needs do they fulfill, and where are they leaving gaps?

    There are a number of websites and apps available that help people find a new home. House Hunter and Open Houses, for example, help people keep track of and rate the open houses they have visited, complete with photos and notes. However, they don’t provide maps or help users plan to efficiently attend multiple open houses.

  4. Channels. Which channels do people use to share information and perform activities? How can we use these channels to our advantage?

    Social media is often used for gathering advice ranging from finding a good real estate agent to getting opinions on a nearby school. In our app, we might design a function for easily posting listings on Facebook, or allowing comments on pictures.

  5. Pathways. Orchestrating journeys through the ecosystem happens by way of interactions that allow the user to accomplish his goals while also supporting the business strategy. A journey through the ecosystem should ideally trigger another journey back through the service, or to another service, ideally one that our company also offers.

    An app for keeping track of visited and scheduled open homes might also include functions for getting quotes from home inspectors, carpenters, electricians, and plumbers.

    Service design vs. ecosystem thinking

    Service design vs. ecosystem thinking: In service design we map customer journeys to improve the touchpoints in one single service, whereas in ecosystem thinking we zoom out further and take a birds-eye view on how we can connect multiple services in profitable and meaningful ecosystems.

  6. Risk factors. What are the main factors that could make people drop out of our desired pathways? How can we create external and internal triggers that motivate use?

    Apps are often downloaded and installed, and then never used. To make sure that users become active users we have to motivate them to use our service. For example, we might send out notifications about open houses and bids.

These lenses challenge us to analyze our ecosystem from different angles. They provide a useful framework for thinking holistically, rather than designing isolated products and services.

Why bother making a map?

Visual ecosystem maps make it much easier to spot new opportunities as we design digital strategies. It also helps us to (literally) map our user research to prospective business opportunities. Moreover, an ecosystem map is an excellent tool for co-creating strategies with clients and users. The lenses can be applied and discussed together with stakeholders and users. The ecosystem map provides a reference for guiding these discussions and designing strategies in an iterative and collaborative manner.

Most importantly, ecosystem maps helps us connect our products and services. It makes us take into account the solutions of other companies that are part of our users’ ecosystem. Ultimately, ecosystem maps can assist us in making informed and coherent decisions both on a macro and micro level. While the map shows our endless opportunities, the strategy defines the selected path.


The UX Booth

Reemerge of Designing in the Browser and the Grim Future of Photoshop

Web designing in the browser vs Photoshop – what’s your choice? How to make designing less troublesome? We’ll discuss it at length in this post.
MonsterPost

Web Developers Should Acquire Designing Skills: Answers to Why, How, And What!

When visitors come at a website, they get appealed by the way it’s designed. An aesthetically beautiful website, conveying the real business message, is a success ingredient for the website owner. That’s why web designers are thought to lay the foundation for website building. They work on providing an enhanced look and feel to the site visitors or the business prospects.

Web Developers Should Acquire Designing Skills: Answers to Why, How, And What!

With growing tough online competition, the importance of professional web designers increases many folds because they make a website shining against rivals.

Appreciating designers doesn’t mean one can ignore the web developers, the people who make a website working. Although both web developers and web designers work in close collaboration to complete a project, but the rift exists. They rule their own domains and don’t feel good to get interfered. Quit this philosophy if you want to succeed. Whether you are a web developer or a web designer, learn the other field. It will help you grow professionally and enjoy good working relationships. In this post, you will come to know the reasons, why web developers should learn web designing, how they can do that, and what should be learned.

Change The Concept Of Web Developers

As time is changing, web development is also facing modernity. Web developers solve the problems in way of smooth website working. They are not considered to work for website’s look and feel. This concept needs to be changed, and being a coder you are going to do that after reading this post.

Why Web Developers Should Learn Web Designing?

To learn web designing means to become more productive and efficient while building websites. Here are given some major reasons for web developers to learn web designing.

To become responsible

Learning web designing means becoming part of a team comprising human members, becoming responsible, and changing the typical concept of web developers.

To build websites without help

A web developer can sharpen the designing skills and can start working solely on a project. It will bring more projects and more earnings. No need to hunt for designers separately. However, this approach shouldn’t negate the significance of professional web designers.

Working on website interaction

A web developer having designing skills can work on interactivity of the website and coding at the same time.

Better teamwork

Most of the times, web developers and web designers are thought to be the rivals working on any project. Acquiring designing skills can help web developers in better understanding the designers and collaborate effectively. It also helps in better understanding each other’s perspective, leading towards extraordinary work.

Responsive website building

As evolving technology is giving birth to a large variety of devices, web developers have to build responsive websites. Learning the basics of designing helps them in creating smartphone friendly websites. Having a designer’s eye, web developers can realize how certain design elements will behave. How esthetically beautiful desktop sites can be made mobile friendly, web developers should know. Both web designers and developers can come up at elegant and prudent web solutions after brainstorming ideas.

After understanding how different design elements work, it’s easy for developers to write concise and consistent code, and modular CSS. Both these aspects are integral to create responsive websites, working smoothly on any device.

Know the design to know the users

Working for users need a clear understanding of what do they want. Web developers need to pay attention to this aspect of website building. Usually, they focus the technical details of a website, but it lets them ignore the end users, failing to reach user-friendly solution. A better understanding of web designing helps coders in coping with that problem. An earlier engagement in the web designing process enables web developers to know the roots, the designing issues, and ways to stay closer to the end users. All these things lead towards a better web solution for a business and the target audiences.

Developers can enjoy coding

For developers, what else could be the best reason to learn designing other than enjoying coding? Solid discussions among designers and developers prove productive and collaborative. Going beyond the technicalities of the project helps developers feel great and accomplished. Read books, online tutorials, attend design conferences online, meet with designers’ communities, hold discussions; that could be your learning mode. After that, start asking questions at your workstation. The more you gain knowledge the better you will feel while coding.

To enhance the designing skills

Isn’t it amazing to add few more skills to your resume, like learning about graphic designing tools? This will surely force you, as a developer, to go for enhancing your existing skill set. It will increase the chances of getting a dream job.

To enhance the esthetic sense

Web designers are known to have sharp esthetic sense. By learning the designing process, a coder can also determine the esthetic criterion of a website. Refining the visual skills is a step towards becoming aesthetically sensible, a designers’ trait.

To know the business requirements

It’s not just the business environment getting competitive; web developers also have to face tough competition. By acquiring designing skills, a coder can understand the client’s requirements and can deliver the best web solution with unrivaled look and feel. Website interactivity is another strong aspect that developers could focus if they have the designing guts.

No need to get helped out

If a developer knows how to design, he/she can work on any website without getting helped out by any other designer. Earning more without sharing is the outcome of working on any project solely.

How To Acquire The Designing Skills?

After knowing the reasons behind acquiring the designing skills, it’s time to know where to go for that purpose. Here are given some ideas and places to take help from.

Get inspired!

Browse the web and explore best web designs. Get inspiration from excellent designing work. It will ultimately improve your taste of website designing. Dribble and Best Web Gallery are the places to look for some inspirational design work.

Go through online tutorials

Thanks to the web. There are amazing websites helping fresh designing enthusiasts to acquire basic and advanced web designing skills. Few are mentioned below!

Tutsplus: The website has 18804 tutorials and 454 videos to help newbie designers learning the art. The learning categories include HTML, CSS, Photoshop, design theory, and the list goes on.

Lynda: It’s another amazing video tutorial site for fresh and experienced web designers. For coders, this website offers great help to sharpen their designing skills. It also offers web designing courses, supplemented by free video tutorials. Learn the latest web designing tips as part of a large variety of available courses in the library.

Treehouse: Learn about designing, coding, and business through more than 1000 videos. The library is equipped with tutorials about latest developments in the technology world. Earn badges for the courses you learn. These badges show the skills you acquired and are viewable by anyone online.

Start Implementing What You Learn And Get Feedback

It’s not just about acquiring the designing skills, but about implementing them. Get feedback from expert designers and end users about your work. Keep the web design simple, yet elegant with rich features. To get feedback from other experts, join online communities like.

Forrst from Zurb: It’s an online community of web designers and developers, where they share their work and get detailed feedback from experts. It helps in becoming sharp in whatever skill you have acquired.

Silverback: It offers usability testing for newbie and experienced developers and designers. For your newly gained skills, this could be a better platform to know what you have accomplished and how much improvement is needed for perfection.

Designing Concepts That Coders Need To Know

Now, come to the designing concepts and practices that a web developer should know.

  • Design is more about web personality: Developers shouldn’t consider designing as a visual part of a website, but a complete personality of a business. The very first moment a visitor enters a website and the point he/she leaves, web design supports the experience. It reveals the business objective. The site load speed, hovering and clicking, delivering new content, all these are part of the web design. As design affects the overall user experience, so every person working on the project should be a designer. If a coder knows how the end user interacts with the website, he/she is a designer.
  • Design should be user centric: Whether it’s a site or app, users should be given due consideration from the very start. A web design should be user centric. Main purpose is to help users browse the website with speed and effectiveness.
  • It’s all about details: To create a good design, a coder should pay attention to the details. What does it mean by attention to details? It means how a design can help satisfying the users or annoying them. Being a coder, you need to learn when the minute details need attention and when the bigger picture should be kept in mind.
  • Use sketches for learning: Before designing, better to sketch. It will help building a relationship between content and hierarchy. You don’t have to spend on creating sketches and it involves less time as well. You can share your ideas about website layout and user experience by drawing sketches. No mockups or coding is required to display ideas. It’s not tough to use boxes, arrows, and squiggled lines to show ideas. However, you need to express the underlying ideas of sketches in front of experts or clients.
  • Know how to use white space: What’s the importance of using white space? To let the site visitors breathe. It’s needed to process information. It’s just like breaking a paragraph into sentences. The best example of using white space perfectly is that of Apple. The company has utilized white space to highlight its products.
  • Use grids for design unity: Grids create relationship between different design objects, allow visual alignment, create vertical and horizontal rhythm and an optical balance. It’s not a CSS framework, but an important design tool that needs to be used with clear sense.
  • Emphasize the important item on a page: In design, focus a single element per page. Offer a clear hierarchy while pointing the visitors towards the direction they want.
  • Save inspirations: As you are going to design along with coding, save the things that inspire you like pictures, videos, websites, posters, etc. These will help you getting ideas when needed while dealing with a specific designing issue. Save the inspirational work in a folder.
  • Problem solving for the users: Web designing is more like solving problems for the users. Make use of features that help users during their stay at the site. While making use of colors, images, and anything else, question yourself, why you are going for some particular choice. It will help you in coming up with a solution, not just a design.
  • Concluding the discussion: Learning web designing is though not necessary for coders, but it enhances their vision of website building and helps them in earning more because they can work solely on any project. Don’t consider designing as a talent that designers have, but a skill set that you, as a coder, can acquire. Dip into the designing world and practice what you have learnt. The more you practice, the more you will shine with your work. See your career blossoming with multiple skills like designing and developing.

 

What’s your opinion about learning web designing while being a coder? Share in the comments below!

Visit us at InstantShift.com

PSD to HTML


InstantShift

Designing for Dyslexia (Part 2)

Swimming pool ladders are physically difficult to use. They require strong arms and steady feet, and as a result, elderly swimmers and children need alternate exits. The design is therefore not universal, or not usable to all. A ramp gradually leading into the pool, on the other hand, would be considered a universal design for entry and exit. Ramps allow easier entry and exit for those swimmers as well as others who could use a ladder or stairs with no difficult. Additionally, a new, hesitant swimmer may feel more at ease wading slowly into the water rather than stepping down into the water. In other words, this design considers the widest possible user base.

There are seven guiding principles that can help designers to make choices that will fit a broader audience, and five of them are applicable to the world of web applications and sites, where most readers (and myself) design. In part one of this article, I demonstrated that dyslexic users have been largely unaddressed as a user base despite their large numbers. I outlined the problems that many dyslexic users have in using digital interfaces. In this article, I will explain how, like in the swimming pool, we can create interfaces that appeal to the widest possible audience and this will not only improve designs for dyslexics, but for everyone.

Universal design principles

Universal design means creating a singular design that fits the widest possible audience. If a design is clear and usable enough for an eighty year old, it is likely that a twenty year old will be able to use it as well. The same principle applies for disabled users. If a design is usable and accessible enough for a user with motor difficulties, it is likely to be accessible for those without any barrier to motor skills. However, a design that is accessible is not necessarily universal. An accessible site is like a hearing aid: it won’t improve the hearing of a person without a hearing impairment; similarly, an accessible site will offer larger text options for people with poor sight, but it won’t improve the experience for a person with 20/20 vision. A universal design, however, will consider the entirety of experiences and offer a singular design that best fits everyone.

North Carolina State University’s Center for Universal Design offers seven guiding principles for universal design, of which five are readily applicable for web and mobile.* Since these principles were initially intended for designing physical spaces, two of the principles (low physical effort and size and space for approach and use) are less connected to the digital experience. The five principles that can be used as general guidelines for digital design will help designers to create better experiences for not only dyslexic users, but for everyone. These principles are as follows:

  1. Flexibility
  2. Simple and Intuitive
  3. Perceptible Information
  4. Tolerance for Error
  5. Equitable Use

Flexibility

Flexibility in universal design means offering multiple channels or pathways to reach the same goal. This is most easily identifiable in information hierarchies whereby the same information can be accessed via multiple user flows. The Internet Movie Database was cited often in my research as a website that offered a great experience for dyslexic users.

In Part One, I discussed how many different ways a deck of cards can be sorted and noted that a dyslexic user could see each card as unique rather than automatically grouping the cards. In the same way, just as a deck of cards, which can be categorized by color, suit, or number, IMDB’s information can be grouped and categorized in a variety of different ways. A user could search Tom Hanks, Woody, Pixar, or animated films from 1995 and still find the film “Toy Story”. Many UX designers and researchers use exercises such as card sorting to determine where a node of information is most likely to be found, but offering several pathways to the same node of information improves the site’s flexibility. This, in turn, improves the universality of a design.

Many dyslexics explained to me that their minds “connected the dots” in a different way than their peers, so it stands to reason that sites that offer a variety of options for locating specific content will be well designed for dyslexic users. Since organizational skills were considered an advantage of dyslexia, creating varying patterns of organization in terms of navigation and findability will improve a design for not only dyslexics but for everyone.

Simple and Intuitive

”The only intuitive interface is a nipple. After that it’s all learned.” Though the origin of the quote is debated, the words “simple” and “intuitive” are ubiquitous when discussing design—and not just universal design, but all design. Our goal when creating “intuitive” designs is to create an interface that can be quickly learned. Since dyslexia is a learning disability, it’s even more important to create information hierarchies that are clear and based on convention.

This gets to the purpose of hierarchies: they help show us what to do, so that we needn’t memorize the information. Ideally, an interface might be so simple that a first time user or a user with a poor memory could still move through the flow. In his famed “10 Heuristics for User Interface Design”, Jakob Nielson addresses one way to add this “simplicity.” He wrote that designs should, “minimize the user’s memory load by making objects, actions, and options visible.” Users have come to expect, for example, that a logo is a link to a website’s homepage. This goes beyond simple recall and moves into recognition—an action that requires minimal memory load.

Both www.npr.com and http://www.apartmenttherapy.com were cited by dyslexics in my study of sites they believed gave great experiences for dyslexics. In addition to the level of flexibility in finding information, both sites use clearly labelled layouts. The information is readily available and there is little to learn about how to use either site. Because of the clarity in labeling and creating different sections that follow a common formula, it is not difficult to find a specific news story on NPR, nor is it difficult to find an image gallery on Apartment Therapy.

The Apartment Therapy website

Additionally, information does not have to be in the form of text. For dyslexic users, seeing a product demo or having the option to interact with a product can help build trust.

Perceptible Information

Perceptible information refers to information that can be easily and quickly understood and digested. Since Attention Deficit Disorder (ADD) and Attention Deficit and Hyperactivity Disorder (ADHD) both have a high comorbidity rate with dyslexia, digital products with a high degree of signal compared to noise are the most beneficial. Signal, in this case refers to the important message of the a site, for example a call to action, while noise would be other aspects of a page that draw attention away from the signal. One of the primary features that separated the highly successful Nest Thermostat from other thermostat competitors was its ability to show users exactly the information they needed without any distractions. In the same vein, messy airline boarding passes can be incredibly confusing even to people who aren’t dyslexic. The application FlightCard for iPhone was created to combat messy, unclear boarding passes and make flight information more perceptible. Improving the ratio of signal to noise in digital products will improve their usability not only for dyslexics and suffers of ADD and ADHD, but for everyone.

Nest

Many landing pages have nailed the idea of perceptible information with single calls to action, clear, explanatory headlines, and images or films of their products. One way to consider how to make information more perceptible (as well as more simplistic), is to consider what I call the “foreign language test”. If this website were in a foreign language that the user did not understand, would he or she still be able to understand the basic tenants of the product? How clear would the calls to action be if they were written in a different language? Some information would obviously be “lost in translation,” but when considering both the signal-to-noise ratio and the clarity of the calls to action, this simple test can help to create designs that will improve usability.

In addition, there are many dyslexic-friendly fonts. One such font is Open Dyslexic.** These fonts are meant to improve readability for dyslexics. One way to create a more universal design and one that will be improve readability for dyslexics is to list a dyslexic font as the first font in a CSS document. Users who have dyslexia and have the font already will see a dyslexic-friendly font, while those without the font will view the website normally.

Tolerance for Error

Errors will occur for some users no matter how intuitive a design is created, so allowing errors to be reversed or minimized is a way of creating a more universal design. This is called “tolerance for error”. Understanding that users are prone to err will help create interfaces that do as much to abate error as possible. Dyslexics greatly benefit from spell check for obvious reasons. Much of my research was based on questionnaires made at Google Forms. User responses did not have spell check enabled automatically by Forms, and spelling mistakes were abundant. In fact, a few subjects were angry at me for not using spellcheck (this was not intentional, and successfully helped me visualize how dyslexia manifests). Dyslexics also pointed to Excel and other firms and field-based applications as a source of frustration, since these applications typically do not check spelling.

However, not every error alert is a positive experience. One of the more complex and controversial aspects of error tolerance is the popup warning message. This is a point of contention in the UX community. On the one hand, a warning or confirmation message gives a user the opportunity to correct a possible error, but on the other hand it can be obtrusive and, in fact, the source of poor user experience rather than a way to improve an experience.

There are plenty of examples of poor warning messages, (and since these are written messages they benefit many users, though not specifically dyslexic users), but one great example that can help everyone can be seen in Amazon’s purchase process. Once a purchase is made, a user can still cancel or change their order until it ships. The user thus has quite a while to make changes or cancel an order with no penalty or difficulty. Particularly for the dyslexics who told me they were scared to make purchases online for fear of making an incorrect order, this additional time to make changes can be the difference between a potential sale at an ecommerce site and an abandoned shopping cart.

Gmail allows users to undo sent messages.

Similarly to Amazon, Gmail allows users to undo sent messages.

Equitable Use

Finally, equitable use means simply that something works for everyone. This is, in essence, the cornerstone of universal design. Rather than dividing people into categories or personas, “blind”, “dyslexic”, “ideal user”, “male”, “able bodied”, we should instead view them as users, customers, and most of all, as people. We cannot rely on simply making a version that will work for the blind and a different version for everyone else. Instead, the goal from the outset should be to create a design that is as inclusive as possible. It’s a far broader guideline than the others, perhaps because it is so simple and so clear. Equitable use of a product means respect for an audience.

Designing for all

Designing for dyslexia is a unique challenge. It requires empathy, understanding, and the will to make design decisions that may not be based around what the majority of us, as non-dyslexics, might find to be ideal. Rather than ask the question, “Which user is best?”, we should ask the question “How can we reach everyone?” I believe that the crux of the issue lies in desire for inclusion and the courage to design for people who are unlike ourselves. I have almost never designed a product that I have ended up actually using, so it would thus be unhelpful for me to design based on my own intuition rather than what I know about others. The more equitable the design, the higher the likelihood that it will be adopted.

Designing for dyslexia is a call to action for designers. Universal design gives us a starting point for creating equitable, meaningful designs. For dyslexics, who are often overlooked in the design process, a more universal design can be the difference between usable and unusable, a great experience and a frustrating one.

*Author’s Note: Because Universal Design was created for designing physical spaces, this approach is being adopted for web only now and is still somewhat in its infancy. The remaining two guidelines deal with designing for physical spaces and for physical manipulation. While I do believe there is a place for these two principles of universal design in design for web and mobile, they are outside the scope of an article that focuses primarily on cognition rather than physical ability or disability.)

**Note: In full disclosure, Open Dyslexic was helpful in aiding me to find subjects to interview and also helped to publicize my questionnaire.


The UX Booth

Designing Penhaligon’s Bayolea Grooming Line: The vision behind the heritage brand’s comprehensive luxury range

Designing Penhaligon's Bayolea Grooming Line

With Penhaligon’s introduction of Bayolea, their most comprehensive men’s luxury grooming line to date, the brand has succeeded twofold. Having tested the entire product range for over a month now, it stands as an effective, enjoyable collection……

Continue Reading…


Cool Hunting

Designing a Truly Delectable Restaurant Website

You’re reading Designing a Truly Delectable Restaurant Website, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Designing a Truly Delectable Restaurant Website

Designing around food can be tricky. Think about it: Taking a photo of food is difficult. How can you explain the aroma of a great meal digitally? But there are plenty of things you can do when designing a website for a restaurant. The idea is to create a fully usable website that makes people […]


Designmodo

Designing Web Forms

9483382_sWhile most of the displayed content in websites is considered as output, web designers should not forget how important the input form is for their projects. Input forms can be used in sign-up pages and contact forms. Mainly, these input forms enable the company or the owner of the website to interact with the target audience.

There are many simple practices that you can apply in order to make the web forms on your websites more inviting. Here is a quick overview of some of them.

Simplify large amounts of information

The same way that a huge group of text can intimidate the readers, an unending list of boxes to fill out can also be very daunting. One way to encourage the visitors to fill out such list of empty blocks is to break it down into manageable sizes. Doing so will make the visitors feel like they are completing steps.

Breaking down the list can be done in a number of ways. For example, it can be simply split into a few sections and arranged into several rows or columns. Clear headings and horizontal or vertical rules can be used to divide these sections. Also, a long list can be divided into separate web pages. This way, only a manageable amount of information is presented to the visitors at a time.

Provide clear labels

Once you have broken down any large amount of information into bite-size chunks, the next important task to remember is to provide short but clear labels for every piece of data you are asking for. By using plain and simple language, you can avoid making the visitors confused or frustrated.

One way to go about providing clear labels is to use only a single word for each piece of information. For example, you may use words such as name, phone, email, country, budget and time-frame.

On the other hand, you may also carefully describe each label so that there would be no room for misinterpretation. For example, instead of simple using the single word “time frame”, you may use “Your expected project completion date is…” Also, instead of using a plain text box, you may put up a calendar on which the visitors may easily click on a date.

Another way to simplify the process of filling up input forms is to strategically incorporate multiple choices among text boxes.

Include interactive elements

Interactive elements can make a simple web form fun to fill out. These elements can also be functional, and can be used to point out some errors to the visitors. One easy way to do this is to highlight empty fields with a different color such as yellow or red. Any color that is noticeable against the color of the background or the original color of the text boxes will stand out, and be more noticeable.

Another example is to provide helpful messages to the visitors as they fill out the input forms. As the visitors start to type inside a text box, a simple and unobtrusive message can be shown on the side to inform them on why that piece of information is needed.


Web Design Fact

Designing For Christmas: The Ultimate Resource Pile You Need

Christmas is right around the corner. For designers and other creatives, Christmas is not just a season of giving and an opportunity to spend time with relatives and friends, but also a great chance for fun holiday design projects. If you’re having a hard time searching for various Christmas resources to spice up your holiday designs, look no further as we’ve done the work for you.

In this Christmas bundle, you’ll find plenty of free Christmas-themed fonts, greeting cards, wallpapers, icons, labels and badges to make your graphic and printing designs look festive and stunning.

All of the goodies presented here you can download free of charge. Just click the link, go to the primary source and download what you want.

Christmas Wallpapers

To get your holiday mood going, why not switch to a new desktop wallpaper that gives off a festive vibe? From Santa’s sleigh to Christmas wreaths, these can help put a smile on your face when you turn your computer on.

Winter Dolls

Xmas Roller Coaster by Carla Genovesio

Christmas wreath by dj2oon

Grumpy Cat Christmas

Little Christmas by tigz

Silver ball by joencurt

Christmas cookies by miroha

Christmas lantern by miroha

Merry Christmas and Happy New Year 2015 wallpaper

Christmas Sweets

Christmas lights by miroha

Christmas by nix44

Turquoise Globes

Santa Claus

Christmas and New Year by PimpYourScreen

Cute Christmas Cat

Fireworks In The Sky

Christmas and New Year by PimpYourScreen

Christmas Tree

Red Christmas Globes

Christmas Fonts

Here are free fonts that would be perfect for those Christmas themed designs you might be working on. These fonts are elegant, creatively inclined and festive enough for you to wish “Merry Christmas” to your loved ones.

PWChristmasfont by Peax Webdesign

DJB Holly Berry Wonderland font by Darcy Baldwin Fonts

One Starry Night font by Brittney Murphy Design

Christmas Time FREE Font by Lukasz KuIakowski

Mountains Of Christmas by Tart Workshop

Santa’s Sleigh font by HypoTypo

DK Clair De Lune font by David Kerkhoff

Berty Script by Jonathan S. Harris

Janda Sparkle and Shine by Kimberly Geswein

MTF Dear Santa font by Miss Tiina

Frosty Font by Font-a-licious

Yellowtail by Astigmatic

Sofia by Latinotype

Oleo Script font by soytutype

KR Snowflake 2 Font by Kats Fun Fonts

DJB Angel Baby font by Darcy Baldwin Fonts

Southpaw by Tyler Finck

Parker Font (Free) by James Lafuente

SUNN – Free Handwriting Font by Gatis Vilaks and krisjanis mezulis

Santas Big Secret BB Font by Blambot Comic Fonts

Christmas Icon Sets

These fresh holiday icon sets would be handy in adding some Christmas cheer into your designs. Have fun decorating your website, greeting cards, images, and other design-related elements with these icons.

Christmas Icons by Adina Neculae

Christmas Icons Set by CreAtive Web Themes

Happy Holidays by Assaf shalev

Freebie Flat Holiday Icons by Cat Lo

50 Free Christmas Icons 2014 by Ess Kay

Flat Christmas Icon Set (PSD) by Psdblast

100 Free Merry Christmas & Happy New Year Icons 2014 by Ess Kay

Free Holiday Icons by Jory Raphael

Christmas Icon Set by Melanie Grote

Holiday Icon Set by Jon McClure

Free Christmas Icons by Sam Jones

Free flat Christmas pack by Emanuel Serbanoiu

Free Flat Christmas Icons – 4 Styles by icons8.com

200 Free Snowflakes Icons by Freepik.com

100 Christmas Vector Icons by Freepik.com

Xmas icon set by Dmitriy Miroliubov

20 Christmas Icons by CreativeCrunk

Thin Vector Christmas Icons by Medialoot

Christmas Flat Icon by madefordesigners

Christmas Flat Icons by Fabio Di Corleto

Christmas Cards

Looking for something extra special this year? Congratulate your friends and clients with these smashing Christmas ecards and printable cards. All these cards are customizable, so you may add your own text on them. They are available in AI and EPS formats.

Vintage minimalist Christmas card by Freepik

Christmas Background Card by Graphicdome.com

Christmas card with light bulbs vector by Freepik

Elegant Christmas card with Santa hat by Freepik

Decorative Christmas Card with Ribbon & Candy by The Vector Art

Elegant red Christmas card by Freepik

Snowy Christmas card by Freepik

Christmas card with red ribbon by Freepik

CMYK Black and white Christmas card by Freepik

CMYK Christmas greetings by Freepik

Retro Christmas Flyer by Digital Space

Free Printable Christmas Card by Sophisticate Design

Christmas Greeting Card Set – Freebie by isoarts

Ugly Sweater Holiday Card and Gift Tags by Love vs. Design

Christmas card with gifts vector by Freepik

Christmas card with Santa and chimney by Freepik

Green Merry Christmas card message by Vector Open Stock

Christmas ribbon label card by Vector Open Stock

Christmas reindeer card abstract background by Vector Open Stock

Santa penguin snowman Christmas card by Vector Open Stock

Christmas Labels and Badges

With these Christmas labels and badges, you can turn any image into a holiday greeting card. Here, you’ll see badges in the form of snowflakes, Merry Christmas and Happy New Year greetings and other festive things.

Free Icons, Badges & Lettering For Xmas & New Year (Vector & PSD) by free goodies for designers

Merry Christmas ribbons and labels set by Vector Open Stock

Christmas badge vector by Freepik

Classic style Christmas badges by Freepik

Christmas label vector by Freepik

Decorative Christmas Banner on Blue Background by CGvector

Vintage Christmas badges by Freepik

Calligraphic borders collection by Freepik

Retro style Christmas labels by Freepik

Christmas Set – Labels, Emblems and Other Decorative Elements by GraphicLoads

Vintage merry Christmas label by Freepik

Retro style graphic resources for Christmas by Freepik

Christmas Vector Elements by carterart

5 Elegant Christmas labels by Vector Open Stock

Vintage Christmas stickers collection by Vector Open Stock

Christmas greetings pack by Freepik

Merry Christams Snowman Tag Vector by zcool

Black and white Christmas badges pack by Freepik

Free Vintage Vector Christmas Badges by Graphberry

Vintage Christmas badges pack by Freepik





hongkiat.com

Tips For Designing Your Own Website

17869332_sWeb design is very like fashion – always changing. To remain at the top of your game, you need to keep up with the latest trends. By ensuring you have a clean cut, fresh, easy to use and safe website – your site will always be up to date.

Here, are a few tips on ensuring you have the best and safest website you possibly can:

Clean and clutter free

Whilst the modern world and the web has become pretty cluttered – that doesn’t mean your website needs to be. All users like a simple to use website – so ensure yours is. Don’t use banners or pop ups as many users today believe this looks like spam and they simply won’t trust your website. Flat design and white space are in fashion at the moment and they look great. It is recommended that everything should be kept minimalist and simplistic for the optimum effect on the user’s experience.

Do your research

The most important thing to do before you begin designing your own website is to conduct your own research. Have a look at your competitor’s websites and see what they do to ensure a great user experience. Do you want long scrolling pages? What kind of contact page would you like? There are lots to consider and the best way to do this is to have a look at what other people are doing.

Make your site mobile

Ensuring your website is mobile compatible is vital today. With so many Americans using their smart phones or tablets to look at websites – you are guaranteed to receive more traffic if you ensure it can be viewed on these devices. Many website builders or agencies will provide you with the option to ensure your site is mobile.

Make it safe

The most important aspect of any website – especially if it is e-commerce is to ensure it is safe for the user to use and purchase from. The best way to do this is to ensure you have an SSL checker which will show users that your website is safe and authentic. Symantec currently provide the SSL certificate and the SSL checker which will prove to users that your site is legitimate and is safe to purchase from.

Content

Whilst the above is important, the next stage is to ensure you have enough content on your website to make it interesting to the user. Many digital marketers believe that content is king – it’s important to ensure you have a blog with the latest news on and that all pages are full of fun information.


Web Design Fact