16 CSS Lessons via Post-it® Notes 16 CSS Lessons via Post-it® Notes Cascading Style Sheets Operate on Inheritance CSS has a ancestor-descendant relationships. Anything previously defined by an ancestor will automatically be inherited by one of its children unless otherwise specified. Building your design portfolio? Here are 8 things I wish I’d known. — Doing the Work Building your design portfolio? Here are 8 things I wish I’d known. Two years ago, I was finishing my last semester of college, and preparing for the seminal moment in a design student’s life: portfolio reviews, and finding a job. And even though I was finishing a degree in graphic design, I was looking for a full-time job as a UX/UI Designer.
Interaction ProTip #4: Nobody Expects 3D Neat huh? The only downer is that the use of box-shadow during the animation causes paints, so I can’t wholeheartedly recommend it for use on mobile devices (sad face). For high performance animations you always want to limit yourself to compositor-friendly options, like I said at the start, where the GPU gives you a hand and you avoid layout and paint. Side Drawer Navigation Could Cost Half Your User Engagement Anthony Rose is co-founder and CTO of zeebox, the social network for TV. So, you have a mobile app where there are more pages or sections than can fit on a mobile screen at once. Your first thought might be to create a tabbed design, with a row of tabs along the top or buttons along the bottom. But wait… that extra row of tabs or buttons wastes a lot of valuable real estate on a small mobile display, so let’s not do that. Instead, let’s move the options into a side menu, or side drawer, as our Android team keep reminding me it’s called.
What Can CSS Filters Do for You? CSS filters have been around for a while. They originated thanks to SVGs – Scalable Vector Graphics – in order to apply different image effects to vectors. Today, CSS filters are not limited to SVGs but can be used for images, text and everything else you can find on a web page. How Do Filters Work?
Why the Flat Design Trend is Hurting Usability The flat design trend has taken over the graphic design world in a very short amount of time. One of the first big interfaces to go flat was Windows 8. However, it wasn’t until the release of Apple’s iOS 7 last summer, June 10, 2013 that we really saw a huge increase in the many interfaces, websites, apps, and more that adopted a flat design. Before then, most designs were skeuomorphic with lots of 3D effects, gradients, and texture. The look is both trendy and modern, and the new design trend is still surrounded by a buzz.
The Guide To UX Design Process & Documentation - Part 1 In this article, we explain the general product design process and relevant documents you might produce at the first three of seven stages. It is meant to be a flexible framework as opposed to a strict recipe. These ideas are covered in greater detail across 150+ pages in the Guide to UX Design Process & Documentation e-book. The following is an overview of product design and development documentation, constituent elements, and the respective phases to which they belong. The development process and resulting documents can vary widely between companies, as many follow their own unique design and development principles/methodology.
Slide and Push Menus Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. View demo Download source A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how to trigger the opening and closing of the menus and some example media queries. The HTML iOS Human Interface Guidelines As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.
Stylish CSS3 progress bars You've seen progress bars everywhere, they are those bars that display the current completion state for a process, such as a download or file transfer. Whether you're building a desktop or a web application, at a certain point, you may need to use this UI element. Having said that, in this article you'll learn how to create stylish and animated progress bars using CSS3.