Original Source: http://feedproxy.google.com/~r/tympanus/~3/F3fFviHmVkM/

Inspirational Website of the Week: Ali Ali

Sheer elegance and slickness combined with the right typography. Our pick this week.

Get inspired

content-visibility: the new CSS property that boosts your rendering performance

Vladimir Levin and Una Kravets introduce a new CSS property that can be used to improve initial load time by skipping the rendering of offscreen content.

Read it

Our Sponsor
Build websites with the most popular WordPress theme in the world

With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

Check it out

Infinite Scroll without Layout Shifts

Addy Osmani looks at how patterns for loading long lists can impact the Core Web Vitals with some recommended fixes.

Read it

Understanding Arrow Functions in JavaScript

Learn about the differences between traditional function expressions and arrow function expressions in this great guide by Tania Rascia.

Read it

Simulating Object Collisions With Canvas

Josh Bradley’s tutorial on how to simulate object collisions as a way to learn the basics of HTML canvas and physics simulation.

Read it

Online Workshops on Front-End & UX

Boost your design skills online and learn practical insights from experts in the industry, live. Use a friendly code CODROPS to save $50 off the price!

Check it out

Take Me On

A beautiful immersive web experiment by Adam Kuhn.

Check it out

#s3e32 ALL YOUR HTML, Particles on a sculpture

Yuri Artyukh’s great video tutorial where you’ll learn how to create a cool particle effect on a sculpture.

Watch it

Modern CSS grid solutions to common layout problems

Learn how to overcome media-query fatigue by using CSS grid for responsive layouts. Kevin Pennekamp explores three useful layout implementations.

Check it out

Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business

A great article about the story of Tailwind CSS by Adam Wathan.

Read it

Three.js mesh modifiers

A Three.js mesh morph modifier, including nearly ten modifiers, such as Bend, Bloat, Noise, Skew, Taper and more.

Check it out

Naming layout components

Andy Clarke shares why he’s not fond of frameworks and explains what approach he uses instead for designing layouts.

Read it

r3f-bubbles

A very interesting react-three-fiber and drei demo.

Check it out

Offline first with service workers and vanilla JS

The third article of a series on service workers by Chris Fernandi.

Read it

Brick

Brick is a lightweight platform for creating small sites.

Check it out

Developing and Deploying Micro-Frontends With Single-Spa

Tyler Hawkins shows how to develop an app composed of micro-frontends using single-spa and deploy it to Heroku.

Read it

Drop-Shadow: The Underrated CSS Filter

Michelle Barker shows what you can do with drop-shadow, the CSS filter.

Read it

Turning pages with CSS

Amit Sheen created this fun demo of a CSS book.

Check it out

Optimizing CSS for faster page loads

Tomas Pustelnik shares how to impove loading times of a website by optimizing its CSS.

Read it

blogit

A personal blog based on Github Pages and issues. By Dmitriy Derepko.

Check it out

Digging Into the Flex Property

Ahmad Shadeed demystifies the flex property and shows how to use it.

Read it

CSS Vocabulary

A nice visual explainer of CSS terms.

Check it out

Papercups

Papercups is an open source live customer chat web app.

Check it out

The Girl With A CSS Earring

Louise Flanagan created this CSS masterpiece.

Check it out

How I Build Scalable Modern Web Applications for Real Users

An article that details the languages, libraries, and tools that Trey Huffine used to build Skilled.dev, a platform to prepare developers to succeed in coding interviews.

Read it

RevKit

A free design system UI kit for Sketch App, Figma, and XD.

Check it out

moment-guess

A utility package for guessing date formats.

Check it out

From Our Blog
Magnetic Buttons

A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto.

Check it out

UI Interactions & Animations Roundup #9

A fresh set of inspirational UI interactions and animations from the past couple of weeks.

Check it out

The post Collective #617 appeared first on Codrops.

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/7D0ZuP5w-kk/top-wireframing-tools-11121302

Creating a website is made easier by using the best wireframe tools. They visually strip the product down and enable all involved to focus purely on user interactivity and functions. Wireframe tools will enable your clients to understand how your proposed app or website will work, much more comprehensively than simply explaining. Not having to rely on imagination to understand suggested functions lessens the room for error.

Finding those tools, however, can be an arduous process as there is now such a variety available, all offering different levels of functionality. We've found the best tools around right now to take the hard work out of it. 

If you want to create an app from scratch, our step-by-step tutorial on how to make an app will be just what you need.

