Future of web design

Veridic Technologies Pvt Ltd :- Needless to say that web site design trends are incredibly changeable. They’re impacted by different factors, so it’s close to difficult to tell what tendencies will reign in annually or two in advance. The year 2015 has already passed and web site design specialists now can characterize the fundamental developments that are likely to be found in 2016. Professional web site designers understand how significant fonts and colours are, with regards to site creation. In 2016, typefaces are going to become bigger, more daring and more tasteful, while colours will not be muted. This is going becoming a remarkable change in the on-line type rendering – the one which has been anticipated for quite a very long time.

Veridic Technologies Pvt Ltd

Being among the more important tools that help bring the interest of consumers, cinemographs won’t lose their popularity in 2016. The year 2015 has brought remarkable developments to the way cinemographs look today. The major event which has changed their reputation is the accessibility of those live pictures on the advanced iPhone devices. The pictures that appeared static before, have now become animated and this couldn’t, but captured the focus of users. Correspondingly, web site designers are going to make use of all of the cinemographs characteristics to create visual effects that haven’t existed before. This is going becoming a brand new trend in the market that will demonstrate the consuming power of those images.

Veridic Technologies Pvt Ltd Reviews

The next change will influence the use of illustrations that are going to predominate over the photos. Gone are those times when conventional picture headers were used at the web sites, which makes them look similar. Today, the scenario has changed and the use of illustrations, that are regarded more personal and distinctive, became widespread. Well, some designers try to combine the use of pictures and images, however this will scarcely bring the wanted effect.

Veridic Technologies Pvt Ltd Facebook

It is because pictures can be altered to your liking, thus revealing the real essence and assignment of a resource, while pictures remain static and can’t be fixed to the requirements of your web site. Storytelling is comparatively a brand new web site design style, so you’ll find only a few samples of how this attribute can shift the whole perception of the website. You’ve probably seen the web sites presented by Lidyana and Nike. In case you’ve, then you really understand what I mean.

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd google-plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

Art Typography

Veridic Technologies Pvt Ltd :- Graphic design is an innovative process that combines art and technology to convey thoughts. It’s the procedure for conveying visually using typography and pictures to present info, typically used whenever visual intricacy and ingenuity are needed seriously to present text and visuals. It could also be applied to the layout and formatting of informative material to make the info more accessible and more readily comprehended. Designing a master piece graphically is the art of combining text and images to convey an efficient message. It’s primarily utilized in the design of symbols, pamphlets, newsletters, posters, signs, along with other form of visual communication.

Veridic Technologies Pvt Ltd

Graphic design is the use of words and pictures to pass on info or to create a specific visual effect. This art form might be referred to as industrial art due to its application to marketing and its essential contribution to company function. Graphic design practice includes an extensive array of cognitive abilities, aesthetics and crafts, including typesetting, visual arts and page layout. Graphic designers have a distinguishing ability to sell an item or idea through powerful visual communications, and are requested to undertake the challenging task of being innovative every single day. Combining visual rhetoric abilities with the interactional rhetoric abilities of user interaction and internet branding, graphic designers frequently work with web programmers to produce both the feel and look of a website and improve the on-line experience of web site visitors.

Veridic Technologies Pvt Ltd Reviews

Colour can be an additional powerful way of assisting users find their way around a site, and colour coding portions of the site helps consumers determine where they . Graphic design adds a visible and psychological circumstance to the strictly cognitive text on the site. The primary tool for this art form is, fundamentally, the creative mind. With the coming of computers and applications apps, the task of the designer became a little simpler, as these have supplied more efficient generation tools than conventional approaches.

Veridic Technologies Pvt Ltd Facebook

It’s an innovative career and things which were once only conceived in the mind are introduced to life through abilities and imagination. There’s a drawback to the inclusion of graphic design on sites. Many designers have attempted to force the Web to be what it is not, producing unsuccessful and at times unusable sites. There’s an inclination to overlook that phrases, and not pictures, are the building blocks for the majority of sites.

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd google-plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

User Interface design for Web

Veridic Technologies Pvt Ltd :-Wizard of Oz prototyping is a usability process in which a user interacts with a non working interface model being controlled by a wizard sitting in a back room. The wizard detects and responds on the user’s activities and models the system’s results to the user’s activities. Wizard of Oz prototyping is generally conducted whenever you don’t have a working model or where the findings from the Wizard of Oz prototyping test are basis for designing the system itself. And on the flip side, digital prototyping is the technically sophisticated model of Wizard of Oz prototyping, where a lot of the reactions from the user’s behaviour are executed by the image itself.

Veridic Technologies Pvt Ltd

Meaning: you already have a digital prototype which – to the user – seems to work like the finished website\/interface, but instead just delivering screen content without any logic in the back end. Wizard of Oz prototyping needs to be applied whenever you need to learn particular user behaviour to develop the apparatus you’re examining itself. Here is an example: whenever you would like to develop a voice control module for an application, you need the syntax individuals use to interact with the apparatus. Faced with that issue, you can barely develop a working model to discover how folks use your program.

Veridic Technologies Pvt Ltd Reviews

When faced just with cursor interactions in an interface, you may apply digital prototyping to get the desired findings. Develop a clickable wireframe that models the interaction procedures – but without any logic in the background. Where Wizard of Oz prototyping and digital prototyping are linked is, whenever you find problems where all test users stumble in your digital image, you can immediately alter the model to meet user behaviour and improve usability on the fly. Having a non working interface model, the wizard needs to see what the user does, since he’s to respond on user behaviour and produce proper output signal.

Veridic Technologies Pvt Ltd Facebook

Consequently the wizard will normally watch video feeds pointing to the test users control and display. Now finding an activity, the wizard is now able to model the results of the observed interactions. To improve the reality of the test scenario, the test users are most often unaware that they were socializing with a Mechanical Turk. This, naturally, needs a quick reaction and lots of knowledge about the system on side of the wizard.

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd google-plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

Getting (Dis)Connected: Shallow Interaction Design For Deeper Human Experiences

Veridic Technologies Pvt Ltd :- Our objects are becoming increasingly connected. My watch is connected to my phone, which is connected to the speaker in my living room, which I can also connect (or not) to the speaker in my bedroom. When I go out to dinner with friends, we have to make a concerted effort to keep our handheld and wearable devices silenced or otherwise placed “in the background” of our social experience, so that we can focus on each other.

Veridic Technologies Pvt Ltd

As our artifacts and everything around us become more connected, we run the risk as humans of becoming increasingly disconnected from each other — not in a tragic, dystopian kind of way per se, but in a real way that we need to take into consideration when designing for these experiences. We have a responsibility as interaction designers and user experience researchers to consider the ways in which we create interfaces for everyday experiences in the home, at school, out and about, and with our trusted advisors such as financial planners, doctors and educators.

Veridic Technologies Pvt Ltd Reviews

We need to consider which digital experiences we should make deep and immersive, drawing us into that Internet-connected world, and which digital experiences we should make shallow, supporting our interactions with one another. We refer to this latter form of design as “shallow interaction design” and view it as a shift in the paradigm away from more immersive forms of design practice.

Veridic Technologies Pvt Ltd Facebook

In this article, we’ll discuss the concept of shallow interaction design and show how we applied some basic principles of this approach to a learning game related to disaster resilience. The game’s goals were highly social; so, shallow interaction design was a critical component to ensuring the success of the game. We used shallow interaction design principles to ensure that the human-to-human interaction took precedence over the human-computer interaction.

