Fresh Resources for Web Designers and Developers (August 2019)

It’s time for another monthly round of featuring some top resources for our fellow web developers. Previously, in the Fresh Resources series, we have mostly featured tools and apps for designers and developers.

This month, however, we have more resources that help you brush up your skills as a web developer. We have a tip for using SVG, a resource to learn more about TTFB, information on creating an accessible UI, and many other interesting subjects. Let’s take a look

SVG Role Image

Here is a handy tip on using SVG. SVG is used to display a graphical presentation on your website like an image. Yet, unlike the img element, SVG may consist of multiple elements like the path, g, or circle.

svg role imagesvg role image

What is TTFB?

Ever wondered why your site seems to be loading slow, even though you’ve done all the optimization advised on the Internet? Well, the problem might be detected on the site TTFB or “Time to First Byte”. So, this article from CSS Wizardry will give a full insight on TTFB and how you may be able to optimize it.

what is ttfbwhat is ttfb

Custom Accessible Radio Input

The Accessibility feature is what makes the web great. It allows people with disabilities to browse and interact with the web. This article from Lindsey will teach you how to create a nice looking accessible radio input. You’ll see that creating an accessible UI does not necessarily mean it has to look dull.

custom accessible radio inputcustom accessible radio input

Simple Entity Decode

A small JavaScript library that allows you to decode characters from their HTML form to their human-readable form. For example, you can convert & to &.

simple entity decodesimple entity decode

Gatsby Theme Authoring

Creating a static site is on the rise (again) because it’s blazing fast. One of the tools that are on the rise among web developers is the Gatsby. Egghead provides a screencast to learn how to create a theme for Gatsby. And it’s free.

gatsby theme authoringgatsby theme authoring

Postwoman

Postwoman is a web-based tool to compose an API request. You can set the request method, URL, path, parameters, authentication etc., and see the response — a convenient tool.

postwomanpostwoman

Nushell

It’s a modern Shell built with Rust. It enhances a few Shell commands, for example, the ls command. Nushell can show the output of the ls command with enriched data as we can see from the following image.

nutshellnutshell

What is ES2019

JavaScript has vastly improved in the past few years. It seems the ES6 or ES2015 was just yesterday, but we now have a new spec codenamed ES219. This video from JSConf EU will show you a glimpse of what we can do in JavaScript with the ES2019 specification.

what is ES2019what is ES2019

Dockerlabs

A collection of tutorials that’ll teach you Docker and Kubernetes. Not only that it provides text-based tutorial, but you can also try them right in your browser.

Moreover, you do not need to install anything on your computer. All you need to experience Docker like Docker Engine, Docker Compose & Docker Machine are already set so you can start learning.

dockerlabsdockerlabs

Kanboard

Kanboard is a PHP-based application for Kanban board. Using Kanban board is a popular style to manage tasks and projects. There are a few commercial applications that you can immediately use like Trello. If you’re the type of person who prefers full control over your app, using Kanboard may be a good alternative as you can install it in your server.

kanboardkanboard

Tech Interview Handbook

A collection of examples, tips, and cheatsheets to help you better prepare for an interview in the tech sector. If you’re in the process of job search, you might find this useful.

tech interview handbooktech interview handbook

Vuestic Admin

An admin dashboard template built on top of Vue.js. It comes with UI components that you’ll usually need to build a useable Admin dashboard like the Chart, data tables, forms, and many more.

vuestic adminvuestic admin

Git Training Kit

Here is an in-depth reference for using Git provided by Github. A useful reference to learn Git whether you’re just getting started or has already some experience.

git training kitgit training kit

Nginx Admin Handbook

A collection of tips on making most of nginx. The nginx covers many topics including security, debugging, and of course, the basics.

nginx admin handbooknginx admin handbook

XtermJS

A JavaScript library that allows you to create a Terminal-like interface that you can run on the web.

XtermJSXtermJS

Pure Bash Bible

Tips, code examples, best practices, and basically a complete package of learning materials to master Bash.

Pure Bash BiblePure Bash Bible

Polka

Polka is a simple HTTP server built with Node. It supports routing, middleware, and sub-applications. It’s a great alternative to Express.js. In fact, it performs faster by 30-50%.

PolkaPolka

Design Patterns PHP

“Design Pattern” is created to solve common problems when developing an application. This is one of the most complete references to learn Design Pattern in PHP.

Design Patterns PHPDesign Patterns PHP

Code Samples

As the name implies, this is a collection of code samples provided by Microsoft. It is pretty extensive, ranging from C to PHP programming language.

Code SamplesCode Samples

iViewUI

A collection of UI component based on Vue.js framework. Like a typical framework, iView is equipped with UI Components, from an essential element like a button to a more complicated component like a Carousel.

iViewUIiViewUI

The post Fresh Resources for Web Designers and Developers (August 2019) appeared first on Hongkiat.

Read more: hongkiat.com

Read More

Building Creative Websites Can Be Easy. Here’s How

Web designers, ready for some good news? We have some for you, and it involves designing creative websites.

The ever-expanding global market is creating an equally expanding number of opportunities. And with it increasing competition among businesses. Increased competition is having the effect of website designer clients insisting on more creativity to drive more sales.

That’s good news for Be Theme and its users because of its emphasis on creative designs and the vast number of options available.

The creative designs are just a start. Websites have to be both flexible and conversion-optimized. That’s where a web designer’s creativity comes into play, and that’s where customizable designs allow it to happen. Below, you’ll find five simple steps you can follow to create a website that’s not only awesomely attractive but fully equipped to convert visitors into users.

5 Steps to Building Creative Websites
Step 1: Choose a mesmerizing color palette

A typical color palette is a collection of colors. A creative color palette is one that’s on-brand, attracts instant attention, and does an excellent job of supporting the message.

Examples:

Artist is an excellent example of how BOLD color touches instantly attracts attention.

artist websiteartist website

You’ll see the same in this Be Theme pre-built website. Notice how your eyes are instantly drawn to the center, and the headline.

becreativebecreative

Carbon8 cleverly aligns the color palette with its brand. Notice how effective using various shades of a primary color, in this case, green can be.

carbon 8carbon 8

BeInsurance uses a color palette that is subtle yet crisp and does an excellent job of reinforcing their message.

beinsurancebeinsurance

If you need to appeal to a larger, perhaps more diverse audience, BeFestival offers a perfect example of how to proceed.

befestivalbefestivalStep 2: Display crystal-clear images

This one’s obvious. If an image of your product or service is just a teeny-bit fuzzy on the edges, that’s the impression visitors are likely to get of your business. In any event, they’ll hope the images on the next page will be sharper.

When your clients can present their products and services with flair and clarity, it gives them an extra edge over the competition.

Examples:

BeStylist shows why this is so important. The image itself is a call to action.