Create the perfect website layout

Taking advantage of trial downloads or free software to find the one that fits in with the way you work is the best way of finding out which one is right for you. So here are our top wireframe tools choices. Enjoy…

01. Miro

Miro includes collaboration as well as wireframing tools

Platform: MacOS, iOS, WindowsPrice: From free / $8 (team)Download here

Miro is a collaboration system that creates a hub for remote teams to work within. With impressive tools such as an infinite whiteboard, widgets and prebuilt templates, it claims to standardise the digital workspace to make it feel like everyone is in the same room. 

It presents an entire toolkit for wireframing, user story or customer journey maps, as well as brainstorming processes. Miro also integrates with over 20 applications including Slack, Jira, Google Drive and Sketch, creating a seamless experience. With over two million users worldwide, it's definitely hitting the right mark.

02. Justinmind

Justinmind offers a library of UI elements and custom styling for use in your wireframes

Platform: Mac OS, WindowsPrice: $19/monthDownload here

Web-based Justinmind includes a library of UI elements, from buttons and forms to generics shapes and a range of widgets for iOS, SAP and Android. Custom styling is included, so you can add rounded corners, cropped images or colour gradients, or import graphics by dragging them into the browser. Prototypes can be exported as HTML.

03. Wireframe.cc

Wireframe.cc offers a clean, minimal interface

Platform: Web browserPrice: From free / $16 (solo) Download here

Wireframe.cc offers a simple interface for sketching your wireframes that eschews the toolbars and icons of a typical drawing app and has therefore made it to our best wireframe tools list.

There's a limited colour palette to help you avoid that particular avenue of procrastination, and UI elements are context-sensitive and only appear when you need them. Whether or not you enjoy this is a matter of personal taste.

04. Adobe Xd

Adobe’s Xd is a powerhouse of wireframing and prototyping 

Platform: MacOS, WindowsPrice: From free to $19.99 per month as part of Adobe Creative CloudDownload here

Adobe Xd allows you to wireframe as just part of its suite of prototyping tools, which takes you through the whole process of sketching wireframes; collaboration with your team; creating site maps, flowcharts and storyboards; building functional prototypes; and much more. You can try Adobe Xd out for free but as usual you need a Creative Cloud subscription to take full advantage of Xd's incredible smorgasbord of features.

05. UXPin

Quick tutorials show you how to build advanced animations in the UXPin editor
Platform: Web browserPrice: From free (basic) / from $24 per user per month (premium)Download here

You can put together wireframes in UXPin at top speed by dragging and dropping custom elements. There are regularly updated libraries for Bootstrap, Foundation, iOS and Android, and your wireframes can be quickly converted to high-fidelity mockups. From there you can create fully interactive and animated prototypes of your final product. 

Alternatively, you can also start your designs in Photoshop CC or Sketch and import into UXPin for prototyping. To support the full UX process, you can then create and pin documentation to your prototypes and auto-generate specs and style guides for developers.

06. Fluid UI

Each project generates a QR code you can scan to get the prototype working on your phone

Platform: Web browser and desktop client on Mac/Windows/Linux, plus Android/IOS app to preview designsPrice: From $8.25 (solo)Download here

Fluid UI has built-in libraries with over 2000 builti components for iOS, Android, Windows and more, and pages are created by dragging in elements from these libraries. 

This system provides a great way for you to map out your projects visually by creating links to join screens, forming a diagram of how everything fits together. Hovering over a link gives you the option to change the kind of transition you're using.

07. Balsamiq Mockups

Balsamiq Mockups aims to replicate the experience of sketching on a whiteboard
Platform: MacOS, Windows, web browserPrice: From $9 (2 projects) per monthDownload here

Balsamiq Mockups includes several drag-and-drop elements, from buttons to lists, each styled as a hand-drawing. The basic premise behind this wireframing tool is to keep the mock-ups 'intentionally rough and low fidelity', to encourage as much feedback as possible.

08. Axure RP

Axure RP lets you create interactive HTML mockups for websites and apps

Platform: MacOS, WindowsPrice: From $29 (pro) per user per monthDownload here

As well as creating mockups, Axure RP allows you to add functionality to your layout and create an interactive prototype. Features of this wireframing tool include sitemaps and various widgets in the form of various UI elements. 

Interactive HTML mockups (see more about website mockups here) can be created for both websites and apps, and you can even view your app design on your phone with a built-in share function.

09. Pidoco

