background preloader

All Design Lessons - Hack Design

All Design Lessons - Hack Design
Related:  Articles

Startups, This Is How Design Works – by Wells Riley GoodUI Evidence Thank You To All Those Who Made This Possible GoodUI Evidence is made possible by people who believe in sharing their amazing A/B tests for others to benefit from. Share your test by reaching out to me (and sharing at least two screenshots) to make this project even better. Franklin Valadares Oskar Zabik Louis Reingold Steve Benjamins Jakub Linowski Andrei Zakhareuski Rick Dawson Syed AtiF Husain Greg Van Horn Nicole Morris Dragoi Ciprian Scott Sharp How Do We Set The Strength Of Effects? Here is how we've color coded the effects of each test to make it easier to separate the strong from the weak. Strong Loser 300+ conversions and a p‑value of 0.03 or smaller Possible Loser 100+ conversions and a p‑value of 0.25 or smaller Insiginificant A p‑value higher than 0.25 Possible Winner Strong Winner Don't Have The Time To Run Your Own A/B Tests? It's fine if you do not wish to bother with complexity of setting up, planning, QA'ing, waiting, analyzing, winning, losing, waiting, reseting, your own A/B tests.

8 visual design tips for UX designers The UX industry places an enormous emphasis on usability. User stories, site maps, wireframes, and usability testing get all the limelight—while visual design fades into obscurity. But in my experience, aesthetics plays an important part in almost every user’s experience of a product. I work at Illumina, a life sciences company in San Diego, California. And this isn’t just a personal obsession. Beauty alters how we think and behave. Gestalt psychology offers one explanation for this: people perceive the entirety of a thing before they see their individual parts. With all that in mind, here are 8 principles of Gestalt psychology you can use to improve usability through better visual design. 1. The principle of proximity states that people perceive objects near each other as a single unit. Personally, I love the 12-column grid included with Bootstrap. 2. The principle of similarity states that we tend to groups objects that have similar shape, color, and shadows. 3. 4. 5. 6. 7. 8.

Typography tips for a more comfortable read There are 3 small changes you can make to your content to provide a more pleasurable read. The tips don’t just apply to design—use them to make your text documents look great, too. The names of each principle may be complicated, but understanding and using them is simple. For demonstration purposes, I’m going to use an un-styled page from A Clockwork Orange by Anthony Burgess. Important note: every font is different, so if the content doesn’t feel right, go ahead and adjust your measurements. Use typographic hierarchy to give a clear sense of the structure of a page Typographic hierarchy is the visual hierarchy of the text on a page. Imagine a textbook. “Use typographic hierarchy to give a clear sense of the structure of a page.” All font sizes should be derived from the body text, as this is what will be most-read on each page. Body text: increase or decrease the text size until it’s comfortable to read. Here’s what the page looks like after following this advice: Further considerations

6 key insights on UX design At Dom & Tom, we’ve developed mobile apps and online platforms for over half a decade. We’ve had the privilege of working with amazing companies like General Electric, Hearst Corporation, Priceline, and many more. After working on over 300 such projects, we’ve learned a ton of lessons. Now we’d like to share 6 important insights to help you take your user experience to the next level. 1. One of the key issues of UX design is you’re always working against time. “If you can’t present your ideas, even if they’re fantastic, they won’t go live.” Design isn’t only about doing great work—it’s also about creating and holding a great presentation. The people you’ll present to are either product managers, VPs, or even the CEO. Each of them has their own role in the company, and they might not fully grasp the effectiveness of your improvements. “Within seconds, people must be able to understand the value you’re going to provide them.” The best way to do this? 2. “Great design tells a story.” 3. 4. 5.

UX design tips for your app A gorgeous app with poor UX isn’t a gorgeous app—it’s an invitation to frustration. Your users deserve better than that. The UX design tips in this article aren’t groundbreaking. Hopefully, you will already be familiar with most (if not all) of them. But for some reason or other—maybe due to oversight or perhaps we were given unrealistic project deadlines—we sometimes neglect these crucial UX design considerations. “A gorgeous app with poor UX isn’t a gorgeous app—it’s an invitation to frustration.” Here are a few tips that will help enhance your app’s UX. The UX should adapt to the user Everybody’s different, so why should the UX be one-size-fits-all? Your app should be aware of my personal condition. My favorite travel apps, for example, present the right information before I even ask because they have learned my preferences through data such as geolocation, usage, and app settings. “Everybody’s different, so why should UX be one-size-fits-all?” Adaptive UX examples Am I on wifi?