Veridic Technologies Reviews

We’ll provide examples from the financial domain throughout and include a healthcare example at the end to show how these ideas transcend our particular case study and to highlight the increasing importance of considering when and where to design with shallow interactions.

Veridic Technologies

What Is Shallow Interaction Design? Link

Shallow interaction design is a new way of thinking about human-computer interaction. We define shallow interaction design as the patterns and features of a user experience that promote surface-level, or shallow, interactions with technology devices, to minimize distraction. Shallow interaction design focuses ongetting technology out of the way in order to support positive social interactions, like paying attention to the people and environment around you. Using shallow interaction design to reinforce human-to-human interactions is critical for activities that involve collaboration and cooperation among physical groups.

Shallow interaction design is a new way of thinking about human-computer interaction.
Shallow interaction design is a new way of thinking about human-computer interaction.

Immersive interaction design, by contrast, is what most interaction designers have been focused on for years. Immersive design patterns and features promote deeper engagementbetween the human and the technological interface and user experience. We have traditionally used key metrics like low bounce rates and long dwell times on websites to help prove that we’ve created immersive experiences.

Immersive design includes any feature or function that encourages a user to stay in the application. For example, think about content-based websites that encourage you to read the next article once you’ve finished your first one, or consider e-commerce websites that encourage you to compare your purchases to other people’s, to continue shopping once you’ve checked out or to review recent purchases. These experiences immerse you in the technology, rather than encourage you to connect with others in real life.

ADDITIONAL CONTEXTS FOR SHALLOW INTERACTION DESIGN LINK

Digital tools can be used to enhance any number of interpersonal interactions, such as a doctor’s appointment or a meeting with your financial advisor. Immersive approaches, which keep the user engaged in the technology rather than the human being in front of them, could erode those social experiences. Our goal in identifying shallow interaction design principles is to help designers think critically about the goals of the user and their context of use to ensure that they support the right types of social interactions.

Note: Throughout this article, we’ll use a meeting with your financial advisor as a parallel example to our game case study.

A traditional approach to meeting with your financial advisor might include a lot of paper in the form of bulky reports with reams of static information. To support the meeting, your advisor might spend a lot time deeply engaged in an advisor-side tool for examining fund performance and other analytics. You yourself might spend a lot of time trying to do homework on websites like Yahoo Finance or Morningstar. These artifacts and the way they immerse users in the information may impede a more dynamic, interactive conversation between the two of you.

In contrast, a shallow, digitally supported approach to designing a meeting with your financial advisor might involve a tablet-based experience with interactive data visualizations that you and your advisor can explore together. With a shallow approach, you would never leave the main screen, but rather would use callouts and modal screens to gain insights, without digging too deeply into the data down a rabbit hole of immersive inquiry. By keeping the interactions shallow, the digital enhances and supports the conversation between the financial advisor and the client, rather than derails it.

Case Study: Creating A Social Learning Game Using Shallow Interaction Design Link

OUR DESIGN CONTEXT LINK

Our design challenge was to create a digital tool that would support a face-to-face role-playing game that could be played in about one hour with audiences ages 14 and up. The game can be played as an ice-breaker or incorporated into larger curricula on disaster resilience and emergency response. It is intended for a wide range of audiences, including community groups, emergency management students and FEMA Corps trainees, to name a few.

We collaborated with the Koshland Science Museum of the National Academies of Science in the US to research, design and develop the digital tool and a supporting set of print collateral (i.e. playing cards, character badges, challenge boards) to bring the game to life. A key component of the game was that it was highly social. As we thought about how to integrate digital into a social gaming experience, we quickly realized that our traditional design approaches wouldn’t be good enough. We needed to rethink how to approach an experience that immerses players socially, rather than digitally. Shallow interaction design quickly became the strategy we deployed, iterated and evolved over the course of designing the game.

OUR APPROACH LINK

We used an iterative user-centered design process throughout the fall of 2013 and spring of 2014. We conducted front-end interviews with museum visitors to understand the social elements of a topic like disaster resilience. We learned that disasters are a very personal issue for people — nearly everyone has experienced one or knows someone who has. The idea of resilience existed at a personal and community level, and people were interested in better understanding what to do prior to a disaster in order to become more resilient.

We conducted five game tests with groups of players to refine and iterate on the game along the way. We played the game in its current state and used a follow-up survey to collect data about the social, digital and learning experiences we were interested in refining. Whenever we added a new element or increased the depth of interaction with the game materials and digital tool, we tested them to make sure that the social engagement didn’t suffer, so that the key learning goals would be achieved.

As we worked through iterations of the game, we found many areas of opportunity where technology could enhance the game. For example, technology (i.e. a tablet or mobile device) could reduce the amount of non-critical, paper-based materials needed to play the game by being a single point of information. Without digital, we needed paper to do all the work. In addition to critical paper-based elements like resource cards and character badges, we also had printed rule sheets for each phase and descriptions of all of the resources, which created clutter for players and logistical headaches for facilitators.

As we tested, we also realized that the drama of a disaster could be enhanced through surprises and unexpected events, making the social experience even more enjoyable. Technology can support sound, animation and non-linear game play, better reflecting what happens in real life when disaster strikes. We also learned from our players that they were really interested in narrative elements and ways to make the scoring more complex. Technology could certainly enhance both of these areas by providing a database of information for character back stories and in-game scoring based on what was happening along the way.

Below are just some of the ideas we thought of during our brainstorming sessions:

  • multiple and personal devices
    Players use their personal devices, and everyone in the game is accessing digital to play.
  • detailed scoring and leaderboards
    Detailed scoring and live leaderboards for the sectors and neighborhoods are used during the “prepare” and “respond” phases.
  • social media integration
    Social media feeds allow for inter-neighborhood communication.
  • resource tracking
    Resources are scanned and tracked.
  • character classes
    Narrative enhancements include character classes with special roles and storylines.
  • city health
    Players get a “live” view of city health.
  • data visualization
    Data visualizations show what is happening and where throughout the game.

So, where should we begin? Although we were interested in all of the possibilities, we knew we had to filter out the ones that had the potential to detract from the social experience of the game and carefully design a user interface and digital framework that wouldn’t let players get immersed in the digital experience.

OUR CHALLENGE LINK

The problem was that most of our ideas encouraged more interaction with technology, rather than with the players in the room. In a real disaster, technology and communications are often the first things to break down, making the social realities of disasters an important message to drive home and an important way to experience the game. These ideas would create an immersive digital experience and a shallow social experience — exactly what we needed to avoid. We needed to get the tech out of the way. We needed design solutions that would make technology fade into the background and reappear at just the right times to support human-to-human interaction.

We identified three key aspects of the game that were very successful during paper prototyping before we added anything digital.

Successful interactions during paper-based game:

  • social play
    Without any digital tools, the game was inherently social. Players were focused on the game, and there were no distractions from technology or anything else. It was paramount that we find a way to preserve this.
  • reflective learning
    The end-of-game discussion was also successful. It really drove home the key learning outcomes and engaged players in a reflective process. We didn’t want to lose this aspect of the social learning experience.
  • mobile facilitator
    Paper is easy to pick up and walk around with, which made it easy for the facilitator to walk around the room to manage the game. The facilitator experience was a critical element of the game, and we needed to support it and ensure that a digital experience for them would not detract from their ability to manage the room and co-create an experience with the players.