bestylistbestylist

You can do a similar website with RansomLTD. While different from the previous example, the importance of using sharp, high-density images is evident.

ramsonltdramsonltd

Zajno is in some respect, a mix of the two previous examples. It makes the web designer and the client both look good.

zajnozajno

The Design Shop is another example of how to display your products with creativity and flair.

thedesignshopthedesignshopStep 3: Show visitors how your creativity benefits them

The objective in this step is not to show how creative you are, but to use your creativity to help visitors see themselves as customers.

Examples:

BeMarketing has a homepage video that does a great job of this. You can almost feel how practical and comfortable the shoe is.

bemarketingbemarketing

Lane guides the visitor through flexible and functional workplace design.

lanelane

BeSimple takes a minimalist approach using just the right graphics to convey the message.

besimplebesimple

BeTravelBlogger doesn’t rely on text to describe a travel blogger’s dream.

bebloggerbebloggerStep 4: Take advantage of white space to design creative websites

White space is the most important visual element you need to play around within your website design. You’re unlikely ever to use too much of it.

Examples:

Makespace has a clean design that carries a small but complete message.

makesimplemakesimple

BeSketch and The Drive New York are a pair of creative websites that make the most of white space to enhance their critical elements and their message.

besketchbesketchthedrive new yorkthedrive new york

BeIcecream is perhaps THE most extreme use of white space to focus on the vital element. White space is an effective and compelling part of the brand.

beicecreambeicecreamStep 5: Make your CTAs impossible to ignore

To do that, they need to be big, bold, and bright. If your CTA doesn’t get immediate attention, it’s less likely to be clicked. If it grabs attention, however, the result is usually quite the opposite.

Examples:

BeDrawing has a CTA button that stands out with its a bold color, plus it’s big enough to draw attention immediately after the headline is read. It’s also positioned to serve as a “gate” that invites visitors to enter.

bedrawingbedrawing

Stuart’s CTA buttons are clearly designed. The page itself could be described as creative or smart. It’s a pleasing mix of both.

stuartstuart

A great example is BeKids, where the CTA buttons color matches other design elements; a technique that helps them to stand out.

bekidsbekidsWrapping it up on designing creative websites

You should find the above steps and ideas helpful as they give you a surefire way to build creative websites that feature eye-catching designs and are made with conversion in mind.

Bright, crisp, and stunning visuals and the clever use of white space is your secret to success. You also want to present product or services in a way that allows visitors to imagine themselves as users.

Unless you’re blessed with an extra dose of artistic brilliance, however, is at your creative best can and usually does take time. If you find yourself juggling multiple projects and tight deadlines, you might try using a pre-built website.

Once you do, you probably won’t go back to the “old way”.

You’ll find the most comprehensive and useful gallery of creative websites imaginable on Be Theme. There are more than 450 pre-built websites to choose from and customize to your liking, and more are being added every month.

The post Building Creative Websites Can Be Easy. Here’s How appeared first on Hongkiat.

Read more: hongkiat.com

Read More

How to Create Your Own Custom Grid System in Photoshop

Grid is a popular approach to building websites. It is more consistent and makes sections proportionally right. A couple of examples of CSS Grid frameworks are 960.gs or Skeleton. However, one of the constraints of using a grid framework is that we will have less flexibility.

We are bound to the framework’s specification, and its author’s methodology, which in many cases might not be suitable for our website requirements.

In this post, we are going to show you how to create a custom grid both for CSS and Photoshop. To make the process easy, we are going to use several tools. Let’s check it out.

Install GuideGuide

First, We need to install GuideGuide, a Photoshop extension to create guide lines, specifically designated to create a Grid with ease. To be able to install GuideGuide, your Photoshop need to be at least CS4.

guideguideguideguide

The Photoshop extension can be installed through the Adobe Extension Manager, as follows.

adobe extension manageradobe extension managerCalculate Your Grid

Before we setup the guide lines in Photoshop, we need to calculate the grid, which includes the total width, the column width, the column number, and the column gutter. These can be done easily using grid calculator by Heroku.com.

In this example, I would like specify the total width for 1000px, 30px for the gutter width, and 10 for the number of columns. This tool will then automatically generate the actual content width as well as the appropriate column width.

calculate columncalculate column

You can also download the generated CSS grid.

Create the Grid

Time to get back to Photoshop. Go to this menu: Window > Extensions to show the GuideGuide panel in the Photoshop sidebar. Then, create a new Photoshop canvas, and set the canvas width in accordance with the Fulll Width – in my case, it is 1000px.

new canvasnew canvas

Fill in the fields in the GuideGuide panel – Column Gutter, Column Width, and Column Numbers – in accordance to the ones in the grid calculator.

guide fieldsguide fields

Then, in the GuideGuide panel, go to the Sets tab. In this tab you’ll find some preset guide lines. Select the Outline preset to create guide lines at the edge of the canvas.

canvas outlinecanvas outline

We are done, and here is our custom grid ready-for-use for designing a website.

custom gridcustom grid

Additionally, you can add more room to breath at the left and right sides of the canvas by extending the canvas width, and then add rectangle in new layers for creating a visual helper for the columns of the grid.

Download the PSD of our example below.

Download PSD

The post How to Create Your Own Custom Grid System in Photoshop appeared first on Hongkiat.

Read more: hongkiat.com

Read More

Top developer tools and services that you should check out

Getting the right tool for the job on hand doesn’t have to be difficult. The best of the bunch is presented to you on a silver platter, and all you have to do is pick one or more. Your choice is going to match your needs.

New and improved software development tools and services are appearing on the market. So, finding what you need shouldn’t be difficult. The problem lies in the numbers. There are too many to have to search through, investigate, and test. There are many factors involved with what makes up a good tool, or the right tool. That fact complicates matters.

What if the best tools are placed right in front of you? It gets easier — as you’ll discover.

1. Elementor
elementorelementor

Web designers have long considered Elementor to be a smashing success. So much so, that it’s easy to forget that this open-source software tool was created with developers in mind.

It’s not all that surprising that open source tools and software development practices go hand in hand given the importance of extensibility and contributions to the package from those who know best — the Elementor team and your fellow developers.

Elementor’s full stack of software development solutions includes:

CSS Optimization and Custom CSS — where CSS files are externally loaded, compiled, and minimized for optimal load times; and custom CSS is easily incorporated into any page or Elementor widget.
CLI Integration — where tasks can easily be triggered with the Command Line
Request Parameters –where data can be tracked throughout a site, and
Rollback — where version control is simplified by allowing you to go back to earlier versions.

Elementor invites you to sign up and to contribute to their open source solution by submitting your ideas and accessing Beta versions to help the team find and fix bugs and resolve other issues.

2. And Co
andcoandco