Pidoco includes a handy library of drag-and-drop interface elements
Platform: Web browser and Android/IOS app to test prototypesPrice: From freeDownload here

Pidoco is similar to Axure in that it includes library of various drag-and-drop interface elements, as well as the ability to add multiple pages and layers. 

Your prototypes can be shared online with clients, and includes functions for collaborative feedback and discussion. Viewing your prototypes on your phone is as easy as downloading the Pidoco app.

10. Visio

Visio’s interface will be familiar if you’re used to using Microsoft Word or Excel

Platform: WindowsPrice: $5 (simple) / $15 (pro) per user per monthDownload here

Viseo's real strength lies in technical diagrams rather than wireframing; however, for those already accustomed with other Microsoft apps such as Word or Excel, the interface will be very familiar. Although quite clunky, Viseo does offer add-on tools such as Swipr, which allows you to create and export a usable HTML prototype.

11. InDesign CC

InDesign lets you use animations and videos in your wireframes
Platform: MacOS, WindowsPrice: From $19.99/month as part of Adobe Creative CloudDownload here

By including animations, video and object states, InDesign can be used to create an interactive PDF that acts as a wireframe for your website or app. 

The software also includes the ability to create libraries of page elements, so you can create collections of various reusable interface graphics.

12. Photoshop CC

Never thought of Photoshop as a wireframing tool? Think again!
Platform: MacOS, WindowsPrice: From $19.99 per month as part of Adobe Creative CloudDownload here

Photoshop doesn’t offer libraries of interface elements, but for straightforward, fast wireframing, it is a very easy choice for designers. 

If you're familiar with Adobe products, it's simple to sketch out quick ideas, group various elements and layers, and build an effective wireframe. Check out our article Photoshop for web design: 20 pro tips for more.

Next page: More wireframe tools for designers

13. Protoshare

Protoshare puts the emphasis on online collaboration
Platform: Web browserPrice: From $29 (standard) per person per month (30 day free trial included as standard)Download here

Protoshare is an online tool with a focus on collaboration and sharing. It includes a library of drag-and-drop elements, a sitemap, and the ability to use custom CSS and insert your own elements. 

Due to the emphasis on online collaboration, unlike some other tools, it can't export as a PDF, however it is worth considering for its prototyping features.

14. Penultimate

Wireframing for an iPad app? Then use an iPad tool!
Platform: iOS (iPad only)Price: FreeDownload here

If you're working purely for iPad design, sketching out ideas directly within the device itself is the perfect way to ensure you’re working to the right ratio and with well-sized active areas. 

With Penultimate from Evernote, sketches and ideas can be easily saved and sent to clients for approval.

15. Pencil Project

Pencil is free, open source and comes with a variety of templates
Platform: MacOS, Windows, LinuxPrice: FreeDownload here

Pencil is a free, open source wireframing tool available for Windows, Linux and Mac. Features include multi-page documents, external object import, as well as aligning, z-ordering, scaling and rotation. 

Various templates are included as well as the ability to export to HTML, PNG, Openoffice.org document, Word document, and PDF.

16. OmniGraffle
Platform: MacOS, iOSPrice: From $49.99 (standard iOS) Download here

OmniGraffle is effectively an ideas tool that enables you to quickly bash together website wireframes, diagrams, process charts or page layouts. 

You select a document type, and OmniGraffle makes context-sensitive joins between separate elements, automatically linking lines in diagrams and aligning shapes and elements in wireframes or page layouts.

17. Gliffy

Gliffy aims to ‘make diagramming a team sport’
Platform: Web browserPrice: $4.99 (team) / $7.99 (personal) per user per monthDownload here

Gliffy is a tool that enables you to collaborate with other team members on flowcharts, network diagrams and more. It includes drag and drop components, online collaboration, image export and version tracking. 

18. MockFlow

MockFlow is another great wireframe tool
Platform: Web browser/desktop app for Windows and MacPrice: From free (basic)Download here

Mockflow enables you to create working prototypes, and has an emphasis on collaboration and sharing. It includes features such as a sitemap creator for pages and folders, version tracking, image and component collections, chat, and HTML5 export.

19. HotGloo

Wireframing tool HotGloo offers a rich range of features
Platform: Web browser/mobile optimised for testing and editingPrice: From $13 (4 users) (7 day trial included in all plans)Download here

HotGloo's prototyping alone offers a rich range of features that goes far beyond simple clickable buttons. For example, users can change displayed elements depending on whether or not a user is logged in.