Extreme event paper game (non-digital) demonstration

We wanted to keep these aspects of the social experience in place while designing a digital tool that would support and further enhance that experience. We then identified the key opportunity areas for enhancing the game through a digital tool:

Opportunities for digital enhancement:

  • Reduce the need for paper.
    A digital tool could reduce the need for paper-based game materials, like rule sheets, resource descriptions and other pieces of paper that we play-tested with. In this case, technology could be a repository for this information. We simply needed to ensure that it didn’t immerse people so deeply in a digital experience that they forgot about the people around them.
  • Enhance the excitement of the game.
    The players, though social, were fairly subdued in our paper-based prototype versions of the game. There was a real opportunity to use shallow interactions to enhance the social aspects of the game and make it feel more exciting and dramatic.
  • Create a non-linear experience.
    The paper game forced a linear path through a script that did not leave a lot of room for reacting to the unique group playing the game. We wanted to see whether we could create a digital tool to support non-linear game play that strengthened the social relationship between the facilitator and the players in the game.
  • Provide a tool to support the facilitator.
    Although the paper version made it possible for a facilitator to remain mobile, it was challenging for them to track what was happening in the game. We wanted an experience that would help the facilitator “pick up and play” and make aspects of the game like scoring more interesting and more social.

Opportunities like these are not unique to the game context we were designing for. Rather, they are common reasons why organizations and groups decide to add digital experiences to their overall approaches. Consider the financial management example again. Financial advisors often create large reports and static documentation to share with their clients; they want people to be more engaged and motivated to participate in their financial planning; clients want to be able to jump around and explore pie charts and funds in a non-linear fashion; and advisors want tools that will help them facilitate conversations with their clients that are more meaningful. Although our design context was focused on learning, you can see how quickly these ideas can manifest themselves in other opportunities where digital support will continue to play a bigger role.

Shallow Interaction Design Link

To address these opportunities, while maintaining what we already knew worked about the game, we focused on shallow interaction design principles. Here are six shallow interaction design principles that we used to accomplish our goals. We’ll also briefly point to areas where we already see a particular principle being picked up or provide opportunities to consider these ideas in other domains more broadly.

1. SHALLOW WORKFLOWS LINK

The first place to start when creating a shallow digital experience is with the architecture, or framework, of the experience. A hierarchy diagram, like the one below, articulates the structural pattern of a digital experience. A typical hierarchy diagram for an immersive digital experience will show many layers of content reaching deep into an experience:

Immersive Hierarchy Example
An example of an immersive hierarchy diagram (View large version)

You can see that content is nested, fostering deeper immersion in the experience. To keep the experience shallow for our game, we needed a structure with much less depth, a flatter structure to keep players from getting too immersed in the digital experience, more like this:

Shallow Hierarchy Example
An example of a shallow hierarchy diagram (View large version)

Adding interaction to that framework, we used a consistent “tap, view, close” pattern to keep the experience shallow. The content always originates from a single source point, and players never venture far from their main screen. In the example below, a player could tap on any source point on the screen, such as the news items on the right side. A modal screen provides the player with the information without navigating them deeper into the experience. The information is raised to the surface instead, and players are able to quickly close the modal and be exactly where they started.

Tip: We can imagine how this might apply in a context where you’re examining dynamic portfolio data about your investment strategies with your advisor. Using a shared device, the two of you could view your portfolio and tap on specific areas of your investment to better understand performance or cash flow. A tap, view, close paradigm in a shallow experience allows you to keep the conversation going with your advisor without getting too caught up in navigating a dense system of analytics.

2. INCORPORATE PHYSICAL WITH DIGITAL LINK

Another area of opportunity for creating shallow digital experiences is to leverage and support existing game-critical paper materials. As designers, we often get so wrapped up in the digital that we forget the simplicity that paper affords and the opportunity it creates for maintaining physical connection with others. For the game, we kept critical items like character badges, resource cards and large challenge boards in their paper format, because these items supported the social aspects of the game. We embedded information from resource descriptions, rules and other details into the tool itself to reduce the amount of clutter from paper and take advantage of what digital is good at. We then augmented these with engaging elements like a storm tracker and a canned social-media feed to add some excitement and drama and provide players with additional information to talk about as they played the game.

We also mimicked as much of the paper design in the digital experience as possible to reduce the cognitive load on players and make the hybrid experience between social and digital seamless. Players needed to immediately understand the connection between what was on their digital devices and the physical objects in the game, so we mirrored the designs, as you can see in the images below of the physical (left) and digital (right):

Paper and Digital Game Materials
Paper and digital game materials are composed of similar visual elements. (View large version)

Tip: A common artifact of our financial lives is our monthly statement. Applying this principle of shallow interaction design to that experience would suggest that the most intuitive experience would mimic aspects of your monthly statement. Imagine engaging with a digital version of your monthly statement with your advisor, being able to ask questions while you navigated pie charts, line graphs and performance rates.

3. MULTI-USER DESIGN FOR ONE DEVICE LINK

One feature that we heavily debated at the beginning of our process was whether to leverage the personal mobile devices that most people carry around with them everywhere they go. We eventually decided that players would get too distracted by their own devices. They might get sidetracked with email or Facebook and completely derail the face-to-face aspects of the game.

Instead, we opted for an iPad-optimized experience that required groups of people to huddle around and interact with the device together. The final version of the game has one device for a table of two to eight people. To support group usage of the same device, we ensured that in-page elements were large enough for a group to view, and we used simple infographics to make content easy to understand at a glance. We also employed a two-panel scroll design, in which the panel on the left side scrolls separately from the panel on the right side, encouraging multiple players to engage with the device from either side of the device.

Content division allows for dual usage.

Tip: We see these types of interactions happening on large table-top experiences in museums and mall kiosks, but we haven’t yet seen examples of this design approach for tablet devices that might be shared among small groups working in collaboration. You could imagine sitting side by side with your financial advisor and collaboratively exploring data with them using a multi-user interface like this one.

4. OVERT SENSORY NOTIFICATIONS LINK

The paper prototyping taught us that technology could enhance the drama and excitement of a disaster when used at just the right moments. That drama and excitement feeds the social interactions happening in the room. We wanted to make sure that our digital devices didn’t demand too much attention, but that we could grab players’ attention when necessary using overt sounds and animations. We used animation to encourage players to focus on the devices just long enough to process the information and then dive right back into solving their challenges. We used sound to call players’ attention to their devices at just the right moments, rather than forcing them to directly monitor their devices along the way.

Animation and sound focus players’ attention at the right time.

Notifications are not a new idea, of course, but they are critical to the idea of shallow interaction design. We see these types of notifications increasingly in wearable devices like smart watches. Smart watches give users overt sensory notifications through short taps or buzzes on a user’s wrist, drawing a user’s attention to the device and the devices it’s connected to at just the right time.

Tip: We know that notifications are especially important for the types of experiences that we don’t need to be involved with every day. In the financial context, you don’t really need to check in on your retirement plan every day. However, if something major has occurred in the markets that has had a major impact on your investments, you’d want to know so that you could connect with your financial advisor. Simple notifications can draw our attention to what matters at the right time, rather than requiring us to invest our time in digital experiences that are unnecessary.

5. CONTEXTUAL GUIDANCE AND SUPPORT LINK