If you believe the time you spend on invoicing is taking way too much time away from your development activities, AND.CO is the answer to your problem. AND.CO is a smart invoicing app that will create your invoices for you, notify you when they’ve been viewed or paid, and remind your clients when a payment is due or if it is overdue.

AND.CO even deposits payments in your bank. Since this software solution can utilize billable hours time tracking data as the basis for creating invoices, you don’t have to lift a finger from the start of the process until money is deposited into your account.

Since you can sync AND.CO’s mobile app across all your devices, you can stay on top of your billings and cash flow and even generate invoices when you’re out and about.

3. Atom
atomatom

One of the joys of having a flexible and extensible open source tool at your fingertips is it often offers new and better features to work with; which is important for developers. Atom is precisely that type of a software development tool.

This open source desktop tool, running on an Electron framework, can be used on OS X, Linux, and Windows to develop cross-platform apps. Atom offers access to thousands of open source packages; making it not simply an extensible tool, but a super-extensible one; plus, you can create your own packages from scratch.

It also serves as a collaboration tool. When you are able to collaborate with other developers, wonderful things can happen, and Atom’s collaboration features make working with others to create code no more difficult than coding on your own.

4. Testim
testimtestim

Testim uses AI to author tests, execute them, and minimize the maintenance of automated functional tests. By doing so, you can use Testim to conduct thousands of tests over multiple browsers and get test results in minutes.

Testing can be conducted in the Testim cloud or on-premise. Signup for a free trial to see what Testim can do for you.

5. TMS Outsource
tmsoursourcetmsoursource

TMS Outsource proves the argument that outsourcing development tasks can have multiple advantages over performing them in-house. You’ll typically save money, partner with an experienced team of developers and project managers, realize on-time deliveries, and find yourself being able to focus more heavily on your core business responsibilities.

TMS Outsource personnel adhere to SCRUM development methodologies and are skilled in multiple coding languages.

6. InvoiceBerry
invoiceinvoice

Sending out invoices with InvoiceBerry instead of performing the tasks yourself is as easy as it gets. Select any of the professionally-designed invoice templates, insert your logo, the billing information, your client’s email, and let InvoiceBerry do the rest.

Customers can pay via PayPal, WePay, or Stripe, and you can always view unpaid invoices on the InvoiceBerry dashboard. Try this invoicing service free for 30 days.

What makes a good developer’s tool?

Developers are looked upon as being skilled, hardworking people and their ability to write good, clean code bears that out. Yet, these skilled developers don’t spend all their time writing code. They spend an appreciable amount of their time looking for and trying out development tools that best serve their purposes.

Development tools come in all types of forms and flavors. To name a few for example, there are code editors, GUI design tools, assemblers, debuggers, and performance analysis tools.

There are tools to support project management, source control, and issue tracking. They come along with cloud tools and prototyping tools.

Whatever the tool selected, it must be useful. It often has to integrate with other tools to perform its intended duties. Also, it needs to have a gentle learning curve.

As you can see, finding exactly the right tool isn’t always an easy task.

Conclusion

Fortunately, you don’t have to work your way through hundreds of tools or services. You can find what you need for a specific task or project, to streamline your project workflows, or to keep you doing what you do best.

One or two of the products or services described in this article could make your day. You can go a long way toward keeping your development efforts humming right along throughout 2019 and beyond.

The post Top developer tools and services that you should check out appeared first on Hongkiat.

Read more: hongkiat.com

Read More

How to Check Browser Compatibility via Command Lines

Building a website traditionally involves a variety of technologies which may work across all major browsers, some of them partially, or none at all. Web developers these days would always refer to CanIUse to check if a certain feature is supported on a browser or one of its many versions.

CanIUse keeps track of the browser adoption of standard HTML, CSS, and SVG along with their references, the specifications status from W3C, and links to the issues and bugs that present in each browser (when available).

For instance, we can see below that Edge, Firefox, and Opera Mini do not support CSS Reflection, and in browsers that it is supported in, the vendor prefix is required.

CanIUse is the de facto tool that records how far the standard web specifications compatibility in desktop and mobile browsers.

Aside from the browser version through caniuse.com, CanIUse is now also available as a CLI (Command Line Interface). We are also be able to pull out the CanIUse resultant via Terminal or Command Prompt.

If you found yourself stumbling while on Terminal often, the CLI would effectively streamline your workflow.

Requirements

To deploy the CanIUse command line, you will first need NodeJS and NPM installed.

If running npm -v or node -v returns the version number (as shown below) you are ready to deploy the CLI. Otherwise, if it returns the “command not found” error, download the NodeJS installer here.

The installer is available for Windows, OS X, and Linux; select the OS you are using.

The CLI

Installing the CanIUse CLI is just a line away. Open Terminal or Command Prompt and run the following command.

npm install -g caniuse-cmd

This command installs CLI globally which will allow it to be accessible throughout the location in the OS. Once installed, the command line caniuse should now be available at your disposal. There is no rule on how to “search” via CLI. Simply search naturally as you would in the web version, e.g. running “caniuse box shadow” will return the CSS3 Box-shadow specification.

Notice that we do not need to escape the space for the keyword query, which we traditionally would have to do.

Basically, the CLI results match the web version. Even if a search is done with an incomplete keyword, for example, soc or sock , the search will result with Web Socket at the top, followed by relevant entries.

CanIUse is a perfect complement for other command line based tools like Gulp, Grunt, and is an all-round handy tool that could boost your workflow eventually. Now you don’t have to leave your Terminal ever to check for browser compatibility for HTML, CSS, and SVG.

The post How to Check Browser Compatibility via Command Lines appeared first on Hongkiat.

Read more: hongkiat.com

Read More

Fresh Resources for Web Designers and Developers (July 2019)

PHP development has been pretty fast in the past few years. At the time of this writing, PHP 7.4 has just entered its first beta phase. It comes with a number improvements in many areas such as introducing a new syntax, better performance, as well as a few feature deprecations.

Following that, we are going to explore more on PHP and its ecosystem such as the packages and frameworks like Laravel and Vue.js which may now become a de facto of JavaScript framework in the PHP / Laravel community.

Let’s get started with Vue.js.

Vue Material

A wrapper to Google Material design specification and principles for Vue.js framework. In that sense, “VueMaterial” includes the Material Design components such as the Card, Button, Datepicker, Dialog, Drawer and Forms. It’s the best of both world, we get a solid design principle from Google Material with an easy implementaion from Vue.js.

Colorful triangles, squares, and rectanlges in grey dark backgroundColorful triangles, squares, and rectanlges in grey dark backgroundGoogle Autocomplete

The name says it all. This is a Vue.js component to apply address autocompletion with the Google Automplete API. Using the component is as easy as adding the custom element that comes with it, <google-autocomplete></google-autocomplete>, and pass in the option configurations. Check it in action from this link.

