A few months ago at New Visions we were in the midst of a big rebranding project. As part of this endeavor we wanted a new landing page to show off our new product branding. This landing page had to be fast to load and easy to update — these requirements led us to choose Next.js. A third requirement though didn’t have quite as obvious an answer.
You see, we had an existing domain for the app, but to keep existing traffic we wanted use this same domain name for our landing page. And we couldn’t just steal this domain…
Writing style that updates based on a component’s state is a really common pattern on the web. There are several ways to dynamically update your styling depending on what you want to do. Let’s look at a few.
The simplest way to update the style of your component is by using
ngClass. This directive can dynamically add or change the class name of an element within your component. Let's imagine we have a button element that we want to mark as primary or secondary. We can write the following:
With the above code, we’re toggling the
primary class on the…
When starting a new project or feature it’s a good idea to write semantic markup first, then style it the way you want. Building markup-first ensures that your product will make sense, and be accessible to those using keyboard navigation or screen-readers. Once your markup is in place, you can then start styling the interface.
Ideally, you won’t be creating every element from scratch. A sufficiently mature component library will contain at least the most common interface elements like buttons, cards, and inputs. By leveraging these pre-built elements you can avoid writing additional redundant markup or styling.
Generally in the…
The artifacts we create as digital designers rarely reflect the full and final product experience. We’re building complex, interactive products—the usefulness of our pictures and slideshows is fleeting, and often limited.
Static mockups, still images and clickable slideshows are very useful early on in the design process. They allow us to quickly communicate our ideas in a tangible way, get quick feedback on the broad direction of a design, and validate concepts early. It’s also one of the cheapest and easiest ways to perform usability testing.
In order to test an experience, someone needs have the experience.
That said, while…
I recently attended Artifact Conference in Austin, and listened to talks from some super talented people like Jen Simmons, Brad Frost and more. Over 3-days at Artifact I learned a lot, and was inspired in many ways. One quote that really resonated with me as a front-end designer was when Jen Simmons mentioned in her talk that:
The design is always going to be finished when the CSS is being written — Jen Simmons
Security concerns aside, here are my first impressions on the interactions of Face ID.
The great simplicity of Face ID comes when unlocking iPhone X every day, every time you use it. No more fumbling with the (now extinct) Home button to get in, just lift and look to unlock — that’s about as seamless as unlocking can be.
This simplity in one area came at a cost in another area though: Apple Pay.
Meal logging is a must-have feature in Noom Health and Coach. Therefore, it must to be quick and intuitive to log the food you’ve eaten and get insightful feedback. With the help of the UX research team and the input of other designers and engineers, I was able to fix some big problems with the food logging experience, and re-design it to be as straight-forward and intuitive as possible.
Through user testing we got to see what users did (and didn’t do) in the app. The biggest issue we saw was that users were having difficulty navigating between the search…
🗽🇨🇦 | UI Engineer at New Visions for Public Schools | Engineering grad from uWaterloo