The facilitator role is critical in a role-playing game, as it is in many other social experiences (such as visiting a doctor, meeting with a financial advisor, etc.). The facilitator sets the tone for the level of social interaction and needs to be engaged with the end users of the experience. Below is the view for the facilitator of our game. On the left side of the screen is a script. The script includes helpful tips and dialog for the facilitator to use as they take on the role of chief resilience officer. This information helps facilitators of any experience level provide a consistent experience and encourage social interaction and play.

On the right side of the screen is an “action panel” that allows the facilitator to manage how and when participants focus on their devices. Throughout the game, the facilitator uses the action panel to send tips or challenges to specific groups, allowing the facilitator to control the level of difficulty faced by players in the game. Managing player attention in this manner keeps interaction with the digital tool shallow and allows for non-linear game play.

The script offers guidance to facilitators throughout the gameplay.

Providing support and tips throughout the digital tool helps to guide the experience of both facilitators and participants in the UI and provides for a more enriching and efficient experience. Education and guidance are considered useful for new users, largely evidenced in tutorials that are often found during initial use of a digital experience. These tutorials are often dismissed quickly by users, who are in a rush to get started. In shallow interaction design, support is contextual and helps to provide meaningful guidance at the right time. Providing the right piece of information at the right time helps users to accomplish their goals more efficiently. In the context of a hybrid digital-social experience, increasing digital efficiency frees up more time for people to interact in person.

Tip: In our financial context, this suggests providing educational content in the context of the client’s needs, which the advisor is typically most in tune with.

6. NO TECH DURING KEY LEARNING MOMENTS LINK

Finally, a not so obvious shallow principle was to simply remove any significant interaction with technology when it wasn’t needed. While creating the digital tool, we repeatedly asked ourselves, “Is technology necessary here?” The final phase of the game is perhaps the most critical to the learning goals. It involves a discussion led by the facilitator to help players reflect on the game’s mechanics and how they relate to real life, reinforcing the social aspects of the game. This discussion component worked flawlessly during paper prototyping, and we saw no reason to interfere with that. So, we eliminated interactions, animations and sounds during discussion periods to keep the focus on the conversation.

This is an example of the type of screen that players see during the scoring and discussion period of the game. Users require only seconds to read and interpret it, allowing them to quickly immerse themselves in the broader group conversation, rather than trying to interact with content or messaging on the screen.

Description of the image.

Limit or remove interactions during important offline moments. (View large version)

Tip: With one last look at our financial example, we can imagine aspects of a conversation that truly do not need any digital interruption or support. Advisors often ask a battery of important questions of their clients to assess their risk tolerance and life-stage goals. Although technology could find a way into this conversation, the goal of an advisor in this context is to build a relationship with the client. This requires close listening and empathy, which technology would simply interfere with. During moments like these, we’d recommend keeping tech out of the way and taking advantage of other shallow interaction design principles (like overt sensory cues) to draw users back to the digital experience at the right times later on.

Applying Shallow Interaction Design To Your Design Context Link

In our context, we focused on shallow interaction design principles to ensure that players stayed focused on gameplay, learning and the people in the room. As we’ve shown throughout, these same ideas can be applied across other domains outside of the games and learning context. We used a financial management example to show something on a very different spectrum of use, but what about other domains, like healthcare? Here’s one more example that will reinforce when and where shallow interaction design might be the right tool to pull out of your toolbox.

Perhaps the most important relationships in healthcare is between the physician and patient. Emerging technologies are just beginning to crack the surface of ways to enhance information-sharing and efficiency in medical situations. One could imagine a physician having a tablet to review a patient’s digital medical records, for example. To ensure a focus on interaction with the patient, the (hypothetical) tablet interface should implement a shallow content hierarchy, allowing the facilitator to tap on information relevant to the conversation, while allowing them to quickly view the information and then close it without skipping a beat in the conversation.

To ensure an easy transition from paper to digital, content in the UI could be organized in similar ways to offline material. Physicians are comfortable looking at patient charts. Instead of forcing them to relearn how to interact with this content digitally, the experience should incorporate cues from the paper materialto ease the transition into digital. This doesn’t necessarily mean that a UI needs to replicate physical objects entirely. Reproducing physical objects in a digital space can carry over physical limitations. An experience can incorporate a distilled essence of an interaction, content groupings or other familiar elements to quickly facilitate a connection between digital and paper.

It seems like a no-brainer, but in a physician-patient conversation,limiting the number of devices in use is essential. Doctors and nurses are already bombarded by a litany of technology devices — including tablets, in-room monitors, their own personal devices and more. The lower the ratio of devices to people in the room, the more streamlined that healthcare context will be, allowing physicians to focus on their patients and not on learning new gadgets.

Finally, contextual support is as relevant and valuable in this context as it is in any other. A digital patient chart could promote important content and potentially suggest additional contentthat might be relevant to the patient. If a patient recently reported falling, for example, the digital tool might notify the physician that the patient has access to a health and wellness program related to preventing falls through their health insurance. The doctor could make this information available to the patient in the context of the visit and reduce the amount of time required to search for content.

Conclusion Link

As we’ve shown and as most readers will probably agree, context matters in design. There is no set list of shallow interaction patterns or features that one should use or be checking off. We’ve identified six principles in this article, but there are likely many more. We also do not propose shallow interaction design as the only approach to designing user experiences going forward. Rather, we suggest that designers carefully consider the goals of their users and stakeholders (no different from any user-centered design effort) to determine in advance whether shallow interaction would better support the project’s goals. The table below highlights when to use shallow principles versus immersive principles:

When to consider immersive design principles When to consider shallow design principles
When the primary goals are time with technology When the primary goals are time with people
For social experiences that will happen online For social experiences that will happen in person
For content-heavy experiences For content-light experiences
When the goal is a diversion from real life When the goal is to augment real life

Shallow interaction design principles will continue to become even more important, especially as wearables become more ubiquitous and the Internet of Things increasingly becomes an reality. We have a responsibility to evolve our sense of what makes a good user experience both within and outside of technology across domains, from education to finance to healthcare and beyond. When we use technology in the right place at the right time through shallow design, we can create deep levels of engagement… with each other.

Sources :-  https://www.smashingmagazine.com/2016/03/getting-disconnected-shallow-interaction-design-deeper-human-experiences/

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd google-plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

How to use multiple parent selectors

Veridic Technologies Pvt Ltd :- Multiple parent selectors make for cleaner code – here are three ways to use them.

The internet is brimming with web design inspiration and tools to aid your web projects, which is helpful as designing for the web can get tricky. Making life as easy as possible is the key.

Veridic Technologies Pvt Ltd

Multiple parents make stylesheets much more terse, which is always nice. It reduces filesize and maintenance, so it’s something we’re definitely interested in. Here are three ways to use multiple parent selectors.

01. Preprocessors

multiple parent selectors

Use Sass

Currently, the most obvious solution is to use a preprocessor’s in-built nesting functionality to list our multiple parents, then nest our one child in it. This still compiles out to relatively verbose CSS, but it is nice and terse in our source.

Veridic Technologies Pvt Ltd Reviews

02. :matches()

multiple parent selectors

Use a pseudo-selector

There’s a pseudo-selector in Selectors Level 4 that provides this natively. :matches (or :any , in older specs) allows you to write much more terse selectors, which the browser expands internally.

Veridic Technologies Pvt Ltd Facebook

03. cssnext

multiple parent selectors

Transpile with cssnext

To get :matches() working requires a little extra work. It’s actually referred to as :any() in older specs, and requires vendor prefixing. To this end, I’d recommend using cssnext to transpile the new syntax back to better support.