Input form showing suggestion of city addressInput form showing suggestion of city addressVue Instant

This Vue.js component allows you to apply automatic word suggestion to your input form. You can attach this component to any API (not just Google) to derive the suggestions from. For example, you can attach it to the TheMoiveDB API to retrieve movie title suggestion. Here is the live action demo.

Input form with list of movie title suggestionsInput form with list of movie title suggestionsInkline

This could probably one of the fanciest Vue.js frameworks that I’ve seen. Inkline is a UI framworks that brings a collection of common UI components on the web like the Button, Tables, and Navigation. This allows us to quickly create a functioning prototype. And as all the component is built on top of Vue.js framework, we will be able to extend or customize the component functionality through the Vue.js API.

Fancy illustration of a nightFancy illustration of a nightVue Filepond

A nice Vue.js component to add an uploader interface with a silky smooth experience. It can handle files, directories, local URLs, remote URLs, and Date URIs to upload. On top of those, it has a built-in image optimizer so the image can be uploaded faster.

vue filepondvue filepond

This component built with a JavaScript library called Filepond which allows you to apply many of its plugins like the Image Editor, File Validator, and Media Preview

Vue Hotel Datepicker

A date picker for Vue.js. As the name implies it’s designed for a Hotel reservation. It displays the number of nights selected and allow several options such as a custom check-in / check-out rules, localization support and more.

Two calendars interface to select date.Two calendars interface to select date.VueDS

VueDS is a tool for building a UI Design Systems with Vue.js framework. The tool provides a set of organized tools, patterns and practices. You can use it as central place of the technical design reference of your application for your team. This design system usally includes things like the colors, sizing, components, and more.

A set of button with their states like hover, focus, and active.A set of button with their states like hover, focus, and active.Vue Carousel 3D

Vue Carousel 3D allows you to add a carousel, it can be image or content, with 3D effect like the Cover Flow which was once in macOS. It’s easy to implement, responsive, and support swipe gestures. Do you want to add a carousel like no other? This component might be what you’re looking for.

vue carousel 3dvue carousel 3dVue Poll

A Vue.js component to vote. It’s inspired by the Poll feature in Twitter, you can now easily add one to your website.

vue pollvue pollPHP 7.4

As mentioned earlier in this post, PHP7.4 is just about to be released. It’s currently in Beta phase. This post covers things including in this PHP release.

A lady typing on her laptopA lady typing on her laptopTwine

A handy library to transform string (plain text) in PHP. You can easily transform text to camel case, convert it to various cases like camelCase and snake_case, encode it to base64 or HEX encoding, and more.

twinetwineLaravel Persistent Config

An extension to provide persistent configuration in Laravel. With this, you can easily set or read configuration on your Laravel application and store in database of PHP files.

Code snippet of 'Laravel Config' in dark backgroundCode snippet of 'Laravel Config' in dark backgroundPHPUnit Speedtrap

A PHPUnit extension to evaluate the tests performance. When it detects slow tests, it will show you which files run slow and how long they were run.

phpunit speedtrapphpunit speedtrapComposer Semver

Semver is part of Composer core extension, but can also be used independently in your PHP application. This extension applies the Semver specification. The extension provides method that allows you to easily compare and validate versions based on the Semver specification.

Code snippet of 'Composer Semver' in dark and yellow backgroundCode snippet of 'Composer Semver' in dark and yellow backgroundLaravel Love

A Laravel extension to add a reaction interface similar to the Reaction UI in Facebook or the Love UI in Twitter. The extension provides function abstractions, the design system, and the API to makes it easy to implement it in Laravel application.

lavarel lovelavarel loveLaravel Visits

An extension to count visits on a Laravel application. The extension is backed by Redis to store the visit records. It also provides the function and method to operate these records such as retrieving the top visit, top countries, and visits from certain period of time.

laravel visitlaravel visitEventy

Eventy is a Laravel extension that provides Action and Filter interface similar to WordPress. If you’re coming from WordPress, this extension can bring the familiarity to Laravel.

eventyeventyLaravel GeoIP

A Laravel extension that allows you to retrieve geographical location of the user your site. Information may include the user IP, currency, countries, and more. The extension can be set to leverage data from various sources such as IP-API.com or Maxmind Database or its API.

laravel geoiplaravel geoipPHPUnit Pretty Result

An extension to make PHPUnit report a little bit nicer and configurable. For example, you can change the icons for the success or failed marker icon. You can also integrate it with a macOS application called AnyBar. AnyBar is a small indicator shown in the macOS menubar. You can change the color to any way you like, so for example, if your PHPUnit test failed, you can change the indicator to red.

phpunit pretty resultphpunit pretty resultExa

Exa CLI enhances directory listing. With Exa you can list file and directories with a more comprehensive information such as the file modification date, permissions, and Git status. On top of that, you can also list in recursion which allows you to list content under sub-directories It’s an interesting command line interface (CLI) that I think you might like in your OS.

exaexa

The post Fresh Resources for Web Designers and Developers (July 2019) appeared first on Hongkiat.

Read more: hongkiat.com

Read More

How to Use HTML5 to Achieve Responsive Image (Updated)

Responsive Design may be here to stay but there are many issues that need to be addressed when it comes to making images responsive. Although responsive images automatically resize itself upon the viewport size (which is technically easy), one problem users face is that the image vocal point will become barely visible when the image becomes too small.

The ideal consensus among web developers is that the actual dimension should be responsive too. The browser should be able to load smaller or larger images in accordance to the viewport size. That way we can direct and deliver the best image proportion rather than the shrunken image (as shown).

This is where the HTML5 picture element comes in. The picture allows us to provide multiple image sources and control the delivery through Media Queries. Let’s see how it’s done, shall we?

Getting Started

I have prepared an image in three different dimensions, as follows. The image has been cropped to preserve focus on the person in the image. The plan here is that we will show the smallest size in small screens and the larger image in large screens.

image croppedimage croppedUsing Picture Element

Picturefill can work in two ways: we can embed srcset in the img tag or use the picture element. Here we will opt for the picture element as it is more manageable, easier to undestand, and more readable.

Similar to video and audio elements, picture wraps mulitple source elements pointing to the image source, as follows.

<picture>
<source srcset=”img/person-xsmall.jpg” media=”(max-width: 480px)”>
<source srcset=”img/person-small.jpg” media=”(max-width: 640px)”>
<source srcset=”img/person-med.jpg”>
<img srcset=”img/person-med.jpg” alt=””>
</picture>

The source element, as you can see from the above code snippet, is set with media attribute. In this attribute we specify the viewport breakpoint on which the image should be presented. You can see the effect immediately.

Check out the demo page, and resize the viewport size, you should find the image shown within the specified viewport width.

picture in actionpicture in actionBrowser Supports