Why empty states deserve more design time An empty state, or zero-data state, is an afterthought for many designers. The thing you design last—if at all—because it’s a temporary or minor part of the user experience. But don’t be fooled by the name. Empty states are actually full of potential to drive engagement, delight users, and retain users at critical moments like when someone downloads the app, clears out their content, or runs into an issue. These empty states are commonly known as first use, user cleared, and errors. But let’s think of these moments in terms of the user’s perspective: First impressionMoment of successMoment of failure These tipping points in the user experience can lead to 2 very different outcomes: Temporary or permanent abandonment of the appA higher level of engagement and loyalty A key decider in which side of the scale you fall on is how much thought you invest in this small but significant design element. The lasting impact of a first impression But not always. How to fill an empty state 1. 2. 3. Motivate.

A Comprehensive Reading List for and by Designers Updated 8/10/2016: We've recently updated this list to include even more of our favorite designers’ recommended books. Happy reading! Being big bibliophiles here at InVision, we asked some of our favorite designers to recommend the book that inspired them the most this past year. Check out the most popular answers and the top designers who recommend them, plus 5 inspiring periodicals. Just My Type by Simon GarfieldGarfield uncovers where fonts come from and why we need so many. Sydney Emery Graphic/motion designer at Vevo Decorative Logo DesignThis image-heavy book explores the marks and logos of charming brands. Yoga Perdana Coordinator Designer at Volcom Indonesia David Cran Illustrator, Designer and Photographer Dangerous Curves: Mastering Logotype Design by Doyald YoungThis book exhibits Young's amazing collection of typography by focusing on the form and curves of the letters. Ryan Hamrick Owner of Baselime LTD Ken Barber Chief Letterer and Typeface Design Director at House Industries Sven Read

lossy compression Definition from PC Magazine Encyclopedia Definition of: lossy compression lossy compression A compression technique that does not decompress digital data back to 100% of the original. Lossy methods can provide high degrees of compression and result in smaller compressed files, but some number of the original pixels, sound waves or video frames are removed forever. The greater the compression, the smaller the file. Lossy compression is never used for business data and text, which demand a perfect restoration (see lossless compression). Lossless Vs. Business data requires lossless compression, while audio and video applications can tolerate some loss, which may not be very noticeable. Sometimes Hard to Tell The top JPEG image is one fifth the file size of the bottom image, which was compressed the least. Easier to See With Text The top JPEG image was compressed the most, and the text is not as sharp as the least compressed. Lossless GIFs Are Better for Text The same text is saved in the lossless GIF format.

Make Your UX Design Process Agile Using Google’s Methodology In an age of tight resources and constrained finances companies are more reluctant than ever to commit to big design projects without a thorough understanding of their chances of success. Google has developed a methodology to make the design process fast and still offer valuable insight. Forget minimum viable products and focus on prototypes and build and test in a week! The Google Design Sprint Process Overview operates in a 5 phase process. Each phase takes approximately 1 day to perform (8 hours) and all 5 phases take approximately 40 hours to execute in full. Author/Copyright holder: DX Lab Design Sprint. Like all good design processes – there is room for iteration. The 5 phases of Google’s Design Sprint: Unpack Sketch Decide Prototype Test Unpack. Let’s take a look at each stage: Unpack Google’s Sprint process is designed to be run by teams rather than individuals. In the unpack phase, you bring everyone together and “unpack” all the knowledge of the problem within the team. Sketch Decide

The Surprising Power of Minimalist Web Design We’ve all heard this, right? It’s the idea that by refusing to clutter our designs up with lots of stuff just to make it look like we did something, people actually end up seeing more because they can focus on what’s really important and impart their own meaning on the blank space. That’s certainly the case with a well-done minimalist web design. But beware: when minimalist web design is done poorly, it can work against you. Define the objective. Minimalist designs work best when there is a clear goal for the website. Find your focus. Look for what’s iconic, beautiful, or memorable. Create an unexpected juxtaposition. Build a bridge between two ideas or images that seem unrelated. Get united. One of the worst things that you can do is have your design look like a bunch of disparate items that don’t seem to have anything to do with each other. Embrace whitespace. This is often the biggest challenge when communicating with clients. Get squared away. Details, details, details.