Sources: – http://www.creativebloq.com/web-design/how-use-multiple-parent-selectors-31619554

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd google-plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

The psychology of logo shapes – a designer’s guide

Veridic Technologies Pvt Ltd :- The logo shapes used by big brands aren’t chosen by chance – we offer a primer in the psychology involved.

Veridic Technologies Pvt LtdWhen it comes to developing a brand, logo design is king. The power of a logo to elicit an emotional response can have a resounding effect on the way customers and potential customers view a particular product, service or company. A powerful logo may look simple but there’s nothing simple about creating effective logo shapes.

Be aware that the logo shapes used to portray the most visible brands in our culture have not been chosen by chance – there are some powerful psychological forces at work. In this article we’ll take a look at how the informed use of shapes can be used to give your logo the desired resonance.

Veridic Technologies Pvt Ltd

How humans view logo shapes

 Nike Swoosh
There are few more recognisable logo shapes than Nike’s Swoosh, but what does it do?

Our subconscious minds respond in different ways to different logo shapes. Straight lines, circles, curves and jagged edges all imply different meanings and so a skilled logo designer can use shape to infer particular qualities about the brand. Think, for example, of the Nike Swoosh: the combination of curves ending in a sharp point offers a strong suggestion of movement.

Particular logo shapes send out particular messages:

  • Circles, ovals and ellipses tend to project a positive emotional message. Using a circle in a logo can suggest community, friendship, love, relationships and unity. Rings have an implication of marriage and partnership, suggesting stability and endurance. Curves on any sort tend to be viewed as feminine in nature.
  • Straight edged logo shapes such as squares and trianglessuggest stability in more practical terms and can also be used to imply balance. Straight lines and precise logo shapes also impart strength, professionalism and efficiency. However, and particularly if they are combined with colours like blue and grey, they may also appear cold and uninviting. Subverting them with off-kilter positioning or more dynamic colours can counter this problem and conjure up something more interesting.
  • It has also been suggested that triangles have a good association with power, science, religion and law. These tend to be viewed as masculine attributes, so it’s no coincidence that triangles feature more prominently in the logos of companies whose products have a masculine bias.
  • Our subconscious minds associate vertical lines with masculinity, strength and aggression, while horizontal linessuggest community, tranquillity and calm.
  • The implications of shape also extend to the typeface chosen. Jagged, angular typefaces may appear as aggressive or dynamic; on the other hand, soft, rounded letters give a youthful appeal. Curved typefaces and cursive scripts tend to appeal more to women, while strong, bold lettering has a more masculine edge.

Veridic Technologies Pvt Ltd Reviews

How to apply logo shape psychology

 three examples
Three examples of simple logo shapes

Before you start designing a logo for your client, write down a list of values and attributes that the logo should convey. (This is one of the reasons you need to get to know your client and their business as well as you possibly can.) Ask your client to compile a list of corporate values or take a close look at their mission statement.

Veridic Technologies Pvt Ltd Facebook

Once you have a feel for the message the logo needs to disseminate, you will be able to look at how to match this up with not only logo shapes, but also colours and typefaces as well. Use these three elements in combination to your advantage: for example, if you pick a strong shape but find it too masculine, then introduce a colour or colours that will tone down the male aspect.

Gestalt theory

Gestalt Theory
The World Wildlife Fund logo uses the closure principle of Gestalt theory to describe a panda, even though the shape is not fully closed

To extend your use of psychology to a deeper level, brush up on the Gestalt theories of German psychologists from the 1920s. They hold that the human brain unifies the visual elements it sees to form a whole that carries significantly more meaning. People form patterns out of similarly shaped objects, while objects that differ from the group become a focal point of the image.

Another Gestalt principle, closure, is often used in logo design; this is when an object is incomplete but there is enough detail for the human eye to make the whole picture. A good example of this is the panda logo used by the WWF, shown above.

The logo shapes you incorporate into your designs become an intrinsic element in the message they will convey to the company’s customers and the wider public. Once you understand the psychology behind logo shapes you will be able to use this knowledge to create powerful brands for your clients.

Source :- http://www.creativebloq.com/logo-design/psychology-logo-shapes-8133918

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin https://plus.google.com/+VeridicInveridictechnologies Veridic Technologies Pvt Ltd pinterest  Veridic Technologies Pvt Ltd instagram

Software has bugs. This is normal.

1 VbhEsp8UiLfR3gZ0e768EwVeridic Technologies Pvt Ltd :- Disappointment occurs when expectations don’t match reality. And our expectations for software quality are profoundly unrealistic. Thus, lots of people are continuously disappointed — even enraged — by software bugs. They shouldn’t be.

The only reliable, widely used way to ensure impeccable software quality is to write less software that does less stuff, and then spend eons honing that tiny lot. Such an approach, however, is very rarely compatible with commercial success or even programmer motivations (despite what many may claim).

How do you think the market would receive the iPhone 7, if its headline improvement was cutting 1/3 of the features to shrink the code base so it’d have fewer bugs? Yeah, I thought so. While people may get excited in concept by “stop the train, we need to fix the tracks” directives for software development, it’s not what they would buy.

Well, but then there’s the argument: Apple is so rich, can’t they just hire more developers and testers to fix all the bugs? To paraphrase Frederick Brooks: No. Software development doesn’t work like that. Throwing ever bigger teams at problems usually just makes the problems bigger still.

Bugs are an inevitable byproduct of writing software. Sure, there are all sorts of techniques and potions that promise to decrease how many of the damn critters run about, but only the comically hyperbole pretends that complete eradication is possible.

Once we accept that simple fact that software = bugs, we can progress to understand why fixing them may not even be that important a lot of the time. The absence of bugs is simply one parameter of success in software, but not even close to the most important one (with some exception for life critical systems).

Useless software can be entirely bug free, yet remain entirely useless. Useful software can be ridden with bugs, yet remain highly valuable. Or, the value of software depends far more upon the problem it solves than the quality by which it does so.

Veridic Technologies Pvt Ltd Facebook

Sometimes the dichotomy isn’t that black and white, of course. You could have two pieces of software that solve the same problem, and it’s reasonable to think that the one with fewer bugs would do better. Though even that simple statement is often laughably disproven by the market. Factors such as existing adoption, integrations, brand, and fun often trump quality as well.

Given that there are so many factors more important to the future prospects of a software package and its makers, is it really that surprising not every bug gets “drop everything, we gotta fix this” priority? Of course not. But we, as users who hit a bug, still constantly pretend that it is.

It’s really the pinnacle of myopia when we as users demand and demean software makers to fix our pet bug, just because we hit it, and just because it may have caused anything from a slight annoyance to loss of some time.

The value of a any given bug can be rated by the number of users affected times the criticality of the issue. Lots of users are losing all their data due to this bug? Okay, then, Very Damn Important! Fix it NOW! Lots of users are a little annoyed or confused by this? Probably should fix it some time soon. A few users have to spend another 30 seconds on a work around? Unlikely to get fixed any time soon!

Software organizations that stay in business triage their backlog of bugs like that. They do not drop everything to deal with any damn bug. As the economies of scale kick in, so does the magnitude of consequences from such triaging. Large software packages and organizations will have hundreds if not thousands if not TENS OF THOUSANDS of open bugs of various criticality. THIS IS NORMAL. THIS IS EXPECTED.

