20 Practically Applicable Breadcrumbs CSS Designs

Breadcrumbs help you to find your way back to the place you started. In many modern user interface design, breadcrumbs are considered in the core design itself. If you have used the iPhone X and its successors with a notch, you can see your previous applications link at the top left corner when a link opens another application. Showing the way back helps the user from getting lost. If you are running a website with tons of pages and subpages, breadcrumbs help the user to find the related contents easily. For example, in a directory website, when the people directly lands on a luxury hotels category page, from the breadcrumb they can easily jump to the main hotels page.

Breadcrumbs are also used in the progress trackers to let the people easily jump to the section they want. Whether you are using the breadcrumbs for the webpage or applications, there is a design for you in this breadcrumb CSS list. Instead of using the same arrows and texts links in the breadcrumbs, you can use some modern design elements. There are lots of design inspirations in this list, make sure you check all of them.

Read More


20+ iPhone Mockups For All iPhone Models Till Date

For the past few years, the iPhone design remains the same. Last year we got the new all edge to edge screen design with a notch. Now we have the plus size phones as well, so technically there are four types of iPhone designs. In this list of iPhone mockups, we have managed to collect the mockup of all the designs.

With the introduction of cheaper iPhone XR, it is clear that the notch screen design is going to be the design standard for the next few years. But still, there are millions of customers who are comfortable in owning the big chin previous generation phones. If you are an app developer, you have to consider both types of audience. In this list, we have included iPhone mockups for all the famous sizes so that you can showcase your designs elegantly.

Read More


21 Must-Have iMac Mockups For Designers 2019

There is nothing like having a 5k iMac screen on your desk. The all in one design makes your desk clutter free from the wires and gives you plenty of desk space. Engineers at Apple has made the machine minimal and it gives an artistic touch to your workspace. In this list, we have collected some of the best iMac Mockups to reduce your presentation and design showcase work.

As of now, in every Apple product lineup, consumers most favorite color is the space grey. With the iMac Pro, we get the space grey color, but the regular iMacs still have the aluminum look. In this list, we have also included the iMac Pro mockup for those who love the space grey color. The razor-sharp edges with the wedge-shaped design give a powerful machine in an elegant form factor. When it comes to the screen, there is nothing like the iMac’s 5K retina display. Colors and the details can be seen clearly on the screen. The iMac mockups on this list show the screen clearly and your content can also be seen neatly. All you have to do is to add your contents and showcase your inspiring designs with your audience.

Read More

Line Drawing Animejs

20 Amazing Ways You Can Implement Anime.JS Animations On Your Website

Anime.js is a lightweight JavaScript animation library which features multi-target, simple and powerful API. It works with almost anything including CSS properties, SVG or DOM properties and even other JS objects. It is similar to jQuery or any other familiar JS library that you might have worked with previously. In simple terms, it makes complex follow through and animations extremely easy to come up with. If you are looking for a library small in size yet works with even the simplest timeline sequences, and other web elements, then this is surely the ideal place to get started. Thus, the implementation of anime.JS has surged over the past years. And since, its first release on June 27, 2016, it sure has made a huge impact on designers and developers all over.

So today at uiCookies, we wanted to take a look into the anime.JS and their usage even further. From simple animated texts to sliders, loaders, spinners, and even design element, we have made a list of the best anime.js examples that you can get a closer look at. Each of these examples includes a preview and a link to their coding snippet. So why start from scratch when you can get a head start with all of these fantastic options online? And if you still decide to get started on a blank slate, these can provide you some ideas and structures that might come in handy.

Read More


20 MacBook Mockups To Elegantly Present Your Designs In 2019

Apple has a wide range of MacBooks that fit the needs and budgets of all people. Currently, we have the new MacBook Air with retina display, old MacBook Air, MacBook, and MacBook Pros with touch bar and without touch bar. If you are looking for high-quality mockups for all these MacBook models, this MacBook mockups list will help you.

The design engineers in Apple always give an artistic touch to their products. This artistic touch gives a fresh look to our digital products, websites, and applications. Even if you are a case or accessory manufacturer for MacBooks, these mockups will help you give a natural look to your product.

In this MacBook mockups list, you will not only find the device mockups but you will also see the workspace mockup to give a realistic view. As these are all premium mockups you needn’t worry about the quality and the ease of use. All you have to is to replace the layers with your objects and elements. In order to give you more options and also to save your time, we have collected mockups for the most used 13-inch, 15-inch, and 12-inch screen sizes.

Read More


28 Easy To Use Free Countdown Timers With Cool Effects 2019

Visual effects and animation effects have become a part of the web design. Developers use these animation effects to create engaging contents. Marketers are very keen in using these effects to get a better product reach and good conversion rate. Countdown timers are one such element which is used to create a sense of urgency when the users land on the page. In this list, we have collected the best free countdown timers with cool effects.

You might have seen countdown timers mostly used in e-commerce websites and event websites. In e-commerce websites, the countdown timers are used just near the special offers to make the user feel the scarcity of the product. This marketing trick mostly works on the customers with a dilemma, whether or not to buy a product. Product launch and events are the second most common places where the countdown timers used the most. Many creative startups have used inspiring coming soon page design to get leads even before they start.

Read More


20 Stylish CSS Buttons For Fashionable Websites 2019

In the earlier web design, call to action buttons are bold and big with sharp boxy designs. The modern HTML5 and CSS3 have given us innumerable possibilities to create any shapes and designs. Your creative design can no longer sit on the PSD files alone they can be given life with the modern web development frameworks. In this list, we have collected some of the best and practically applicable CSS button designs that you can use for both website design and application design.

Call to action buttons on the landing page must get user attention. As we the generation humans have attention span less than a Gold Fish, animated elements will help you draw user attention on the required spots. These CSS buttons not only have creative shapes and design but also have a creative animation effect. Some of the buttons even have interactive animation effects, so make sure you check all the button designs in this list.

Read More


20 CSS Ribbons To Make Your Websites Look Swanky In 2019

Ribbon designs are there in the web design from very earlier days. Whether you are using CSS ribbons to tag your products are using it as one of the web elements to show the options, there is a design for you in this list. Some creative developers have used the ribbons in the navigation and menu options as well. When it comes to creativity, the sky is the limit. The design inspirations in this list will help you find the right element for your design. Most of the ribbon elements in this list are static and simple designs, but we have also collected animated ribbons. With interactive hover effects and cool animation effects, you can spice your CSS ribbon design. Without further due, let us get into the list of CSS ribbon designs.

Read More


27 Free Bootstrap Hospital Templates With Patient-Centric Design 2019

There are many free Bootstrap hospital templates out there in the market. All have a full-width layout, big images and web elements spread all over the pages. But if you are looking to make a hospital website with patient-centric design, where all the elements are placed in the most appropriate position. These handpicked free Bootstrap hospital templates will help you.

In most templates, you get a beautiful web design but not a properly designed template for that particular niche. Most top brands not simply design their website, they incorporate a strategy along with the design; the strategy that will lead to their goal. For example, Ann & Robert H.Lurie Children’s hospital in Chicago, not only provide health care service to the children but also collect donations to help them.

Read More