Every browser does now support the HTML5 picture element including Microsoft Edge as well as mobile browsers. But if you have to support old browsers like Internet Explorer where this element is not supported, you can use a polyfill, Picturefill.

Picturefill is a JavaScript library developed by Filament Group. It allows us to use the picture element now. To get started, download the script in the Github repository and put the picturefill.js or picturefill.min.js. You can simply add it in the head tag.

<script src=”js/picturefill.js”></script>

Final Thought

The picture element is a great addition in HTML5. It provides more control over the image size that the browser should present on specific viewport size. The picture element works in all latest browsers, and WordPress has included it since WordPress 4.4. If you ever need to support old browsers like Internet Explorer that does not support the picture element, you can shim it with Picturefill.

Lastly, see the demo and download the source code below.

Demo
Download Source

The post How to Use HTML5 <picture> to Achieve Responsive Image (Updated) appeared first on Hongkiat.

Read more: hongkiat.com

Read More

Large Background Images in Web Design: Tips and Examples

In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic CSS3/CSS2 techniques, or by using some open source third-party jQuery plugins. There are no right or wrong answers, just varying levels of support in older legacy browsers.

Dig through this collection of riveting development techniques and see what you can put together.

CSS Tricks of the Trade

To get us started I would like to introduce a very helpful article posted on CSS Tricks which outlines many of these ideas. The simplest solution with the greatest level of support is through CSS techniques. I have found that the CSS3 method will work properly in most common browsers, and there are even hacks for handling older versions of Internet Explorer.

Let’s take a peek at the CSS3 code for placing these background images at full 100% responsive width. I’ll be using the codes from Chris Coyeir’s article to explain how easily this can be implemented.

html {
background: url(https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg’, sizingMethod=’scale’)”;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg’, sizingMethod=’scale’);
}
Demo

The HTML element is a much easier target than the body since we know everything is wrapped inside. Then we apply the background image with a full center position, no repeat and fixed as you scroll. The newer CSS3 background-size property is what applies all the positioning magic. Utilizing the many vendor prefixes will give us a wider range of support as well.

It should be noted that the filter properties have not always played nice inside IE. Some people report having issues with scrollbars or selecting text on the page. To get around this bug you can try applying the background image codes onto an inner div inside the body, set to a full 100% width/height.

CSS2 Fallback

Surprisingly I have found that more browsers support the CSS3 method than any other styles. But I will still offer this secondary method using regular CSS properties on an img element.

I feel the biggest nuance with this method is when right-clicking on the background it will bring up the context menu as if you are clicking on an image, not clicking on a webpage. This may get annoying to visitors who cannot figure out why the menu is different. But if you are struggling with the CSS3 method and still wish to avoid JavaScript, then this may be your only option.

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

Demo

The image tag should be located directly inside your body before opening any other divs. The image will fall into the background and all your other content should wrap around. This is known to work in all major browsers (Safari / Firefox / Chrome / Opera) but isn’t as well supported in IE6-7.

JavaScript Solutions

Let’s move into the more dynamic codes using jQuery plugins instead of typical CSS. These are often written with flexibility in mind, so mobile smartphones and responsive layouts should be a #1 priority. jQuery is also a fairly common language which most web developers are somewhat familiar.

There are possibly dozens of jQuery plugins to choose from, but I’ll be presenting three of my favorites. Most of these code libraries are very easy to implement and setup within a new website. All of them are hosted on Github and thus present an excellent open source solution. This means you can expect fewer bugs and greater support as more developers contribute their knowledge to each plugin’s codebase.

Backstretch

Some developers have seen the name Backstretch appear on other websites and blog articles. This is a very popular plugin and has been around for almost 3 years, since December 2009. The developers have been eagerly updating this plugin, and now it even supports image slideshows along with static background images.

To implement the code yourself just download a copy of the script and attach it to your webpage using a script tag. If you want to use CDN cloud hosting try this cdnjs link instead. Then we just need to open another script tag and type a single line of jQuery code like this:

$.backstretch(“https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg”);

Demo

The code library was written to be a single-line execution. This makes Backstretch super easy for even non-technical web developers to get working. You will not need to apply any extra HTML markup or other CSS properties. And the images will behave as 100% responsive to the browser window.

// Duration is the amount of time in between slides,
// and fade is value that determines how quickly the next image will fade in
$.backstretch([
“https://assets.hongkiat.com/uploads/oversized-background-image-design/photo1.jpg”,
“https://assets.hongkiat.com/uploads/oversized-background-image-design/photo2.jpg”,
“https://assets.hongkiat.com/uploads/oversized-background-image-design/photo3.jpg”
], {duration: 3000, fade: 750});

The code above is slightly altered to support a slideshow in the background. You have the ability to list as many image locations as you want to display inside the slideshow, followed by two bits of metadata. The duration value is the amount of time in-between slides, coded in milliseconds. The 2nd fade value will determine how many milliseconds are required to fade from one image into the next.

Vegas

The Vegas Background jQuery plugin is another excellent choice for web developers who are looking for a quick implementation. What makes Vegas stand out on its own is that you have more options for background customization. It is actually possible to setup an overlay effect using stripes or dots on top of your photo. A demo can be seen on the Vegas documentation setup page which uses a speckled overlay effect.

You will need to include a copy of the Vegas JS and CSS files which can be found on the Github page. This plugin may work using just a single line of code, but there are so many possible customizations in comparison to Backstretch. For now let’s build a simple demo example in code:

$.vegas({
src:’/img/background.jpg’
});

Demo

Believe it or not we can also use just 1 single line or block of code to get the same effect as before. Vegas allows further customization if you want to build an image slideshow, or add any overlay texture. On the overlay docs page you’ll notice a series of pattern swatches which you can demo right there. This is one great example of the benefits to image overlays using Vegas, in comparison to other jQuery plugins.

Anystretch

My final jQuery solution is a plugin called Anystretch which is actually a fork of the Backstretch plugin. There are minor differences which may help developers looking to update the background image, or to apply BGs onto various page elements.

This script works the same as before where you’ll need a copy of jQuery and a copy of the anystretch files. Then just setup the syntax as I have below, placed inside another set of <script></script> tags. Note the speed parameter determines how quickly the image will fade in after it finishes loading, measured in milliseconds.

$.anystretch(“https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg”, {speed: 150});

Live Demo

This method will also work perfectly on divs or other elements found inside the body. Each BG photo will still resize at the proper aspect ratio and appear fully responsive on mobile browsers. The demo code below is placing a background image on a div with the ID of #leftbox.