Veridic Technologies Pvt Ltd Reviews

This is not a call to give up on software quality, quite the contrary. This is a call to remove the highly charged emotional responses of encountering the world as it should be expected to spin. Demeaning developers, questioning their professionalism (whatever that means!), or feigning outrage at that which ails all software makes everyone, including users, worse off.

So next time you hit an annoying bug, give it five minutes before you fire off that indignant tweet. Marvel at the miracle it is that anything as complex as a modern piece of software works at all! Consider the billions of instructions our work-horse CPUs have to get just right for you to enjoy the splendors of computing. Have some sympathy for man and machine.

Veridic Technologies Pvt ltd Facebook

Sources :- https://m.signalvnoise.com/software-has-bugs-this-is-normal-f64761a262ca#.896ndgbg1

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin https://plus.google.com/+VeridicInveridictechnologies Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

Want to learn JavaScript in 2016?

Veridic Technologies Pvt Ltd :-This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job in a position where Javascript would be at the forefront of what I do on a daily basis.

I should make it clear that my journey wasn’t as smooth as what I’m about to present to you, this should give you a much smoother ride. The inspiration for writing this article is that I’ve been asked how I’ve gotten to the level I’m at in JavaScript in just under a year. (Currently working full time as a javaScript developer at BSkyB.)

When I started it would have been great to have a pointer toward relevant information and resources to get me on my way. The hardest part for me was the middle ground. There are plenty of resources for beginners and for advanced but the intermediate content was a harder to come by, so I will make sure to include what I did there.

Veridic Technologies Pvt Ltd Facebook

One last point before I start is a massive disclaimer, I’m by no means at an expert level and I’m still learning lots but I also don’t foresee that learning progression about to stop anytime soon. When it comes to coding no one is the best and if you really enjoy it you’ll always keep progressing.


1.

Enter this journey with an open mind and no preconceptions on how you can utilise what you already know about coding from another language.

I say this because I don’t have a massive coding background. I was a freelancer for quite some years and like a lot of freelancers I just knocked out websites using WordPress. So I had very basic knowledge of PHP, lots of CSS, and HTML5. That is my background but a lot of people come from a strong coding background and when they come to JavaScript they try to implement the patterns they have learnt and incorporate them into JavaScript. Doing this I feel is not utilising the true power and nature of JavaScript.


2.

Now lets learn some basics, first port of call is to do something interactive. You could jump into a book like JavaScript: The Good Parts by Douglas Crockford (which I did!) but to me the book was a little too intense as a starting point. There are a couple of good online interactive courses and the one I chose wasCodecademy.

Once you start, you are faced with an application that looks a little like a code editor. Tasks need to be completed to proceed to the next level.

You get a good amount of basics learnt here, but more importantly you are actually coding and see results. This is key factor because actually coding is paramount to learning and far more effective than just reading books.(reading books/tutorials is a must but try typing out what you are learning)


3.

“You don’t know JS” book series by Kyle Simpson were a big part into actually learning relevant information about JavaScript. All the books are on Githuband free to view! Making the series open source and allowing the community to get involved in the outcome prior to being printed is a key part to the credibility of these books. Currently having 102 contributors, 253 closed issues, the level of scrutiny the content went under gives the series strong trustworthiness.

Since reading them heavily and regularly going back I’ve gone and bought the books I most used as hardcopies.
Doing this means I have them for offline reading and more importantly I hope I was able to support Kyle with his continued good work.

Up & Going is a superb introduction and where you should begin reading this series. What I’ve found great about the book series is the way everything is explained. You don’t just get told how something should be done and nothing more. You get told why and an in-depth background into the subject. When going through the literature you get a confident feeling that what you are learning has been thoroughly thought out due to its open source nature.

You are going to get a nice introduction into the language with subjects such as: Values & Types, Objects, Arrays, Functions, Built-In Type Methods, Coercion, Truthy & Falsy, Variables etc…

This You Don’t Know JavaScriptbook series offers a contrary challenge: learn and deeply understand all of JavaScript, even and especially “The Tough Parts”.


4.

Next back to YDKJS book series and getting an understanding into Scope & Closures.

When going through the book, as mentioned before it is a good idea to test what you are learning and you are given plenty of opportunities to do so by the author.
For this I went towards JsBin. You get 5 panels, HTML, CSS, JavaScript, Console and Output. The link I’ve given you will bring you to a page with JS + Console panels open.
This way you can test code straight away and see the output, look at screen shot bellow for an example.

 1-qJ3nXyPenNOrBnufm_cwYQ

5.

So you’re learning more and more, testing code out. What I did next was to try and be a part of the JavaScript community. I joined Twitter and Github.

Twitter was to start following influential JavaScripters + blogs + news sites here are a few to get you started: @getify, @_ericelliott, @BrendanEich,@holtbt, @jhusain, @andrestaltz, @drboolean and my self if you feel the urge! @_cmdv_

Github is a superb place to look for examples of code, to see how others are doing it and numerous other tools/frameworks/libraries that talented people make. It’s also a good way to start sharing what you do or even collaborate with others. Open source I feel is marvellous for the whole ecosystem, in what ever language you are doing. Some still feel it is a bad idea but I’m all for sharing my knowledge and using or contributing with others.


6.

Around now I was reaching the dreaded intermediate stage I briefly mentioned at the beginning of this article. I felt I was learning the basics but was just unable to think of how I could progress from here.

This is when frameworks came into light, lots of hype, talk of how easy they are to use and all the great things they can do. At the time Angular seemed like a good choice, it had a strong community. I’d be able to get a lot out of the box and actually start making things, I also dabbled in Ampersand.js.

Taking this choice for me was a slight time waster, not because the Frameworks are bad ones but I’ve come to realise that Frameworks come and go so often in JavaScript that picking one might not be the right direction to take. I then realigned my goals and felt that I wanted to learn how these Frameworks work under the hood! Optimistic I know, but in my eyes if you learn vanilla JavaScript then your skills/knowledge will stretch much furthers and for a longer duration than putting all your eggs inside a Framework.

I felt as if I was failing and finding it difficult to reach where I wanted to be, in reality I was being impatient. I did watch this magnificent video by Milton Glaser on the whole subject of failing and if I’m honest I still do. When dealing with a flexible language like JavaScript be ready to see endless options and opinions! So try not to get disheartened and try to think of the bigger picture. (Easy to say I know!)


7.

You have to remember at this stage, you actually have some great tools under your belt due to reading the two YDKJS books and playing around with the code. What next? For me it was video tutorials.

It came apparent that Kyle Simpson was also a teacher and he gave talks as well as various courses. In comes Frontendmasters.com, I know the name might make you think that it will all be front-end related but trust me it really isn’t. The course in particular I’m talking about is Kyle’s Advanced JavaScriptif you are a Pluralsight member it can also be found here.

There are free alternatives like continuing to read the YDKJS book series, but for me watching someone talk about a subject and have them walking you through the code is fantastic for knowledge retention. What’s great about the Frontendmasters video courses is they have a running theme to encourage you to follow along coding at the same time! But what is even better is you have the advantage of pausing and rewinding if you get stuck.

You have to remember the people giving these courses are knowledgable/experts and for me paying to access that felt right. Because of all the expenses it cost to actually get the video content out there, it’s only fair that there is a fee.

