Gaming
Entertainment
Music
Sports
Business
Technology
News
Design
Fitness
Science
Histoy
Travel
Animals
DIY
Fun
Style
Photography
Lifestyle
Food
2018-04-25T20:14:57.701Z
0
{"feed":"Viget-Articles","feedTitle":"Viget Articles","feedLink":"/feed/Viget-Articles","catTitle":"Design","catLink":"/cat/design"}
In Part 2, we're picking up where I left off with current tools for animation with JavaScript (mostly in the form of JavaScript libraries). Be sure to check out Part One. Javascript is admittedly a more controversial method of animation than the methods I mentioned previously (Video, Gifs, CSS Transitions + Keyframes). There was once a day when we longed for CSS support of animation and, when that day came to pass, many disregarded JavaScript animation as non-performant and outdated. But now, JavaScript animation is making a come-back in a few different forms (and no, none of them are just changing CSS classes). There are far too many libraries out there to cover them all, so I'll try to cover more broad techniques with some notable libraries: jQuery Using jQuery as an animation tool (with .animate()) is pretty outdated. Unless you really need your animations to work in IE versions 9 or less, then using CSS transitions will probably serve you better. In my opinion, it’s better to just swap classes with jQuery and let CSS handle the transition. Status: Supported, but less performant and generally frowned upon. Best use case: If you are already using jQuery, .slideDown() is still useful if only because animating height on a collapsing element is still a huge pain for some reason, even in 2018. See the Pen jQuery SlideDown by Megan...
We’re now well into 2018 and I’m thinking it’s time for a check-in. A lot has happened in the world of the web in the last few years, so let’s review a bit: Responsive Design is now the norm. Clients know what User Experience Design is now and not only respect it but expect it on their projects. Concerns for Web Accessibility are growing. Internet Explorer is all but dead and browsers are in a state of constant improvement without being locked into one version or the other. Overall, I’d say things have really taken an amazing turn for the better (for developers anyway). Now that we’ve begun to cover the basics of the availability and understandability of our content and tools, what’s next? I like to think the next era can focus not on technology, but on how we can make the web feel more like our natural world. And don’t worry, I’m not talking about skeuomorphism; I’m talking about motion. Smarter people than I starting talking about this subject back in 2014. Basically, it starts with the observation that the web is not like the real world. On the web, it’s normal for things to appear, disappear, and move abruptly and instantaneously. Is that normal in the real world? Not really. Therefore, animated experiences just feel better. And this isn’t just a vague principle or intuition either. Statistics support that animated experiences (video in most studies) increase engagement and understanding. In fact, you’re less likely...
Data visualization is a powerful tool for exploring and explaining data. Visualizations typically leverage scale, position, shape, and color to convey meaning and understanding. While these facets represent the core of a visualization, the web offers an opportunity to incorporate interactivity, transitions, and movement. When used effectively, these additional dimensions help users better understand a dataset by showcasing individual elements or key groups, demonstrating change over time, or communicating changes in scale. The examples and best practices shared below represent a sample of the myriad ways interactivity and animation can add value and clarity to data visualizations. Showcase Elements and Sets Perhaps the most immediate application of interactivity within data visualizations is the ability for users to drill deeper into datasets with a hover or click. This pattern is common across most interactive dashboards and charts and is built-in to tools such as Google Charts and Tableau. This type of interaction is valuable because it provides additional context, allowing users to understand the details of a specific data point or group as it exists within a larger dataset. Tooltips As with images and text elsewhere on the web, hover effects can provide an opportunity to provide context and information This Upshot profile of Peyton Manning’s 2014 touchdown pass record leverages hover tooltips to great effect, allowing an initial version of the visualization to tell a clear story within a historical context without being muddied by extraneous data. Users can engage with...
Writing a reflective blog post about the process of self-reflection seems like it could easily take a confusing turn, but I’m going to go for it anyway. I just finished a 10-week apprenticeship in digital project management at Viget HQ in Falls Church, Virginia, and I have a lot to think about. When I started at Viget I was briefed on digital agencies, project management tools, the processes of each team, general company information, and each project my mentor was leading—all in week one. It was a challenge to find any white space in my calendar, which became a pretty common theme for me. Despite the business of those few days, I had the first of many chances to pause and digest everything I had learned so far. Each week during the apprenticeship, I sat down with my mentor for 45 minutes to talk about the work I was doing: What did I learn this week? What did I still need experience in? What didn’t I understand? What was I enjoying? It was a moment for me to ask any questions I needed to, explain how I felt about something, or just think out loud. It wasn’t a coincidence that this has become such a part of my daily life. Viget has an intentional culture of frequent reflection. The apprenticeship program had built-in weekly one-on-one meetings with my mentor, Grace; bi-weekly meetings with Amanda, who directs the apprenticeship program,...
A year and three months ago, I quit my nonprofit job to attend the Fullstack Academy of Code. My experience at coding bootcamp was textbook: I worked 80 hours a week. I hoarded take-out boxes from Uber Eats. I forgot the meaning of “sleep”. After those four months, I felt more than ready to dive in and excel as Junior Frontend Developer at Viget. Enter, reality check. Or rather, a CONFLICT (content): Merge conflict in index.html. There’s nothing like a Git error message to induce the cold sweats of imposter syndrome in a newly minted coder on her first week of the job. Coding bootcamps are generally successful in teaching you how to program — the basics, the language, the stack. However, they don’t necessarily teach you how to be a programmer — one with deadlines, client requests, and legacy codebases. Sweat-inducing Git errors would turn out to be just the start of this steep learning curve from bootcamp student to full-time programmer. Today — nine months into the job and a couple client projects under my belt — I’m still on the curve, but it’s getting easier to climb. Let’s take stock. Here’s what it’s been like to go from bootcamp to office, and what I’d do differently for a smoother transition. “Oh god, I don’t know anything” Thinking back to my first days at Viget, I can still feel the mild panic seizing my chest as I stared down the sprawling...
What do you think about when you think of “brand”? Is it a logo? A name? Color palette? If so, you’re on the right track, but you might be missing something. Because when it comes to brand strategy, there’s one element we often overlook — voice and tone. Having all of the elements that go with a brand strategy, but not having a distinct voice, is sort of like wearing your favorite pant suit to a networking event...and simply reading off your resume. You might feel like Alicia Florrick from The Good Wife, but as far as everyone is concerned, you’re about as compelling as the finger food. Okay, you might think, but what exactly is voice and tone? We like to say that voice is consistent, while tone flexes. You, the person reading this, have a voice. It stays pretty much the same from day to day, but your tone changes based on whether you’re in a meeting, out with friends, or trying desperately to get your sock away from the dog. It’s the same with your brand. And the great thing is that brand voices can be as funny, inspiring, or serious as you want them to be. For example, let’s take the sentence: the quick brown fox jumps over the lazy dog. And let’s say your voice was Ernest Hemingway. It would sound a little like this: The fox jumped over the dog. The fox was afraid and when...
There are dozens of articles on how to setup your Heroku app to use Cloudflare. They all leave out two crucial security steps. Encrypt and authenticate communication between Cloudflare and Heroku. The first issue pertains to selecting the SSL mode for your app in Cloudflare. The option I’ve observed most people choosing, “Flexible SSL”, means the communication between Cloudflare and Heroku is left completely insecure. Which means all those nice passwords and personal data just get to float through the internet. Securing this communication is super important (especially in this day of data breach outrage), and really easy. Choosing “Full SSL” is a decent option as it encrypts communication, but it’s still less secure than “Full (Strict)”. It will encrypt communication between Cloudflare and Heroku, but won’t perform authentication to ensure that Cloudflare is actually talking to your app. So I’d recommend always using “Full (Strict)”. Setting things up to work properly for this SSL mode is straightforward: 1) generate an origin certificate on Cloudflare, 2) install that certificate on Heroku. On the Crypto page in your Cloudflare account, find the section “Origin Certificates”, and hit “Create Certificate”. Choose the hostnames of your website (not your herokuapp.com or herokudns.com hostname), and choose an expiry (up to 15 years). Then in your Heroku app’s Settings page, scroll down to domains and certificates and click “Configure SSL”. Click the “Manually” option, and proceed to install the generated cert. (If you run into an error, and were previously...
Every 6 months, the development team here at Viget gathers in some remote location to ensure our ship is heading the right direction. The tradition began nearly 7 years ago, and through all of the team's highs and lows, our bi-annual offsite has always been a consistent source of positivity. It has served as one of the most valuable facets of being a member of this team. There are a number of activities we run through as a group, and most recently, we spent a few minutes assembling our thoughts around the core values underlying our team. Everyone took five minutes, a couple of Post-It notes, and came up with their top three. We threw the batch on the wall and then mostly nodded our heads collectively. To very little surprise, there were similarities all over the place. I'll touch on some of the high level themes that ran through the group's results. Quality "High quality code", "well-tested code", "quality work", "writing good software". We value and expect quality work out of everyone on our team. This perpetual desire for quality is one of the reasons we feel good about the work that we're doing. It gives more junior members goals to strive towards, and it keeps the flame lit for our senior members to stay sharp. As the industry changes and technologies fade in and out of the limelight, our foundation of critical thinking and quality development ensures we're always...
I sat down with our Development Director, David, last week to talk about Viget’s Development team, what they are working on, and how we should grow over the next 6 months. I left the conversation inspired. The purpose of this article is to provide a snapshot of what the Viget Dev team is currently working on. Hopefully, you’ll find this list as inspiring as I did -- there is a huge range of scope, duration, team size, technology, and client type. If you think you’d enjoy contributing to these types of projects, I hope you’ll consider applying to work with us or at least introducing yourself so we can keep in touch long-term. Here’s a quick rundown of the dev work we’ve done this quarter (January - March, 2018). We just started a quick, two-week project to build a small app with a React front-end and Rails back-end. It’s a fast paced, collaborative project with two Devs and a UX Designer. This is part of an ongoing engagement we have with a tech-focused venture capital firm. The developers on this project have been writing Go, React, and Ruby.We’re currently adding a new product to the custom content management and e-commerce platform we built previously for Wildlife Conservation Society (WCS). This is a multi-year relationship, and the Viget team has spanned all disciplines (design, UX, data, backend dev, front-end dev). The developers on this project are writing Ruby.We recently completed what...
A while ago we ran the Pebble Rocks Boulder (PRB) hardware hackathon here in Boulder, Colorado. This was a 48 hour non-stop hackathon focused on the then freshly announced Pebble smart strap. Collectively the goal had been to bring together talented folks and technology in the hopes of generating a handful of clever ideas and projects. However after the dust settled, and the antics were over, what was created was far more than we had expected. We invited teams from around the nation to compete, but instead they ended up collaborating. Teams cannibalized a 3D printer farm, sprawled into one another's spaces, stayed up late debugging each others problems. As organizers we had unexpectedly stumbled into a world that could, in truth, only survive for two full days. It was a taste of festival life but without the extremes. Along the way we picked up some tips and tricks for running this sort of event, and we’d like to share those here in case you decided a hackathon may be a good idea.
.code-block code { max-width: 826px; margin-left: auto; margin-right: auto; } .code-block .line-numbers-rows { display: none; } .code-block pre { padding: 50px 20px; } Collaboration is a critical component of successful software development. While there are many opinions on how to build the best software, one decision is a given for most projects: using Git for version control. The data in Git is critical to understanding how things change over time in a project. Is this work a feature or a bug fix? Does it resolve an open issue? Does it introduce a breaking change? These days, Git extends beyond version control. Web services like GitHub provide tools for issue tracking, sprint planning, and more. In these integrations, Git data is a critical piece of digital project management. With that in mind, this article will share some tips to communicate effectively using Git. In the following examples, I'll be referencing tie-ins with GitHub. Most concepts apply to services such as GitLab and Atlassian's Bitbucket. Tip 1: Use Great Branch Names $ git checkout -b login-page When starting a new feature, naming the Git branch something relevant makes sense. But what if there is more than one active issue referencing the login page? ...
In 2000, the Tate Gallery (which encompasses the Tate Britain, Tate Modern, Tate Liverpool, and Tate St Ives) underwent a massive rebrand. It emerged sporting its now famous, mottled logo and the truncated name “Tate.”
Tate’s rebrand wasn’t just cosmetic. London-based agency Wolff Olins describes the work they did as “reinvent[ing] the idea of a gallery from a single, institutional view, to a branded collection of experiences.” The following year, Tate's overall annual visitor numbers rose 87% to 7.5 million, prompting the Observer to write that Tate "has changed the way that Britain sees art,...
When a field is always changing, and there’s always something new to learn, what does it take to go from apprentice developer to journeyman? Questions like this have been at the back of my mind for the last few weeks, while I’m coding and in the times in between. Fortunately, this kind of thinking is encouraged during the Apprenticeship training program at Viget. Along with participating in the global curriculum and contributing to client work, the program's discipline-specific training portion has helped me gain new programming skills and a better understanding of what other skills I want to build. On my second day at Viget, I received a copy of Edmund Lau’s The Effective Engineer, a book packed with lessons on how to learn and leverage one’s efforts at multiple career stages. By reading a few pages each night, I immediately picked up insights that shaped my approach to the apprenticeship. I’ve been more intentional and discerning about spending time on activities that will offer the best long-term benefits. My purpose in writing this article is to share ways that my first six weeks as an apprentice marked a shift in how I learned web app development. Getting Started with Rails To give some context, I never worked in Rails or Ruby before six months ago. I worked in science for over a decade. As a postdoc, I enjoyed using formulas in spreadsheets to streamline data analysis, and I dabbled...
Usability is central to the work of user experience design, which means that user research is central to our work as designers. At Viget, we've come to see research and design as inseparable. Yet it isn't enough to conduct research every now and then, when a client asks for it. What's needed is a culture of research, a shared habit of testing design assumptions with real people. A few years ago, we realized that we weren't doing the research we needed to be doing, and had to change. This post describes our shift to become a more research-oriented group of designers. We’ve grown as design researchers since then and hope that what we’ve learned along the way can help you improve your process and convey the value of research to clients and coworkers. Here are some of those lessons. 1. Commit to making research a priority For research to become integral to the way you work, it needs to be prioritized across your entire organization — not just within your design team. To that end, you should: Identify and share achievable research goals. By identifying specific goals, you can share a clear message with the broader organization about what you’re after, how you can achieve those goals, and what success looks like. Early on, we shared our vision for research at Viget with everyone at the company, in particular talking with folks on the business development and project management teams about specific ways that they could help...
While Olympics highlights and Valentine's day memories are fresh in our minds, I'm here to ease you into the impending month of March. Not for the basketball madness, or St. Patrick's day traditions — but for the tech tradition of SXSW and next week's festivities. And in what will be our third consecutive year with multiple talks, we'll be sending our own small crew to Texas — including some fresh faces — for the knowledge, for the sharing, and for the free things they hand you while walking around. In addition to our two workshops, here are a few talks, and thoughts on SXSW 2018: Thought: "I think the implications of AI are growing and being discovered at, or behind the pace of, AI tech which makes it an increasingly interesting, albeit a little scary at times, technology to learn about and work with." - Ian Brennan, Viget Developer Talk: Regulating AI: How to Control the Unexplainable Recommended by: Ian Brennan, Viget Developer When: Friday, March 9, 12:30PM - 1:30PM Where: JW Marriot, Salon 6, 110 E 2nd St The rise of AI seems unstoppable—from finance to advertising, medicine and logistics, AI is reshaping industries. But the biggest hurdle to the adoption of AI lies in how well this “black box” technology can be controlled. Indeed, the past few years...
Over the last few years we’ve worked with a number of startups who have engaged with Viget for help designing or engineering some aspect of their connected product. Every product is unique, but it may surprise you how similar their challenges are. What is perhaps less surprising is the number of inventive ways we’ve seen solo-entrepreneurs, young startups, and even internal business units with firm foundations go about solving those challenges. I’ll take a moment to reflect on some of those challenges and specifically call attention to the missteps and follies we commonly see early-on in engagements. Building the wrong prototype Viget builds primarily two different kinds of product prototypes. A stakeholder prototype, which focuses on delivering desired functionality by leveraging as many pre-existing solutions as possible. And a functional prototype, which focuses on exploring production options by honing in on core mechanics and functionality. Both prototypes serve specific needs which often correlate with the natural phases of product development. Sometimes the prototype should support buy-in for an idea, other times it should help sell the path forward. In both situations the prototype is the center of attention. The prototype is what you share with your team, your boss, investors, and your crowd-sourced customers (even your mom!). Because of the spotlight, it needs to behave in ways that put a good foot forward. This is why we’re...
In our series on design systems, we’ve discussed the advantages and approaches to creating a system from a design perspective. In this post, I’d like to cover some of the technical benefits of a well-organized built design system, or “parts kit”. By now, you’re hopefully convinced of the benefits of a design system and are ready to invest the time and money to partner with an agency, like Viget, to create something that achieves your vision. The next step will be to apply it to your digital platforms by building it. But wait! If the design system represents your vision and investment, a good parts kit is like insurance that protects that vision when it goes out into the world. The Importance of Building it Right A well-constructed parts kit has many benefits that can ensure the consistency and longevity of a design system. The investment in development quality is equally important to the investment in design and will have a long-lasting effect on the success of the system. Systems Are Easier to Maintain and Extend One of the lesser-known challenges of building and launching a site is efficiently maintaining it after it’s launched. Ongoing work, big and small, can quickly bloat a codebase as developers unfamiliar with the project (or even original developers once they’ve moved on to other projects) drop in for bug fixes and new features. Without a system, these developers are forced to recreate...
In our last article, we explored why you might seek help getting started on your Design System and where to begin. Now, we’ll explore what goes into one. What goes into a Design System? There are some differing opinions on exactly what goes into a Design System and how best to structure the inventory. From what I’ve seen, the differences from one system to another are mostly about nomenclature and how best to organize things. For us, we’ve largely defined Design Systems as "a digital library of guidelines and resources." 
Guidelines Simply put, these are the documented...
The other day I needed to download the contents of a large S3 folder. That is a tedious task in the browser: log into the AWS console, find the right bucket, find the right folder, open the first file, click download, maybe click download a few more times until something happens, go back, open the next file, over and over. Happily, Amazon provides AWS CLI, a command line tool for interacting with AWS. With AWS CLI, that entire process took less than three seconds: $ aws s3 sync s3:/// Getting set up with AWS CLI is simple, but the documentation is a little scattered. Here are the steps, all in one spot: 1. Install the AWS CLI You can install AWS CLI for any major operating system: macOS (the full documentation uses pip, but Homebrew works more seamlessly): $ brew install awscli Linux (full documentation): $ pip install awscli Windows (full documentation):Download the installer from http://docs.aws.amazon.com/cli/latest/userguide/awscli-install-windows.html ...
About a year ago, we began collaborating with Pura Scents to make their connected fragrance dispenser a reality. Their team had ironed out a concept that people loved, and during a successful Kickstarter campaign, paired it with an aesthetic that sold well. However, they needed next some outside help to bring their connected device to life. Among the firmware, software, and fleet management aspects were two specific product features with technical intrigue that struck me as worth sharing, firmware/hardware-level features that anyone working within a hardware startup can appreciate.  Control systems for targeting and maintaining temperature (or speed, or anything) Imagine driving a car with cruise control. How annoying would it be if your car accelerates a bit beyond the target cruise speed then coasts for a moment or two before physics rears its ugly head and your car drops below the desired speed again? This, of course, necessitates another bump in acceleration and thus the cycle repeats. Accelerate, coast, accelerate, coast. That would be annoying and also terribly inefficient. A better solution is to maintain effort. This, more or less, is what you’ll find written among the first few pages of a process engineers playbook for this situation: proportional–integral–derivative (PID) control. Instead of turning a heater on whenever the temperature for a fragrance dipped below its optimal burn temperature, we integrated and tuned a PID loop...