$(‘#leftbox’).anystretch(“https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg”, {speed: 150});

The Final Solution?

Ultimately we live in an era with more than one solution to semantic web problems. Frontend developers are constantly pushing for greater support and figuring out new browser hacks. This is perfect for a community of designers who are interested in quickly applying these techniques onto webpage layouts.

I can’t specifically inform you on the best solution because it will change with each website. But I am still a big advocate for HTML5/CSS3 and I feel the first CSS3 solution is enough for any modern website. Although admittedly, many of the jQuery plugins work perfectly and will even be supported in browsers which don’t understand CSS3 properties.

In the end it all comes down to your own personal choice and what you feel works best for the project. Test out 2 or 3 of your favorites and see which ones stand out from the crowd.

Examples of websites with oversized background

Along with the methods above I want to provide some examples for design inspiration. Web designers are often familiar with big background layouts, but it’s tough recalling some exact domain names.

In this showcase I have put together 60+ examples of websites using big oversized background photos. Check out the layout styles and see how you can mimic a similar technique in your own projects.

Hiut Denim
Hiut Denim website design companyKerem Suer
San Francisco freelance designer Kerem websiteGuns ‘n Roses
Guns n Roses band music website photosH-Art
work design products branding studio website layoutCayena Agency
hot chili peppers website layout photographyDesign House Stockholm
interior design stockholm sweden website layoutMartin Costa
martin costa website big photos backgroundDavidia Interior
furniture interior design studio websiteInternet marketing design branding agency websiteDaniel Filler
Daniel Filler website portfolio layoutWhitmans
New York City hamburger shop website layoutTim Roussilhe
Tim Roussilhe website big photo backgrounds designTag Interactive
big video background effect TAG agency websiteAnna Safroncik
Anna Safroncik personal website layout big photo backgroundsDOJO Studio
German design studio agency website layoutEncandle
design studio agency website layoutCreativePeople
creative people studio design website agencyTwelve Restaurant
restaurant food bar cooking dinner website layoutde Certeau & Associates
architecture website layout studio agency big photosMedis Food & Bar
food restaurant website layout big image backgroundsYan Studios
full screen big website background photos yan design agencyBlind Barber
classic retro photography background web design Blind BarberReflexion Weddings
wedding europe website layout big photographyCGRendering
architecture website studio agency portfolioShelley Sandzer
Shelley website Sandzer restaurant big photo layoutMarcus Thomas
idea design agency website layout big photosBiamar 2012
fashion studio design website big photos backgroundInzeit
Inzeit website studio mobile retail layoutBlitz SF
San Francisco California Blitz design studio websiteAu Petit Panisse
fancy restaurant bakery layout au petit panisse 2012Ringve Media
Ringve Media website layout big photo background ChinaShaw and Shaw Photography
Shaw Photography website layout big photos backgroundWerkstette
Werkstette website layout big photos background css htmlSalt Surf
retail website layout salt surf california oceanPablo González
pablo gonzalez personal website directorDavid Mullett
David Mullett portfolio photo website layoutMoxie Sozo
moxie sozo website layout big photos backgroundDavid Nolan
David Nolan New York photography portfolioFlaek
Flaek footwear website layout design big backgroundsPizzaza
Italian Pizzaza website layout big photos background inspiration500 Watt
design studio agency website layout 500wattDolphins Communication
Dolphin Design studio website agency background photosTop Dollar Photographers
top dollar photographers website layout design creativeTop Dollar Models
agency modeling Top Dollar Models website layoutRebecca Barry
writer and film director Rebecca Barry website layout 2012Healing Histories
Healing Histories website New Orleans informational layoutGoliath Sportswear
Goliath sports sporting website design big photos backgroundOnside Sports Agency
Onside Sports agency website studio classicJason Miller
Jason Miller studio webste layout design creativeDisplay Creative
Italy Display Creative agency studio website layoutInes Papert
big photos background website layout ines papertAirwalk
Airwalk skateboard branding design website layoutHasse Bronten
Hasse Bronten website comedian German background photos CSSInes Maria Gamler
pure pleasure design Ines Maria Gamler website layoutKiller Brigade
online shop clothes fashion website layout big photos background35mm Design
35mm design studio big photos background website layoutSpring/Summer
Spring Summer website layout design inspirationSandlewood Homes
Sandlewood interior homes website portfolio layoutMatt Porterfield
Matt Porterfield photography portfolio website layoutASAA Architecture
asaa architecture interior design website layout studioAyerViernes
Ayer Viernes website portfolio agency background photoah asociados
asociados interior architecture Spanish website layout design

The post Large Background Images in Web Design: Tips and Examples appeared first on Hongkiat.

Read more: hongkiat.com

Read More

10 Most Common Types of Web Developers

How many developers do you know in your life? If you work with a group of them, you might notice that they have particular quirks or personalities that you can actually group together, which is what I’m going to do with this post.

Developers have their individual preferences and work style that are very different – even if they do the same jobs. We’re going to take a look at the 10 most common groups of developers out there; see if you’re able to either spot yourself or one of your colleagues in there.

1. The Purists

Purists by definition are people who stick to traditional rules, you might know an English teacher or two who is purist by nature. The purists in my list though aren’t that strict, they are just the kind of developers who aren’t very keen on using frameworks and libraries.

They’ll pick Vanilla JavaScript over JQuery every time. They don’t see any trouble in using pure languages and traditional ways; in fact, they get annoyed when they stumble upon yet-another-framework or library. Extra libraries equal bloat for them.

The PuristsThe Purists

Mind you, this does not mean that they don’t use those in real life. It’s hard not to, when job vacancies these days ask for “expertise in jQuery”. No matter how uptight or close minded they may seem, you can’t turn a blind eye to the truth in their argument.

2. The Doers

Sure everyone has to get their job done, no matter what, but for the Doers, their list of priorities start with getting the job done. You can bet they have the latest and fastest framework, libraries and workflow set up. They have premade modules for modules, all sorted for quick use in projects.

Doers dwell in start-ups while implementing all those tools for smooth production. A typical doer’s telltale symptom is the use of a task runner like grunt or gulp.

3. The Polyglots

Polyglots are the ones who use multiple programming languages; some even are full stack developers juggling SQL and SASS like a circus juggler. That said, working in only one programming language is near impossible in web development; you can’t escape that fate, even if you’re a backend developer. So only when you know at least 4-5 programming languages, do you get to boast that you’re a polyglot.

The PolyglotsThe Polyglots

Most polyglots are who they are because of their work situation rather than by choice. Not everyone gets to have separate frontend developers or designers. Either way, they approach a new language with a lot more confidence than anyone else and are quick learners. No need to feel overwhelmed by them though, because some of them might be Jack of all trades but are masters of none.

4. The Perfectionists

What comes to mind when I say perfectionist programmer? Well, I don’t mean the ones who aim to write the most perfect, flawless of codes. The real perfectionists are the ones who look, code and go beyond coding. They leave comments, pay attention to naming variables and do the dirty work aka documentation (among other things).

Let’s face it, when was the last time you left a detailed comment or wrote a manual for your software? Not anytime recently I believe, not unless and until you’re a perfectionist. They’re rare in my opinion. Most developers don’t pay attention to those (though documentation is real important. Here’s Thoriq Firdaus’s take on it).

5. The Artsy

In terms of web development, let’s just say their mother tongue is CSS. Shapes, colours, animations, filters and all the other visual stuff matter to them the most. Wanna meet them? Codepen is their usual hub.

The ArtsyThe Artsy

They’re not designers, or maybe they are, but at ground level they are developers. They express their art with code rather than Adobe Illustrator or After Effects. Pairing them with a designer is like spreading butter on bread, resulting in a smooth and great combination.

6. The Reuser

Not every one of us are keen to jump in first thing to write a generic class or method to handle repeating blocks of code. We leave that part out until the optimization stage which occurs only after we’ve gracefully crossed the big red solid 10px deadline and the brief relaxation period following that.

Reusers know better than that, they make a solid foundation of reusable code snippets from the beginning itself and saves plenty of optimizing time later. They’re mostly experienced developers who can foresee a block of code that is bound to make multiple appearances. There is probably not a single project of theirs that is without a fully filled global file or a utility class.

7. The Bookworms

A day before my very first VB Lab, my Professor gave us a set of brief instructions, to put together a form. She ran a demo at the beginning of the class, which I unfortunately missed because I got in late. The bits of instructions I managed to jot down was not enough to save me and I was seated too far from my friends for any sign language or lip reading to help.

The BookwormsThe Bookworms

So I did the only thing I could do – I opened my good old textbook. I became a bookworm. As a result, not only did I get a praise from my Professor at the end of the class for managing to put all the requirements together in my form, I also added a background image – which no one else in class did – based on what I learned from the textbook.

It is not uncommon for me to find some of my associates who are really good at programming and logic to have desks that are stacked and covered with books. Bookworms take to the texts in pursuit of in-depth knowledge, sometimes gained serendipitously, which is ultimately the best kind!

8. The Debuggers

Debugging is a skill in itself. Its true power can only be brought out when the page shows “Internal Server Error 500”. Debuggers are not only capable of catching and squashing the bugs in their own code but in codes written by others too (which is a developer’s nightmare in its own right)!

The DebuggersThe Debuggers

They are well versed with all debugging tools and options whether it’s on a browser or an IDE. But tools aside, debugging requires the clear knowledge of a flow of events and the ability to spot the trigger in that chain.

If the code belongs to someone else, that’s when Debuggers show their true observation prowess, going through lines upon lines of code, looking for any missing ‘if’, ‘else’, ‘or’, ‘and, or a semi-colon

9. The Researchers

For the Researchers, code is not just a code for them; it becomes a topic; a topic for forum discussion, a topic for a blog post, a topic for a StackOverflow Q&A. No preaching, no judging, just a sharing of knowledge that they put an effort into dissecting. Every code we write has a use and a purpose and unfortunately a side effect, sometimes.

The Researchers among us try to understand that aspect of code. They dig out documentations, conduct experiments and most importantly share their findings for the rest of us who will be eternally grateful for what they do.

10. The Sociables

Despite copying codes off one another, we still stick together as part of a community who eats, breathes and lives code. Physically though, we sit in front of the computer by ourselves, alone though not lonely. Our social skills do take a hit though, whether we like it or not.

The SociablesThe Sociables

And then, there are the Sociables. They meet up with you for drinks, tell geeky jokes, talk about the latest and greatest about the field, are excited about upcoming releases, hardware or soft, engage in opportunities, networking possibilities, and if time permits, swap phones with you so you can both try out a different OS. Do you know a Sociable amongst your developer friends?

Wrap Up

Some of you are bound to find a friend, yourself, as part of a few groups, sometimes overlapping, other times contradicting – we don’t judge, in the end, we are all developers. But we are curious to know which of the groups of developers you find yourself most allied to. Let us know in the comments.

The post 10 Most Common Types of Web Developers appeared first on Hongkiat.

Read more: hongkiat.com

Read More

33 Redesign of Popular Websites For Your Inspiration

Not every designer gets a chance to work on the design of a popular brand or their websites. However, most of them have their own view of how Facebook, BBC, Twitter, Youtube, and other sites should look. That’s why a lot of designers all over the world take their time to create redesign concepts for these famous sites.

They’re not limited by specific guidelines and time, which is perfect for their creative visions and innovations to take root and then take flight. In this showcase, we have collected 33 redesign concepts of the sites you have come to know and love. Let us know which of the redesign concepts you love best, or if you prefer what the official sites look like right now.

Craigslist

Here is a concept redesign of the famous e-commerce website Craiglist. The designer has worked on the listing page of the website by making it cleaner, adding a prominent search bar, and working up with placement of filters.

craiglist website redesigncraiglist website redesign IMAGE: Tanveer JunayedDribbble

Dribble is the hub of the most excellent designers and it is only natural that one of those brilliant minds does a redesign of the website. What I like is the use of (Twitter and Facebook-like) cover for the profile page as well as the layout of project shots.

dribbble website redesigndribbble website redesign IMAGE: Dmitriy KharaberyushEtsy

This redesign concept of Etsy uses visuals more boldly and neatly than its current web design. You can see bigger product images and a small dropdown menu box that gives you some information about the product as you hover the mouse cursor on it.

etsy website redesignetsy website redesignIMAGE: Austin BairdWikipedia

Despite being used by millions, Wikipedia has a very unimpressive web design leaving much need for a redesign. This design concept lays out the information in well-composed blocks and also features image tiles that open up a large image when clicked. Hopefully, Wikipedia gets some inspiration from this…

wikipedia website redesignwikipedia website redesign IMAGE: George KvasnikovLinkedIn

This is an interesting redesign concept of LinkedIn that features a cleaner and modern layout as compared to the current one. I especially like how suggestions and recommendations have been placed neatly at the side and bottom respectively, however, LinkedIn’s brand blue is a bit lacking in this design.

linkedin website redesignlinkedin website redesign IMAGE: Ramil DerogongunBBC

Here is a completely new, simple and modern UI for the famous BBC news website. The designer has emphasized on clean and simple reading experience with full-view article page. Also, the image slider right at the top gives an imposing look to the design.

bbc website redesignbbc website redesign IMAGE: Baraa BilalYoutube

A cool redesign of YouTube that features a darker interface, a play button that follows along the slider, volume, settings, and subtitles appearing by mous movement, and video description appearing as the first comment. Moreover, you can see other videos of the same author by clicking on the background.

youtube website redesignyoutube website redesign IMAGE: Aurélien SalomonAmazon Streaming

Here is an experimental redesign of Amazon’s movie streaming service. The two design options show minimal yet visually striking layout. In one option Amazon’s signature yellow appears as bold sidebar featuring categories. In the other one, the sidebar appears white with yellow highlight as you hover.

amazon website redesignamazon website redesign IMAGE: James CiprianoTwitter Profile

Inspired by Twitter’s latest profile page redesign, this is concept design features a very modern look and great use of space. The sidebar on left has a solid blue color that gives a certain balance to the layout. The use of flat design and placement of toolbar icons give it quite a fresh look.

twitter website redesigntwitter website redesign IMAGE: Ramil DerogongunFacebook

Here is a designer’s version of Facebook redesign with a clearer interface and less cluttered content presentation. The Like and Share have been moved to the Comments box and a new button Save Post has been added. Additionally, you can add your current mood to your avatar as a badge.

facebook website redesignfacebook website redesign IMAGE: Aurélien SalomonSocial Network

This is a clean interface concept design mainly for a generic social media website. It shows great use of white space and well-organized content.

social network website redesignsocial network website redesign IMAGE: Kyril KuTumblr

The image-based social media network Tumblr is already famous among millions but it won’t hurt to give it a nice redesign. Here is a concept design that shows a neat and clutter-free interface. Messages, Posts, Followers and other tabs have been organized in a nice sidebar with larger bolder image display.

tumblr website redesigntumblr website redesign IMAGE: Davide PacilioFacebook Timeline

This is a Facebook Timeline concept redesign in the form of an actual two-column timeline. What I find really interesting is the profile page where coverphoto, name and other information is displayed quite boldly.

facebook website redesignfacebook website redesign IMAGE: Vitalijs SilkinsInstagram

Though designers have given a lot of thought on the current interface of Instagram, but this concept also plays with some vital UI and UX elements. The flat design ensures minimalism so the user can navigate easily. However, it would be interesting to see what happens when you hover over an image.

instagram website redesigninstagram website redesign IMAGE: Dmitri LitvinovApple Store

This concept redesign of Apple Store has been built on top of a modular UI/UX approach. You can see the designer has used bigger images and less text, thus directing the user’s attention to the products.

apple website redesignapple website redesign IMAGE: Amber CreativeDropbox dashboard

Most of us are quite used to the current dashboard of Dropbox, however, this redesign concept takes an even minimal approach towards its design. You can see Dropbox’s own blue and white color scheme with flat design icons and a neat interface.

dropbox website redesigndropbox website redesign IMAGE: Vivek RavinBasecamp

Here is a redesign concept of Basecamp that uses minimalism and flat design as it’s main focus. I really like the color scheme as well as the choice of icons.

basecamp website redesignbasecamp website redesign IMAGE: Kenil BhavsarSparrow

A talented designer has given Sparrow a new look as a tribute to this project. This neat design uses an excellent color scheme and a dark UI that’s popular among users.

sparrow website redesignsparrow website redesign IMAGE: Vincent TantardiniLastfm

This redesign is based on certain problems that have been highlighted in Lastfm website. It features a modern, ultra-simple yet functional landing page. The designer has experimented with placement of tabs, cleaner layout, and extracts of important content to improve the overall user experience.

lastfm website redesignlastfm website redesign IMAGE: Wilmer MurilloMcDonald’s

This McDonald’s website redesign concept highlights large images and blog typography. With a neat menu bar, textured background and interesting icons, this design looks quite appealing.

mcdonalds website redesignmcdonalds website redesign IMAGE: Emilia SzkurłatYahoo

A neat and consistent approach towards concept redesign of Yahoo website. The sidebar in Yahoo’s own purple color has different pages and forex graph and the right panel has profile, chat, and section of the news.

yahoo website redesignyahoo website redesign IMAGE: Alex BanagaCNN

This redesign concept of CNN website is not very different than the current one, still, in this version, the content has been arranged in a much well-organized way. It also has a separate side panel for latest and breaking news.

cnn website redesigncnn website redesign IMAGE: igor leygermanNYTimes

This rethink design has been created after much research into user behavior. Readers can sync messages in Twitter, read the news that they prefer, customize news layouts by photo and video materials, quotes, screenshots from social networks and so on.

nytimes website redesignnytimes website redesign IMAGE: Tema TroinoiPaypal

In this redesign, the focus lays on user experience by adding quick action on the right-hand bar and minimizing steps involved in regular activities on PayPal website. Though I would’ve liked to see some more colors in the redesign.

paypal website redesignpaypal website redesign IMAGE: Budi TanrimUnsplash

A cool redesign concept for the stock images website Unsplash. This neat design uses different blocks of information and website elements. I really like the font they have used but a few more colors would have been better.

unsplash website redesignunsplash website redesign IMAGE: Ben SchadeDroplr

Though the current Doplr website has quite a good UI design, here is a clean redesign of the website that makes it much easier for the user to navigate. However, the buttons could have been made a bit bigger so the design doesn’t look too empty.

droplr website redesigndroplr website redesign IMAGE: Ben BateGoogle

An attempt to improve Google search page’s user experience, this redesign concept highlights a sidebar that allows you to filter results and define types of files and settings that offer customized result preferences. The interface is also quite modern and cleaner than the current.

google website redesigngoogle website redesign IMAGE: Aurélien SalomonH&M Homepage

A fresh clean interface experimental redesign of famous clothing and apparel website H&M. The design features effective use of color and imagery along with some new fonts.

h&m website redesignh&m website redesign IMAGE: Andrew BaygulovIMDb

A new concept homepage for IMDb that highlights a simpler design with a more cinematic feeling to it. The designer has tried to make it clean and simple but also be capable of showing a lot of information.

imdb website redesignimdb website redesign IMAGE: Bart EbbekinkReddit

Of all the social media websites, Reddit is in the biggest need of a redesign. Here is a concept design of the website that features cleaner style for better readability and a much better arrangement of subreddits and account management in the same drawer.

reddit website redesignreddit website redesign IMAGE: Aurélien SalomonMtv.com

In this concept design, MTV’s website has been given a fresh look and distinctive visual language without being too trendy. The designer has used abstract and futuristic shapes with filter effect and a new typeface.

mtv.com website redesignmtv.com website redesign IMAGE: Aykut YılmazBing Search Engine

Here is a little rethink effort on the design aspects of the Bing search engine. The designer has made only a few visual adjustments that made the platform look and function better than its current version.

bing website redesignbing website redesign IMAGE: Jayaprasad MohanandeviantART

Home to wonderful artists, deviantART has received its own redesign that features a modern, clean and minimal interface. Though some functional aspects have been compromised to make the design look better, but then again, it’s just a concept.

deviantart website redesigndeviantart website redesign IMAGE: Ariel Verber

The post 33 Redesign of Popular Websites For Your Inspiration appeared first on Hongkiat.

Read more: hongkiat.com

How To Build a Landing Page

Read More