The course I pointed you to goes hand in hand with the first two YDKJS and the third This & Object Prototypes. Watch the course and work your way through the books too. I’m still going back to This & Object Prototypes book because the content is so useful. Look out for OLOO (objects linking to other objects). This will explain my early mention of how keeping an open mind will allow you to use JavaScript to its full potential rather than implementing patterns from other languages like the use of “class”. Here is an article that covers the issues with ES6 class.

But keep in mind that these are opinions and people also make great arguments towards the use of Class, it will ultimately be a personal choice.


8.

Eric Elliott has put together a vast list of Essential JavaScript Links. I advise you take a good look through this list as its content is really great. There is also lists of great news sites, people on twitter, videos etc… I’ll pick out a few articles that will be more relevant at this stage of your journey.

Now we’re starting to delve into deeper subjects combined with online videos this was how I got through this intermediary section of our trip.

Eric Elliott always give endless great content, with either his own or pointing to great content from others, he also has a course in the making here which might be of interest.

Right about now I took a shine to functional programming but I wasn’t aware at the time that functional programming was what I was actually learning. This may seem a little too in-depth but with your openness the more you look into the subject the more it will become clear why it is very useful. If you don’t feel this is the right direction for you then not to worry as I also took an offshoot.

Asynchronous Programming: The End of The Loop by Jafar Husain on egghead.io is a low level introduction into functional programming and there’s more to come on that subject but firstly lets take that offshoot.


9.

You might have noticed but incase you haven’t already come across it. Most current JavaScript libraries, plugins and frameworks are on a package manager called NPM, Ruby has Gems, PHP has Composer. To get full use of NPM you will need to have NODE.js installed here is a quote from the node site.

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

The lowdown is that Node allows you to run JavaScript on the server and this opens up endless options to the JavaScript world.

If you want to go a little more in depth then you can look at a paid course on both Plurasight + Frontendmasters.


10.

If you’ve reached this point you’ll be in a good place to start experimenting with vanilla JavaScript in an application environment. As I said previously I kept away from Frameworks but that’s not to say they are outright a bad thing, so I put my investigative boots on and went hunting for a potential option!

My findings were that React ticked all of my boxes, firstly it isn’t what I deem a full Framework because in reality it will only deal with the view layer and the rest of the app implementation is left to you.

 1-NjMcjjOX_17IaFZSB2pOfg

It teaches great implementations, like modular components how to deal with state (generally pointing towards a global state passed through the app in props). You’re not restricted to using all things React. You can use what ever to deal with your data layer, backend, api etc…
And more importantly if you know JavaScript you are in a really good place with React. Again back to some great video courses when it came to learning React.

Ryan Florence is a strong speaker and funny too so that makes it a little more entertaining. Initially I took the course on ReactWeek which was a 5 day course. I discovered and took the course once it had already completed as it was recorded. Though it is a very good course I’ve had trouble with playback of the videos and after trying to get help, a couple of email exchanges down the line I was just ignored because in their eyes my internet connection was the problem! But fear not they told me I was apparently the only one to suffer this issue! Ryan did a similar course though shorter on FrontendMasters. You will be surprised at how easy it is to get up and going when you know JavaScript with React.


11.

Now you could choose to continue reinforcing what you have already learnt or find new things to learn. I personally took a shine to Functional programming along with a library called RxJS by author and Sourcerer Matt Podwysocki.

RxJS logo

This all happened from taking a course presented by Jafar Husain, he is a very genuinely enthusiastic teacher. That to me is when I learn the best, if you are watching/interacting with a person who loves what he is doing it shows and you naturally become more interested. I know it sounds like I was paid for this testimony but trust me this all came out of my own pocket!

Unfortunately the course I’m talking about is due for release on FrontendMasters as I took it live a couple of months ago and it takes that time to get up onto the site. (It’s now been release and available to watch here!) Not to be a an awful tease here is another great video about the exact subject though not as in depth from Jafar.

For more knowledge on RxJS Ben Lesh’s tutorials on Egghead.io are an insightful way to get your teeth into RxJS, there a couple of new ones fromAndré Staltz.

I should mention that RxJs have a great gitter channel too, you’ll need Github to join but they are a really helpful bunch.

12.

I’ll make this the last step as this is really just going in the direction I have taken when really at this point you will be able to choose which direction you’d like to take.

The last video by Jafar gives you a good introduction of some functional programming concepts but you can dive in much deeper and this is what I’m doing right now. Here is a great book Mostly Adequate Guide by Brian Lonsdorf, he also did a course on the subject here

Functional programming is such an interesting subject and I’m sure I’ve unearthed something that will keep me busy for quite some time but like all things programming don’t ever expect to be completed!

André Staltz has also been working on a very interesting project calledCycle.js which combines functional programming and RxJS! I’ve not fully investigated it yet but so far it was a blast to use and if you like React then this will be right up your street.

Cycle.js logo

Finally we’ve reached the position I’m now in, maybe my passion helped me a lot when it came to learning so much in so little time but please don’t think all this information is set in stone, I regularly keep going back to subject I hit near the beginning of the course and I try to do more and more github repos. But I’ve only just recently come into an actual working environment so this is where my knowledge is really getting tested and I’m sure I will trip up a load but I’m prepared to learn from my failures as well as my peers and continue on my mission.


“It has been mentioned that I failed to mention testing and TDD

Testing is really important part when you start to code bigger applications or join a team. I was lacking in this area and since having joined a team I’ve spent a lot of time trying to learn testing/tdd/bdd in JavaScript. I really want to get into TDD but it is going to have to be a long term thing as you only get to reap the benefits when used constantly. Hopefully soon!

5 questions every unit test must answer

Why I use tape instead of Mocha and so should you

TDD React resources

Testing React Suite


Thank you for getting this far and to @deadlyhifi for the proof reading.

Good luck on your journey and I hope this has been an aid.

Sources :-  https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225#.sib3cp8l6

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd Google Plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

Web Development Reading List #127: jQuery 3, UX Research And XSS In Ads

Veridic Technologies Pvt Ltd Working on very different projects, in different teams and with different people can sometimes be a challenge. But one thing that works out remarkably well is doing retrospectives with your team.

In retrospectives, you talk about how a certain project went, and the whole team shares what problems/challenges they faced, what was good and what was annoying people, why people were unhappy. And after each person has written this down on a wall (you can use Post-Its), you try to find useful solutions, small improvements that avoid conflicts, that avoid people feeling bad in a project, and that avoid unnecessary stress situations. Ideally, you do this often — like every two weeks. In every team so far, talking about issues and addressing them has helped to bind the team together and improve future work. Let’s work more together in our teams instead of on our own.

Veridic Technologies Pvt Ltd Reviews

Concepts & Design Link

Tools Link

Security Link

Web Performance Link

  • Yoav Weiss clarifies Preload, a relatively new specification to define custom loading logic without suffering the performance penalty that script-based resource loaders incur.
  • Bruce Lawson explains why he personally thinks ad blockers are important. While that is just another opinion, it also reveals some lesser known problems of advertising these days. The major point here being the cost of large JavaScript files, graphics and banners that matters way more in developing countries than in our cheap-data-plan countries. Notably, he also mentions that we finally need to find alternatives to displaying ads to gain money from publishing content on the web.

HTML/SVG Link

Accessibility Link

Veridic Technologies Pvt Ltd Facebook

JavaScript Link

Work & Life Link

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation or share this resource with other people. You can learn more about the costs of the project here. It’s available via email, RSS and online.

Thanks and all the best,
Anselm