20. Moqups

Work collaboratively on wireframes, mockups, prototypes and more

Platform: Web browserPrice: Free / €13 (personal) / €20-€149 (team) per monthDownload here

This tool is designed to take you through the whole process of roughly sketching your wireframes; collaborating on them with others; creating site maps, flowcharts and storyboards; and building functional prototypes. 

21. Pen and paper

There’s nothing quicker than grabbing a pen and paper

Yes. An actual pen. And some real made-from-wood paper. OK, so these don’t allow you to make a prototype, and there are no built-in elements. But, if you feel more comfortable using a more traditional approach, why not get your ideas down on paper first and refine them in software later?

Related articles:

The best website builders in 202011 amazing graphical JavaScript frameworksWrite HTML code faster

Original Source: https://www.sitepoint.com/the-second-coming-of-the-productivity-tool/?utm_source=rss

I’ve been testing a range of information management and Second Brain tools this year, from Bear to Notion to Obsidian.

In most of these cases, I’ve tried the apps before or used them for years. This year, I’ve endeavored to settle on my selections, commit, and get the workflows sorted out. I’ve been doing this with other mainstays in my system like TextExpander (a snippet manager) and Alfred (a powerful launcher) as well. Seven months into the year, I’m confident that this effort has been fruitful.

Managing complexity without compromising it has always been interesting to me. My first gig with meaningful traffic was as a Lifehack writer in the mid-2000s. I’ve gorged myself on and become disillusioned by my quest for software holy grails more times than I can count. This quest is even a hereditary calling of sorts. As a kid, car conversations with my father compared the merits of Grandview and Lotus Agenda, or how much you could get done with an Atari Portfolio on the train (an incredible amount, said with Viticci-esque passion). He taught me spreadsheets by having us log our jogging metrics on a Macintosh Portable. This is not a very portable device, for the record:

I’m sure his heart still lies with an obscure 90s app called DayInfo — along with his data from that era, no doubt.

This impossible but driving need to Reach Clarity has, for better or worse, entrenched itself within my own brain.

Between then and now, information management and productivity software wandered in the wilderness. As a species, we have mastered the art of the list app. We have put more effort into this endeavour than the moon landing and the Large Hadron Collider combined. Nothing has impeded our ability to imagine new ways of being reminded about the things on the list.

And yet the list has remained an unsatisfying — although not impotent — tool on its own. Lists are bad at context, yet we know that actions are meaningless without strategy. So, we’ve tried to brute force systems that provide context through lists. Folders of lists. Areas of responsibilities full of lists. The Today list, tomorrow’s list, Someday/Maybe, lists in kanban boards and listicles of list tips, tricks, and apps. Brain-dump into your big list and schedule a weekly review to sort that into your little lists. In this wilderness, lists have been our manna.

For much of the last five years, I used a Bullet Journal-esque Markdown file to manage my tasks. It felt like a private stance of rejection against the pandering, posing performance art of productivity pornography.

It felt good. It was a productive time.

This isn’t an uncommon progression for the knowledge worker, whether you’re a developer, writer, or you sell a Memberful subscription to your clarinet lessons. Well ahead of the curve, Gina Trapani, founding editor of Lifehacker, became a todo.txt proponent. We’d all been let down by the failure of software to do what we had hoped it would do. We wanted it to connect the strategic and execution contexts for our lives, bridging the divide between the two so we could move forward with purpose. Instead, we had lists.

Until the last few years, that is, when something broke loose and the fundamentalist rigidity around structure began to fall away. Notion created the momentum here. It cracked the tough UI problems of mixing free-form content tools with the power of the database. Airtable pushed the spreadsheet into new territory. Its API is in the wild, giving us a glimpse at how much you can achieve when you can connect these engines to your data. A veritable horde stampedes over Notion’s social media manager every day, begging for an API timeline.

I love the tools in this new wave of productivity software. I’ve used Notion personally for a few years and have been rebuilding SitePoint’s editorial workflow on it over the past month or two. For me, Notion is a holy grail.

Sure, there are frequent moments of frustration. It’s so close to being unstoppably powerful – if only we had the API, or more powerful formulas and relational interactions. But these frustrations are borne of seeing the unfulfilled potential, rather than feeling stifled by inherent limitations. That’s an exciting shift.