Sources :- https://www.smashingmagazine.com/2016/03/web-development-reading-list-127/

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd Google Plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram

How to create animations that scale for all devices

Discover how to make animations shine in a multi-device world.

Veridic Technologies Pvt Ltd :- Animation on the web is particularly nuanced, as we have to adjust our work to take into account bandwidth, code compatibility and product design. In this article I’ll explain the recommended set-up for a truly responsive scalable animation. I’ll also cover different ways of working with the animation to achieve positive user experiences and parity across our multi-device world.

I will cover a selection of key use cases: adding CSS animation to SVG sprites, dealing with standalone graphics that require complex movement, creating a responsive experience that adjusts to the viewport, and making animations simpler for mobile.

I highly recommend using SVG (Scalable Vector Graphics) for graphics with responsive animations. These are resolution-independent, so you won’t have to load up additional HTTP requests or bog yourself down with replacement image media queries.

As an alternative to the img attribute, the picture element handles image replacement quite nicely, but when dealing with different-sized moving images, it becomes much more cumbersome to keep the animation consistent. SVG is far superior in this way: we can write code once and continue to adjust the visual complexity of our image.

SVG also provides a navigable DOM, so it becomes simple to reach inside a complicated graphic and animate elements individually. As its name suggests, SVG is built to scale. It’s incredibly simple and intuitive to adjust the size of a SVG.

Even with these key features, though, units and even the way we perceive images will change from screen size to screen size. Don’t worry; I’ve got you covered! Let’s take a look at a few ways of working with responsive animation.

Veridic Technologies Pvt Ltd Facebook

SVG sprites and CSS animation

This first technique works particularly well for responsive, standalone animation – for example when illustrating text. We start with a typical responsive sprite, and adapt not just the size of the image, but the complexity of the graphic too. This makes a lot of sense when you think about what we can visually interpret on a smaller screen. In order for the graphics of our animation to remain clear, we must also consider screen real estate.

scalable-icon

With this approach, as well as changing the size we also reduce the complexity of our design

Take a look at the illustration above. On the left you can see we have designed for desktop, tablet and mobile implementations. On the right, we have done two things to get ready for export.

The first is to remove repetition. We can see clearly that the desktop and tablet views are similar enough that we could either alter the properties or replace them with CSS media queries. An example of such an alteration would be to adjust the background so it’s green instead of blue. For the mountains, the change in design between different device sizes is significant enough that we will need to apply a class on the element to hide or reveal it.

The most important part of this technique lies in the way we’re handling the viewBox attribute. You can think of the viewBox as a little window in which we view the SVG. The SVG itself can extend beyond the bounds of the viewBox, but only the area within it will be visible. The rest will be cropped out.

For the desktop and tablet versions, we want only the first tile to be shown, so initially we set the viewBox inline in the SVG to cover just the top section of the sprite: viewBox="0 0 490 474" . We then shift the visible area with JavaScript to "0 490 500 500".

Complex movement

Any time you have a standalone graphic with
more complex movement, I suggest switching to the GreenSock Animation Platform (GSAP), rather than using CSS. Although there are loads of cool things that GSAP has to offer, the main advantages in this case are twofold.
The first is cross-browser stability.

Thanks to all our browsers and systems, frontend development means a large testing matrix. When we include mobile, it gets exponentially more complex. Older Safari browsers on older Apple devices can have spotty support for moving SVGs, and there are a lot of gotchas on Android as well. GSAP offers really stable movement, without sacrificing speed.

The second advantage is the timeline. This allows for the stacking of tweens and even staggered effects, with streamlined and intuitive code. For the rest of the examples in this article, I’ll pair GSAP and SVG.

Let’s first establish that animating elements with transforms and opacity is the most performant approach. It’s easier for the browser to optimise because it reduces repaints, which is the most important thing to keep your eye on for jank- and stutter-free animation.

Also, if we use the attributes within the SVG DOM they will scale in tandem with the entire SVG, because they are honouring the space within the viewBox. So if you scale a complex SVG using percentage, flexbox or other techniques, your animation will also scale accordingly. This means you don’t have to adjust anything; you can focus on writing your code correctly just once. And that is a pretty huge boon.

Full-scale-design

The original design in illustrator – we design everything first, and then slowly reveal things

For example, let’s consider a really complicated animation like the one shown in the image above. I will usually design all the elements I need first, and slowly reveal them over time. This allows me to plan things out in advance, which leads to cleaner, more legible code.

The finished animation is completely scalable – you can randomly adjust the button while it’s running and have the entire thing adjust to a new percentage (see image below).

Scalable-button

The animation changes size when you click the button, but the animation experience stays consistent

Responsive UX

Designing a responsive experience that adjusts to the viewport relies on some planning in the design stage. You can think of it like little interlocking Lego blocks: we go through the design, build and development stages, scoping each particular area to itself, but what the user ends up with is a complete (yet completely different) view on each viewport.

We took this approach for our Huggy Laser Panda animation. Take a look at it by visiting netm.ag/demo3-278. We designed this carefully, considering the units that would have to switch and stack.

On mobile, to make the pieces correctly interlock, we adjust the positioning of the right section (outlined in magenta for clarity), and flip it so it can stack appropriately.

We make sure each part shown in the boxed sections is exported within individual SVGs and properly named, including smaller units or groups. This means in our export settings (I use Jake Archibald’s SVGOMG), we do not remove unnecessary IDs or groups.

We then use multiple functions. Each section is scoped independently, and there is one repeated function for all of the animations that loop.

20

This makes the design much easier to build off and reason about. We can even pause each animation initially, so it can be triggered by a user click event. Now everything is scoped to its requisite section, all the way from design to finished product, it’s easy to know where to go for adjustments.

We separate out these builds and have each Lego-like piece adjust via percentage, and it scales beautifully. Alternatively, flexbox would work equally well, depending on the support level.

Less pizazz on mobile

Let’s face it, mobile connections (particularly in less developed countries), can be pretty slow. Whether you only have a few key animation interactions on your site or a huge WebGL experience, sometimes an animation that looks beautiful on desktop need not scale down to a mobile experience.

In the case of a large canvas animation, or even a really complex SVG animation that is non-critical to the user experience, sometimes the best thing you can do is to tone it down or turn it off for smaller devices.

Active Theory’s site does a beautiful job of this (see image below) by showing you a full particle canvas animation on desktop, which is replaced with a simple polygon background on mobile. The interactions on mobile are still very on-point, transitioning beautifully beyond even what we expect on native.

Active-theory

Active theory keeps its visual language consistent, while dropping heavy canvas animations on mobile

The team still shows off its interaction prowess in the way you navigate the site, which is arguably more impressive on mobile than an animated background would be anyway. The design saves the bandwidth for what counts.

Conclusion

Whether you design for responsive from start to finish or simply turn animations off on mobile, having a concrete plan for what your viewers experience from device to device is vital. This is particularly true in a landscape where mobile is king. Content, type of image, and user bandwidth all help guide animation choices for responsive design.

Source :- http://www.creativebloq.com/web-design/how-create-animations-scale-all-devices-31619478

Veridic Technologies Pvt Ltd facebook Veridic Technologies Pvt Ltd twitter Veridic Technologies Pvt Ltd youtube Veridic Technologies Pvt Ltd linkedin Veridic Technologies Pvt Ltd Google Plus Veridic Technologies Pvt Ltd pinterest Veridic Technologies Pvt Ltd instagram