For all its anti-structure, Notion is best when you know how you want to structure your life, team, project, or data. It gives you all the tools you need to design workflows and dashboards that will be most useful for your use case. It is flexible to the extreme, but not the ideal free-wheeler.

There’s another important side of information management. The ideal tool looks different when you want to build an organic body of knowledge. These tools should help you create context between discrete units of knowledge. They should help you do so rapidly without excessive structural overhead. The most valuable features are seamless interlinking, fast search, universal capture, and simplicity.

In recent years, people like Christian Tietze have shared how they build digital zettelkastens with apps like nvALT. This concept has driven the wave of new apps built around these needs. In broad strokes, it’s an atomic database of all the information you acquire and deem worthy of saving. It grows and – this is the key – forms connections with the rest of your atomic notes over time. Similar thinking is at the root of the Second Brain concept.

There are a few apps bringing this style of information management into the future. The most famous is Roam Research, which I have not tried myself. Obsidian is another option that works well for developers. It’s also great for people who otherwise deal with a lot of code (like me – as an occasional developer, but primarily as an editor of content about code). Obsidian stores notes in local, plaintext Markdown, and you can use your preferred sync method.

It handles code blocks well, and offers features like Vim mode and a graph view of your note connections. For developers, the ideal tool should also be able to serve as a code snippet manager. Obsidian has what it takes, and you can extend it with plugins to make up for functionality you miss.

My friend Joe Previte recently posted a Twitter thread about these tools which introduced me to a new option, Foam.

I decided to experiment with Foam by @jevakallio today.

Here is a thread with my notes ??

— Joe Previte (@jsjoeio) July 1, 2020

If the ideal knowledge manager should be able to replace your snippet manager, wouldn’t it be ideal if you could drive it from the app you write code in?

Foam takes its cues from Roam Research — no surprise — but it’s built on Visual Studio Code and GitHub. Like Obsidian, it isn’t bound to the cloud, but unlike Obsidian it’s truly free and open source.

The way in which it is extensible differs, too. As Joe notes, the ability to work with Code’s multitude of extensions gives Foam a powerful leg up. This is truer the more the use case applies to developers. Compare the options available in Code versus Obsidian’s built-in search, Vim mode, or GitHub integration. As with Obsidian, you can write your own extensions (if you’re a Premium member, you can access this VS Code book from Wiley to learn how).

Obsidian is the batteries-included option and it’s a good one. If you want absolute control at the expense of time, Foam offers it. Conversely, VS Code’s popularity means there are more off-the-shelf workflows to use with your other tools.

While I manage my life in Notion, I manage my writing with Git. That happens beneath a layer of proprietary apps like Ulysses, and I’m uninterested in moving the writing process itself to Code. But it does make this approach appealing for my notes.

We’ve gained so much power in our tools that you can almost replace a raft of apps with two. Are we far from seeing structured and unstructured information management apps collide? I don’t know, but for clarity’s sake it may be best that they don’t. Perhaps that’s how my brain works, and the app that does it all for you is taking shape in a repo somewhere.

But for the first time in a long time, I’m enjoying the quest for the holy grail again.

This editorial was originally published in the 23 July 2020 issue of SitePoint Weekly. To get the freshest resources, stories, and exclusive content for web developers, designers, and digital creators in your inbox each week, sign up here.

Continue reading
The Second Coming of the Productivity Tool
on SitePoint.

Original Source: http://feedproxy.google.com/~r/tympanus/~3/EFDUBlGtvmM/

Today we have a gigantic set of the latest and greatest web designs for you to keep you inspired! The striking difference between many of these designs shows an interesting trend: individuality.

Celebrating uniqueness and showing identity is big again and now it’s time to explore novel typography combinations and color themes. Just look at this diverse set! Are you getting excited yet? I certainly am!

Hope you enjoy this collection and get a big creative nudge to experiment with something new

Kaleidoz

Mav Farm

The Papestielliz

Thibaut Foussard

Dunderville

Yourra!

Patrick Heng

Fabrizio Milesi

Fjaka

CreativeCrew

makemepulse

Better Half

Hazelight

Andreas Antonsson

Anastasiia Afanasieva

Synchronized

Radiant

REDNECK

Kieran Baybutt

GT Flexa

Craig Reynolds

The Roger

SUMI

Mailchimp Presents

Jacob McKee

Strapi

AnnaTwelve Fragrances

Salon Bon Vivant

GlobeKit

Ali Ali

Yolélé

The post Inspirational Websites Roundup #17 appeared first on Codrops.