Journal

Let us keep you in the loop with whats happening in our world.
We will also share interesting things you can apply to your business

Top 5 Web Design Debates That Cause the Most Riots

The world that surrounds the topic of Web Design is home to many debates and opinions on best practices or generally how things should and shouldn’t be done. While many of these opinions are accepted and taken on board by everyone, there are some that end up being split into two opposing camps. One camp will provide an expert opinion for one side of the argument, while the other contradicts with an equally valid argument. Let’s take a look at the five most popular debates; the ones that often end up developing into digital riots with opinions flying like arrows across the vast no-man’s land known as the comments section.

web design debates

Camp one says:

Links to external sites should always open in new windows. There’s nothing more annoying than browsing a website, clicking a link and being whisked off to a totally new site, losing the page you wanted to revisit. Internal links should maintain the browser session in the current page, but anything that leaves the site should open in a new tab or window.

Camp two says:

As web designers we shouldn’t take the control away from the user. Whether a link needs opening in a new window is their choice. There’s nothing more annoying than a website taking control of my browser and opening a new tab or window for a link without my permission; if I wanted to open it in a new window, I’d do so! The problem only gets worse with inexperienced computer users, new windows break their trusty ‘back button’.

The mediator says:

In general, opening a new window should be avoided, but is recommended for some situations such as opening a help link in a shopping cart or opening a non-html document such as a PDF. To further aid the usability of your site, use a small icon to identify links that do open in a new window, or provide an options panel that’s configured with Javascript.

Further reading:

web design debates

Camp one says:

‘Click here’ has been proven to provide a higher click through ratio than descriptive anchor text. ‘Click here’ is a call to action people associate with the web, so it should be used on links to achieve the highest click through results.

Camp two says:

Using the words ‘Click here’ hinders the usability of a site. Instead of being able to see where the link goes and what it does, the user has to read the surrounding text to gain an idea of what’s going to happen. Quality guidelines suggest that anchor text should explain what a link offers.

The mediator says:

A descriptive link should always be used to help increase your site’s usability, accessibility, and optimization for search engines. It is interesting to hear that ‘Click here’ performs better on banner ads, but I’d imagine that bounce rates would also be in favor of descriptive links.

Further reading:

web design debates

Camp one says:

If your aim is to make a word bold, use the <b> tag. It’s not correct to use the <strong> tag if the word doesn’t have any extra value or importance. Screen readers pronounce the <b> and <i> tags differently, and they are also included in the HTML5 specification.

Camp two says:

Bold and italic tags are often used to make text appear bold or italic, so semantically anything that is being used for visual aesthetics should be reserved for the CSS stylesheet, and not included in the HTML markup. If an element has of specific importance or requires emphasis, the <strong> or <em> tags helps identify it with meaning.

The mediator says:

<b> and <i> tags shouldn’t be used to make text appear bold and italic for the sake of it being bold or italic, this visual styling should be left to the CSS. If a word or passage of text is of high importance, either the <strong> or <em> element would be the best use. The <b> and <i> can and should be used when no other tags fit the situation (eg: <cite>, <var>, <dfn>). An example might be text in another language.

Further reading:

web design debates

Camp one says:

Logos shouldn’t be wrapped in a header one, the <h1> element should include a description or title of that particular web page. This is the best approach for SEO, otherwise, the primary header for every page would be the same – the company name.

Camp two says:

The main identifier of what website you’re on is the logo. With the <h1> being the largest level of headers, it’s natural to place the logo and site title inside a <h1>. This way, when the page is viewed without CSS, it still holds the same visual structure and hierarchy.

The mediator says:

The definitive use for a <h1> is to describe the subsequent content. Therefore if a particular website has a title or heading that describes the content and appears in the design, this should be placed in the <h1>, otherwise the next highest structural and descriptive item would be the logo.

web design debates

Camp one says:

Internet Explorer / Edge make up just 4% of the market share, but it’s still crucial that a website is made to work in older IE versions, as well as newer browsers. There lots of major corporations who have large networks running older IE versions, as well as lots of computer users who don’t know how to upgrade.

Camp two says:

Outdated Internet Explorer is considerably out of date and doesn’t support the technologies that are present in web design today. It poses a risk to the user’s online security and is the never ending nightmare for all designers. Large companies including YouTube are phasing out support, so should you! With just 4% universal usage, IE is not something you should worry about.

The mediator says:

Older IE version usage is definitely on the decline, and its death will be quicker with large websites dropping support. Whether you support Internet Explorer depends on your own user statistics. Alternatively, consider offering more basic page styling to older IE version users rather than fixing complicated layout and CSS problems.

Further reading:
  Image Inq   Aug 22, 2017   Design   0 Comment Read More

A Showcase of Beautiful Typography in Web Design

We all know how important typography is in web design and design in general. Choosing the right typeface(s) for web, colors and, if necessary, applying the right type treatment can help tremendously in conveying your message to your audience.

Most of the websites showcased today use large typography mostly in their headers, but also in other places such as subheadings and other elements to draw attention to areas of importance. Let’s take a look at some of the best examples of typography in web design.

 Kidd81

kidd81 home typography in web design

Kidd81 is a creative designer’s personal web site. This is a nice example of using both typography and a vast color palette of striking colors in your project. It has a childish design, but it matches the designer’s style perfectly.

Get Finch

Finch - Designer typography in web design

This website is an excellent example of using the right typography and colors to highlight important facts and present information to its readers. The important groups of words are emphasized using different shades of blue, to catch the readers’ attention.

Thisisjamhot

Creative Design & Digital Agency typography in web design

This website uses typography to establish a link between itself and its readers through a warm ‘hello’. Furthermore, this site uses horizontal bands which build jamhot’s portfolio.

PolarGold

polargold.de typography in web design

Polargold is a website that presents a digital agency for contemporary marketing through typography, color, and a minimalist design.

Demotive

Demotive. Toiling since 1975 typography in web design

Demotive is a single page website that displays a compact and lightweight design through both bolded and regular fonts. It’s a great example on how to combine bold fonts with thin ones.

Fernandosilanes

Fernando Silanes typography in web design

Fernando Silanes’ website also has a good choice of typefaces, color and design to information about himself and his line of work. He uses both large fonts and normal-sized ones in this design.

Adlucent

Premier Retail Paid Search Agency typography in web design

This website uses a large typography in their header to present not just their motto but also other important information as to what they do, how they do it, their resources and team.

Digital Mash

digitalmash.com typography web design

This website uses typography and color as a way to ease readers’ search through the gallery as each word represent a showcased project. It may be difficult to read the text with all those colors but the overall design definitely catches you attention.

Gummisig

Gummisig typography web design

This website belongs to a designer that designs, codes and loves what he does. It is also another good example of large typography used in web design. He uses huge fonts on the homepage and in the menu as well.

Electric Pulp

Electric Pulp - Responsive Web Design & Development

Electric Pulp not only tackles projects of all shapes and size but they have also put a lot of effort into mixing good design with good typography.

Kyle Steed

Kyle Steed typography web design

Kyle Steed’s website presents his passion through images, texts, colors, and fonts. Even the site’s logo is made of a playful typography.

Josh Hemsley

Josh Hemsley typography web design

Josh Hemsley’s website is another example of choosing the right typefaces and colors to present information to readers. On his site, you’ll find a list of projects, details about him and his interests.

Bradfrost

Brad Frost Web Design, Speaking, Consulting, Music, and Art

Bradfrost.com is yet another example of using typography in the site’s header. This one uses a bold white font over a colorful horizontal band before to express an invitation to finding out more about what he does.

Hellomonday

Hello Monday typography web design

HelloMonday website is a Digital Creative Agency’s mission to turn Mondays into the best day of the week. This site uses an animated design to showcase different projects the agency has had over the years.

Jhische

Jessica Hische Design & Illustration

This example is a website that presents the work of Jessica Hische, who’s love is typography. With a great interest for letters, Jessica’s website is a good example of combining web design with typography.

Jlern

JLern Design Creative Development for the Web

In my opinion, this is another way of using typography in your project. This website loads as a redacted file, letting you discover each category.

Mulletized

Mulletized Design Photo Chaos

Mulletized uses animations, static images and typography to create a sensitive web design to connect its readers with the image gallery.

DIBI Conference

DIBI Newcastle 2017 typography web design

DIBI conference is a website that gives you the opportunity to share your story in 30 minutes. Furthermore, this website is an excellent example of creating a playful design through colors and typography.

Natl.tv

National Television 2004-2013 typography web design

This website uses a bold white typography on a black background to mark the end of a broadcast day. It’s a simple an minimal aproach but it has been proven to be very effective.

Nosotroshq

Hello NOSOTROS typography web design

Nosotros’s website focuses on laying out information to its readers through a regular dark gray font on a light gray background. They are an experienced team that makes great websites and unforgettable brands.

Sparkcapital

Home Spark Capital typography web design

Sparkcapital focuses on investing in startups led by creative thinkers and their website surely expresses their aspiration towards creativity. They use large typography on a horizontal background that showcases images of their work.

Sourhaze EP

Sourhaze typography web design

This website is yet another example of choosing the right typeface, colors and web design to lay out information to your readers.

Srburns.es

SrBurns typography web design

Srburns uses an interactive web design using a creative typography to connect with its readers. It has a slightly vintage touch, due to the styling of the typefaces used.

Stripgids

Strip Turnhout typography web design

Stripgids uses typography to present information about a biannual magazine that showcases interviews, essays, news releases, columns, reviews and pre-publications, and with a very broad focus.

Supernormal

Supernormal typography web design

Supernormal uses typography and web design to present Dominic’s portfolio of friendly and functional interface design. He uses bot serfis and sans serfis combined.

Huge Inc.

Huge Digital Agency typography web design

Huge Inc.’s website uses typography in a creative and interactive way. Keep scrolling to find out more about what they do and in how many ways the letter ‘H’ can be creatively changed.

Switchmw

switch mediaworks typography web design

Swtchmw was founded by a team of design addicts whose aim is innovative design quality. Their website sure expresses their aspirations through the use of animations, changing backgrounds, fonts and colors.

Thingsthatarebrown

Things That Are Brown Matt Brown typography web design

This website is another good example of using typefaces to convey your message to your audience. It uses the same font in different ways to present information to its readers.

For A Beautiful Web

Fabulous web design UK, Stuff & Nonsense website design

Stuff & Nonsense express their taste for exquisite typography and experience in web design through their website. They specialize in creative design and have worked with clients from all over the globe.

Dkoo

dkoo dot net typography in web design

Derrick Koo combines typography and minimalist design for his business card website which only displays links to his other social profiles.

Design Woop

DesignWoop Web Design Blog typography in web design

Like most websites today, Design Woop uses large typography on a horizontal band, but also in other places such as the columns that showcase other articles the site is promoting.

Trentwalton

Trent Walton typography web design

Trentwalton is a website that combines typography and minimalist design to showcase a designer and web builder’s works and thoughts.

What’s my IP

what's my browser typography web design

This website also uses large white typography in their header but also in other places to draw attention to areas of importance such as the first row of the articles which explains what a browser is.

Typejockeys

Typejockeys - Type & Graphic Design

Typejockeys is a graphic and type design company. Their aspiration is towards an appropriate use of typography in their line of work. It is a fun design with cool typography.

Gabycastellanos

Gaby Castellanos typography web design

This is yet another example of using typography in a website’s header. This website uses different types of fonts, colors and illustrations to connect to its readers.

  Image Inq   Aug 21, 2017   Design   0 Comment Read More

Semi Web Safe Fonts to Spice Up Your Web Designs


Add to Flipboard Magazine.

We all know of the usual web safe fonts, you know, Arial, Verdana, Georgia, Times New Roman etc? They’ve been around for years and have become the standard for web typography, but there’s a bunch of fonts out there that are just waiting to be put to use in web design.

Semi web safe fonts is a term I’m using to refer to those fonts that aren’t usually found on multiple operating systems as standard but are often bundled with common software applications such as Office or the Adobe Creative Suite. How many people do you know who have Microsoft Office on their PC? Quite a few I’d imagine. The same goes if you’re creating a design related site, the users will all probably have the Adobe Creative Suite.

This means there’s a bunch of fonts on their system that can be targeted with CSS if the font is present it can spice up your website design a treat. If the font isn’t installed, simply specify secondary options so the font reverts back to the popular font stacks. Remember each font has different dimensions, so use them wisely to avoid too much line wrapping, particularly on titles. Let’s take a look at some of the common semi web safe fonts:

Myriad Pro

This is a sans serif typeface with 40 styles. It is also available in Adobe Typekit for sync and web use. This font includes Greek and Cyrillic glyphs, as well as adding old style figures. It is popular for both text and display composition ever since 1992.

Myriad

.myriad { font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif;
}

Garamond

Garamond is a group of many old-style serif typefaces. It has 6 styles, and as Myriad Pro, it is available in Adobe Typekit. Its design is based on the typeface first created by the famed French printer Claude Garamond in the sixteenth century.

Garamond

.garamond { font-family: Garamond, Times New Roman, Serif;
}

Palatino

This is another popular typeface, based on the Hermann Zapf’s own elegant calligraphy. This font family is included with modern versions of Microsoft software. The font was named after Giambattista Palatino – master of calligraphy. This font was designed over 50 years ago but it still remains beautiful and frequently used by designers!

Palatino

.palatino { font-family: Palatino, Palatino Linotype, Serif;
}

Impact

This is a sans-serif typeface designed by Geoffrey Lee in 1965. It looks really good for big, bold headers, in both print and web projects.

Impact

.impact { font-family: Impact, Haettenschweiler, Sans-Serif;
}

Tahoma

This is a free font for Windows and Mac. It is a humanist sans-serif typeface designed by Matthew Carter designed for Microsoft Corporation. It consists of two Windows TrueType fonts (regular and bold).

Tahoma

.tahoma { font-family: Tahoma, Geneva, Sans-Serif;
}

Century Gothic

Century Gothic is a sans-serif typeface in the geometric style. It was released by Monotype Imaging in 1991. Its design was influenced by the font Futura. This font is also based on Monotype 20th Century, which was drawn by Sol Hess.

Century Gothic

.century { font-family: Century Gothic, Arial, Sans-Serif;
}

Gill Sans

This is another humanistic sans serif family with a British tone and concept. It was designed by Eric Gill and released by the British branch of Monotype. This toolkit family includes a different styles such as Light and a Regular.

Gill Sans

.gill { font-family: Gill Sans, Arial, Sans-Serif;
}

Lucida

This is an extended font family designed by Charles Bigelow. The Lucida fonts have a large height and wide spaces between letters. Its design was based on traditional Roman letterform shapes.

Lucida

.lucida { font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif;
}

Futura

This is a sans serif typeface with 22 styles. This geometric sans-serif typeface was designed by Paul Renner.

Futura

.futura { font-family: Futura, Verdana, Sans-Serif;
}

Baskerville

Baskerville is a serif typeface designed by John Baskerville, an accomplished writing master, and printer from Birmingham, in the 1750s.

Baskerville

.baskerville { font-family: Baskerville, Times New Roman, Serif;
}

Hoefler Text

This is a family of typefaces with a more digital design. It is free for Windows and Mac. This is an old-style serif font by Jonathan Hoefler and released by Apple in 1991.

Hoefler

.hoefler { font-family: Hoefler Text, Georgia, Serif;
}

Cooper

This is a font designed by Oswald Bruce Cooper with a heavily weighted, display serif design. It was influenced by Art Nouveau, Art Deco, and the Machine Age.

Cooper Black

.cooper { font-family: Cooper Black, Arial Black, Sans-Serif;
}

Rockwell

The Rockwell font family is a slab serif typeface influenced by the old Litho Antique font. This geometric slab serif design has a strong display face for headlines and posters.

Rockwell

.rockwell { font-family: Rockwell, Georgia, Serif;
}

Check over the examples to see if each font is installed on your system. No doubt there will be some discrepancies depending operating systems and software installed, but these semi web safe fonts are definitely worth considering for your next web design project.

  Image Inq   Aug 20, 2017   Design   0 Comment Read More

20 Most Commonly Used Plugins on WordPress Blogs


Add to Flipboard Magazine.

One of the best things about the WordPress platform is the extensive list of WordPress plugins available to extend and add new functionality to your site. You can add almost any kind of new function you may think of, and this can be done without any coding knowledge at all! Let’s take a look at the 20 most commonly used plugins on WordPress blogs across the web, including those that provide additional features, to those that simply alleviate the simple tasks of running a blog.

Let’s take a look at the 20 most commonly used plugins on WordPress blogs across the web, including plugins that provide additional features and also ones that simply alleviate the simple tasks of running a blog. You will find useful WordPress plugins in this list, for simplifying the SEO process, adding security to your blog, helping you with creating the sitemaps, adding contact forms, integrating your site with social media, increase usability, and more.

Want more WordPress plugin recommendations? Check out these best WordPress plugins for freelancers and designers.

All in One SEO Pack

All in One SEO Pack Plugins on WordPress Blogs

The All in One is a super handy plugin that instantly transforms your WordPress blog into a search engine friendly site. It offers support for XML Sitemaps, Google AMP support (Accelerated Mobile Pages), Google Analytics, SEO on Custom Post Types, advanced canonical URLs, redirection and more. It is probably one of most popular SEO WordPress plug-in used across the web, along with Yoast SEO plug-in.

Google XML Sitemaps

Google XML Sitemaps Plugins on WordPress Blogs

The Google XML Sitemaps plugin creates an auto-updating sitemap for the spiders to feast on, ensuring your latest contest is indexed by the search engines. Its purpose it to make it easier for the crawlers to see the structure of your site and retrieve it in an efficient manner so your site gets indexed faster. While WordPress pings your posts anyway without a sitemap, it is always a good idea to use a sitemap WP plug-in to make sure Google indexes all of your previous and new articles quickly.

Akismet

Akismet Plugins on WordPress Blogs

Akismet is the daddy of spam capturing, keeping thousands of blogs clean from unscrupulous robots and individuals aiming to tarnish your site with their comments and links. It automatically checks all comments and filters out the ones that look like spam – but don’t worry, you will be able to see a status history for each comment so you can un-spam the ones you want. Akismet is quite reliable and extremely good at detecting spam over legitimate comments, however there are still plenty of creative spam comments that get through (judging from our own experience on the Line25 blog). But, if you ever choose to turn Akismet off and try to have a WordPress blog without an anti-spam plug-in – just see how much spam you will get without it (we’ve tried it, and it wasn’t pretty).

Contact Form 7

Contact Form 7 Plugins on WordPress Blogs

Contact Form 7 is a simple but flexible contact form solution for WordPress blogs, easy to install and set up, and includes Captcha and spam filtering features. Most common use of this WordPress plug-in is to insert it into your contact page so that visitors can contact you. However, Contact Form 7’s use isn’t limited to your contact page and can be used to create various other types of forms that you can use on your WordPress sites.

GD Star Rating

GD Rating System Plugins on WordPress Blogs

Give users powers to vote and rate the articles and content on your blog with the GD Star Rating plugin. Especially useful for your design gallery website. This plug-in has many uses if you run a WordPress blog where you want to enable your users to rate something.

Add to Any: Share/Bookmark/Email Button

AddToAny Share Buttons Plugins on WordPress Blogs

With this WordPress plug-in, you can let your user share, bookmark and email your articles with their friends to increase traffic and gain higher visibility in the social media world. It includes networks such as Facebook, Twitter, Pinterest, Google, WhatsApp, LinkedIn, Tumblr, Reddit, and over 100 more sharing and social media sites & apps. There are quite a few social share plugins made for WordPress, and this is just one of them. You should give it a try and see if you prefer it over others. The one thing to keep in mind about WordPress social share plug-ins is how much they slow down your website. Make sure that the plug-in you choose isn’t “code-heavy” as its drawbacks can outweigh its benefits.

Jetpack

Jetpack by WordPress.com — WordPress Plugins

Jetpack is a WordPress plugin which will keep your site secure. Besides that, it can also help increase traffic with its automatic sharing and search optimization. It comes with multiple traffic and SEO tools, security tools, backup services, content creation tools, discussion and community features, and a great support team! It’s also a plug-in that can help you speed up your WordPress blog.

NextGEN Gallery

NextGEN Gallery Plugins on WordPress Blogs

Who doesn’t love lightbox galleries? Galleries are used in various types of WordPress blogs – either on the home page as a featured gallery or on dedicated gallery pages. They are also quite useful for WordPress sites that are portfolio websites for designers. The NextGEN Gallery allows easy insertion of fancy JavaScript image popups to WordPress through a single plugin. Create awesome image galleries it this easy to setup plugin!

Yet Another Related Posts Plugin

Yet Another Related Posts

There are plenty of related posts plugins out there, but this particular version is packed full of options and customization settings. It’s a great idea to use a WordPress plug-in on your website that shows other relevant content to users on the page which they’ve visited. This not only helps to improve your user satisfaction, but also helps to keep users longer on your WordPress site and to view more pages, thus decreasing your bounce rate. Many SEO professionals argue that time on website and your bounce rate are used by Google to determine your website’s rankings, although they are just some of the factors.

Google Analytics for WordPress

Google Analytics for WordPress by MonsterInsights

Easily insert your Analytics tracking code and keep an eye on stats from links, comments, and your blogroll. MonsterInsights is the most popular Google Analytics plugin for WordPress, having over 15 million downloads. Of course it’s possible to simply hard-code your Google Analytics code into your WordPress theme, however most people choose to simply enable a plug-in and insert the tracking ID from Google. This plug-in is a must have plug-in for any WordPress website owner.

BuddyPress

BuddyPress

BuddyPress is a fun and flexible plugin for creating online communities, teams, and groups. This is an open source social networking software, perfect for creating social networks, communities and forums on WordPress websites.

WP Super Cache

WP Super Cache

WP Super Cache protects your site from large traffic influxes by loading static files in place of the dynamic pages. It does this by generating static HTML files from your dynamic WordPress blog. It also does miracles in speeding up your WordPress blog. There are several caching plug-in for WordPress that are very popular, and WP Super Cache is just one of them (there is also WP Fastest Cache and a few others that are quite popular). You absolute must have a caching plug-in on your WordPress blog if you want your pages to load quickly. Don’t forget that page speed is a Google ranking factor, so having your pages load fast via a WordPress caching plug-in will help you rank better and keep your users happier as your pages load faster. It will also decrease your bounce rate, because users will not wait too long for your pages to load if they load slowly – they will click the “back” button and go to the next search result.

Use this WordPress plugin to add social share buttons to your website. It allows you to instantly add various buttons through one simple plugin file. This can significantly increase your website’s traffic. As we mentioned earlier, there are numerous social share plug-ins available for WordPress blog owners, so choose the one you like the most and the one that doesn’t slow your blog.

Social-Share-Buttons-by-Supsystic-—-WordPress-Plugins

Broken Link Checker

Broken Link Checker

The Broken Link Checker does exactly what it says on the tin, monitors your WordPress blog and informs of any links getting lost in cyberspace. After activation, the plugin will begin parsing your posts, bookmarks, and other content and looking for links. If you blog has a lot of articles, be prepared to wait quite a long time for this WordPress plugin to check all of your links. You should also take its findings with a little grain of salt – it may not always detect all of your broken links. It’s always a good idea to check your old content once a while to make sure your WordPress blog doesn’t get out of date. Finally, make sure you don’t select settings that make this plug-in check links too quickly – this will put a heavy strain on your website server’s resources and may slow down your WordPress blog temporarily until the plug-in finishes checking. Use reasonable settings and be patient while this plug-in checks for your broken links.

Google Analyticator

Google Analyticator

Google Analyticator is another super handy plugin providing instant analytics tracking. Additional features include admin dashboard with detailed stats. It has over 3.5+ million downloads.

WP e-Commerce

WP eCommerce

Transform your blog into an e-Commerce system with this great plugin. This plugin is complete with elegant and easy to use features typical of any full blown cart solution. It’s perfect for those of you who want to sell digital downloads, physical inventory, or subscriptions and memberships.

Smart Slider 3 WordPress Plugin

This is a very useful slider plugin that allows you to build responsive sliders that will automatically adapt to any screen dimensions. You can also use it to create YouTube and Vimeo slides and slides from your WordPress posts.

Smart-Slider-3-—-WordPress-Plugins

Free Tools to Automate Your Site Growth

-Free Tools to Automate Your Site Growth — WordPress Plugins

This plugin comes with all the tools you need to market your blog! It has a list builder, which makes it easy for you to build email subscriptions and can be integrated with all major email providers, a Share function, which adds social sharing buttons on your site, a Welcome Mat, which displays a full-screen call-to-action that shows when visitors land on your site, heat maps, to help you see where people are clicking, a scroll box, smart bar, highlighter and even an image sharer!

WP-PageNavi

WP-PageNavi

Easily add more page navigation functionality to your blog with the WP PageNavi plugin. Allows custom page numbering and wordings amongst more.

VaultPress

VaultPress offers great solutions for backing up your information. You can also schedule automated security scans and get support at all times.

VaultPress-—-WordPress-Plugins

This completes are roundup of must-have and most popular plug-ins for WordPress blogs. If you have more WP plugins to add to this list, please feel free to give your input in comments. Please note that this plugins list is by no means exhaustive – there are many other useful WordPress plugins out there.

  Image Inq   Aug 19, 2017   Design   0 Comment Read More

Coming Soon Page Design: How to Make it Awesome and Successful


Add to Flipboard Magazine.

Unlike the traditional under construction pages from the early days of the web, a coming soon page can nowadays prove to be a handy tool when launching a new website.

If you plan on launching a new online business, you have to think about social marketability. For having a successful business online it helps to let people know what it is you are doing, even before you actually launched your product or services. How can you do this? Easy! That’s when coming soon pages come in handy. They will help you market your business even before it is actually available to the public! You can catch leads and gain social media followers before your business is actually live.

Forget yellow hard hats and flashing signs, let’s take a look at what benefits can be seen from some of the best coming soon pages! These coming soon page designs have unique approaches and concepts which will surely inspire you to create your own awesome coming soon page! Also, learn what you should include on a coming soon page in order to make it more effective and let it help you in your marketing efforts, even before the website is actually live.

Please note that the coming soon pages examples we’ll showcase below may not be visible live on the websites because the websites are already launched. However, you can see how they looked like in the photos below. They will surely offer you the inspiration you need!

What’s a coming soon page?

Coming soon pages are in essence a teaser for what is due to come once this fabulous thing has been finished. So it’s important to give an insight on what the site-to-be is all about. They usually have a design which matches the company’s branding and also some other key features, such as newsletter subscription form and social media buttons.

View the coming soon page

Develop a brand from day one

One benefit of placing something on your domain is that it gives the opportunity to develop a logo and brand that can be embedded into the minds of your viewers before the final site is even live. This is very important and makes your business easy to remember. See the example below! This coming soon page has a large logo and a simple footer which has the purpose of catching leads. It’s simple but effective – pretty much everything a coming soon page needs.

View the coming soon page

Provide email notifications or signups

It’s no use posting up an awesome coming soon page, but not providing any way of following up. It’s more than likely the viewer will have forgotten all about it by tomorrow, so being able to say ‘Hey, the site is now live – Check it out’ is super important. That’s why many coming soon pages offer newsletter subscription forms. Make sure you email the new followers right away or soon after, to give an update on how the site is going, or otherwise they’ll forget they even subscribed in the first place and you may end up with lots of unsubscribes or spam complaints.

View the coming soon page

Go to town on the design

It might only be a temporary placeholder for what is coming, but this doesn’t mean it shouldn’t be given the same amount of time and effort as the completed site. Creating something interesting and enticing will help generate interest. Do this well enough and you’ll capture a few ‘Oh, this actually looks pretty good!’ sign ups. This will increase the interest for your business and you will be able to collect even more emails! Take the websites below as an example! They are simple, yet beautifully created.

View the coming soon page

View the coming soon page

Do something fun or different

Coming soon pages aren’t anything new, there are thousands of them out there already. With this in mind, it’s important to make yours stand out. Do something unique or fun. People share stuff they like, so give them a reason to pass on the link. Be creative! These coming soon pages examples can inspire you!

View the coming soon page

Offer links to social networks

Email isn’t the only method of communication in today’s world of web. Social networks are important tools for communicating with users. Sites like Twitter and Facebook will allow viewers to learn more behind the scenes of the website. This way you will be able to gather some new followers, even before your business is actually launched! Make them visible and even encourage visitors to follow you on Twitter, Instagram or Facebook to find out more about your site.

View the coming soon page

View the coming soon page

This was the coming soon page design for our website, Line25. It was simple and with a pretty straightforward call to action message – Follow us on Twitter! It worked! We managed to gather lots of new Twitter followers even before launching the site. This helped us a lot after because Twitter was our main source of traffic at the beginning.

  Image Inq   Aug 18, 2017   Design   0 Comment Read More

50 Inspiring Examples of Minimalism in Web Design


Add to Flipboard Magazine.

The sophisticated image of minimalism has always been a popular style of design. In web design a minimalist site is stripped naked of eye candy and fancy colors or effects, leaving the underlying structure exposed.

The key to a beautiful minimalist site is a solid and structured layout, as well as focus on stylish and well-designed typography. These 50 examples of minimalism in web design showcase some of the best minimal site designs out there on the web.

Datadesign.studio

Data Visualization Sebastian Sadowski Minimalism in Web Design

Datadesign.studio presents Sebastian Sadowski’s aim as a German award-winning Data Visualization Designer is to make information more accessible.

Kyle Steed

Kyle Steed Minimalism in Web Design

This blog depicts the writer’s work, life, and over-time progress in terms of change, dealing with change and more importantly, how to embrace your feelings.

David Arias

David Arias Minimalism in Web Design

David Arias is an independent graphic designer who sees himself as a creative problem solver. He’s also got a lot of experience in combining design with marketing ideas.

Finch

Finch - Designer. Minimalism in Web Design

This website focuses on design and mostly writes about user experiences, intelligent interfaces, and other technologies.

Site Inspire

siteInspire Minimalism in Web Design

SiteInspire is a showcase of different web projects that are innovative in terms of creative design, but it also represents a source of good inspiration when looking for new ideas for your website.

Thefoodlens.com

Boston · The Food Lens Minimalism in Web Design

This website presents an abundance of good food in the city of Boston. If you don’t know where to go out to eat or grab a snack you can always check out their picks.

Corporate Risk Watch

Minimal website design

This website is both a good example of minimalist design and a place where clients can mitigate risks or other legal disputes.

Black Estate

Black Estate Minimalism in Web Design

This website presents a type of wine and hosts a club for wine lovers too. You can find all the information you need about their shops and restaurants.

Thesoulist.com

The Soulist - Federico Repetto Minimalism

Thesoulist.com’s aim is to depict Federico Repetto’s struggles, experiences and his work in different fields. This website has a sensitive way of presenting its information to its readers through web design.

Jason Santa Maria

Jason Santa Maria Minimalism

This site presents itself as an online experiment which follows the writer’s creative direction. You’ll find a personalized system of delivering information to its readers based on the needs of the content.

Design Hotels

 Minimalism Design Hotels

Design Hotels shares a passion for cultural authenticity and hospitality of an independent hotelier. On this website, you’ll find anything you’re looking for in regards to hotel experiences.

Squarespace Blog

The Official Squarespace Blog

Squarespace blog is a platform designed to help readers customize their online presence. They’ve recently announced a number of new additions to ease your online optimization.

Nicolesaidy.com

Nicole Saidy Minimalism

Nicolesaidy.com is a designer & digital nomad from Beirut who spends her time traveling and sharing her passion for design with other people.

Qcterme.com

QC Terme Spas and Resorts Minimalist website

This website will help you find anything you need in the spa and hospitality sector. On qcterme.com you’ll find two main categories: destination and experiences which will make it easier for you to find what you’re looking for.

Laurecaye.fr

Laure Caye Minimalism

Laurecaye.fr is a website for an interior designer that presents her work and also offers really nice solutions for fitting and decorating your interior.

Vitor 

Vítor Lourenço Minimalist website

They create new products, services, and even companies. With their experience, they have identified many techniques that make other new companies developed.

Martinpriotti.com

Martín Priotti Minimalist website

This website belongs to an independent designer and developer who is currently working in Cordoba. His main objective is creating attractive solutions for his clients.

Corecompete.com

Home CoreCompete Minimalist website

Corecompete.com is a good example of minimalist web design. Their team brings a lot of experience in using Analytics & Technology, creating financial value for their clients.

Skinny Ships

Skinny Ships Minimalist website

Skinnyships is a site for a creative two-person business whose sole purpose is creating nice and funny illustrations. They’ve already acquired a lot of experience in this area.

Doyouspeakhuman.com

do you speak human

This website presents an experiment, a ‘playful research’ whose purpose is to listen to people’s needs before deciding anything else.

The Typographic Reference

The Typographic Desk Reference Minimalist website

This website works both a reference guide for typographic terms and a classification for Latin writing systems. It is similar to an encyclopedia.

iLoveTypography

Fonts, typefaces and all things typographical

iLoveTypography exists thanks to one’s passion for type design and anything else related. This website is focusing on making information related to typography more accessible.

On

ON Minimalist website

On is focused on finding the most effective solutions for their clients. Their website is a good example of minimalist web design by filtering the information shown.

Agence-belle-epoque.fr

Belle Epoque Digital Agency Minimalist website

Agence-belle-epoque.fr comes in handy when you need help with your digital project. They will come up with a good strategy, design and so much more.

Subtraction

Subtraction.com Minimalist website

Subtraction is a blog about Khoi Vinh’s lines of interest: design, technology and culture.  On it, you will find various posts related to smartphones, social media, and other many other topics.

Elitefingers.com

Architecture Agency Minimalist website

This website belongs to an Architecture Agency based in London. They present their projects with the help of an easy-to-read and watch minimalist design.

Alexcoven.com

Alex Coven Minimalist website

Alex Coven is a graphic designer, developer, and letterer and on his website you’ll find various examples, inspiration, and projects he has worked on.

Nicolasloureiro.com

Nicolas Loureiro Minimalist website

Nicolas Loureiro has specialized in interactive design and loves working on branding projects.  Through the minimalist design his website shows, you’ll find a nice gallery of his projects.

DesignWorkPlan

designworkplan Minimalist website

DesignWorkPlan is keen on finding the best solution for each of their clients. They make user centered designs for a better understanding of the world around us.

Artypapers

Artypapers Minimalist website

This website provides the writer’s objective thoughts and views on technology. This site’s beauty is that it functions as a way to express feelings.

F5 Fest

F5 Festival Minimalist website

This page is dedicated to f5 festival and aims to bring up the people who are breaking ground and shaping new ideas in media and design.

Leloi.ca

l'Éloi Minimalist website

The Eloi is a place where talents, customers, and many others get together and their website best shows their passion for creativity.

Biron.io

Chris Biron Minimalist website

‘Keeping it simple’, as the home page of biron.io says, depicts the creative direction of a Freelance Digital Designer based in London. His website is a good example of an innovative minimalist design.

Chrishardydesigns.com

Hardy Design Minimalist website

Chrishardydesigns.com brings a lot of experience to the table. With 6 years of working across a range of projects and clients, his aim is to find the most creative solutions.

Allboatsrise.com

All Boats Rise Minimalist website

Allboatsrice.com is the website of not just an agency, but one that promises success in bringing your brand to the top.

Pixen.io

Pixenio Minimalist website

Pixen.io is focusing on making maintaining websites an enjoyable task. They want to bring back simplicity to the discussion.

Jlantunes.com

Jean-Loic Antunes Minimalist website

Jlantunes.com combines reason and art. For them, this website is a way of best expressing their vision through their illustrations, logos and other art.

Thefeebles.com

The Feebles

Gaëtan Guerlais and Anaël Moreau founded the studio Feebles which specializes in graphic design and illustrations. This website is another way of expressing their work.

DesignMe

Designme.sk Minimalist website

DesignMe is a dedicated freelance web & graphic designer who engages in projects with wisdom, heart and years of experience.

Wilson Miner

Wilson Miner Minimalist website

Wilson Miner has an interest for design systems, code and the way we shape our world through design and his website best shows this aspiration.

Timroussilhe.com

Tim Roussilhe - Interactive Developer Minimalist website

Tim Roussilhe is a creative developer and his website shows a selection of his works during 2014 – 2017.

Tinkerwatches.com

Tinker Watches Minimalist website

This website gives you the opportunity to customize your watch in any way you can imagine. You just have to think it and they can make it real for you.

Cabedge

Web Design Nashville Cabedge Minimalist website

Cabege is the homepage of a web-centric communication company. They have experience with marketing strategies, SEO and in so many other fields.

Sisson Studio

Sisson Studio Minimalist website

This website belongs to a family whose passion is making art and design on a regular basis.

Revstudio.pl

Home - Rev. Studio Minimalist website

Rev. focuses on creating useful and powerful visual solutions for their clients. They have experience in regards to branding and web design

Vspicer.com

Victoria Spicer Minimalist website

Victoria Spicer is a set designer and also a prop stylist working in London. She also has a vast experience in film and advertising.

We Love Typography

We Love Typography Minimalist website

We Love Typography works as an inspirational gallery on matters of typography. They offer a lot of examples in regards to web design.

Paninibay.com

Panini Bay Minimalist website

With their minimalist web design, Panini Bay is the product of a family’s love for food. They present through this website the Italian cuisine they serve and a breathtaking view thanks to the location of the restaurant.

Anotherpony.com

Another Pony Minimalist website

Anotherpony was established in 2012 as a collective made of three designers who love spending their time creating.

  Image Inq   Aug 17, 2017   Design   0 Comment Read More

30 Awesome Design Enhancing jQuery Plugins


Add to Flipboard Magazine.

There is a vast range of ready made jQuery plugins available, created by generous designers and developers from across the web. These jQuery plugins can help add stunning functionality and effects to your website, so it’s understandable why they’re so wanted by designers worldwide.

Check out these 30 awesome design enhancing jQuery plugins, including content sliders, slideshows, image galleries, tooltips, accordions, lightboxes and modal windows. Download the pre-built scripts and add the code along with the jQuery framework to quickly and easily enhance your interactive web designs.

Slidebars

Slidebars jQuery Plugins

This plugin is a jQuery framework that can help you in creating app-style off-canvas menus and sidebars. It is completely free for use on any project and it weighs only 1.69kb gzipped.

multiScroll.js

multiscroll.js jQuery Plugins

multiScroll will help you split pages with two vertical scrolling panels when working on your website. It is compatible with mobile phones and devices and old browsers such as IE 8. You can use it in your projects just by adding a simple HTML markup.

Brick Work

Brick Work jQuery Plugins

BrickWork is a helpful jQuery plugin. One of its goals is to create the best and most customizable dynamic layouts plugins. The instructions to install this plugin can be found on the GitHub page, and to get started you’ll need to have is Node and NPM on your computer.

Auto-Playing Featured Content Slider

 jQuery Plugins

This plugin can be very useful if you want to create an auto-playing featured content slider. Perfect for portfolios and blogs as well.

scrollToBySpeed

scrollToBySpeed Demo jQuery Plugin

scrollToBySpeed is a plugin that creates animated window scrolling. You can easily install it on your site and add this window scrolling effect.

Revealing Photo Slider

photo jQuery Plugin

This photo slider plugin also reveals more information as you check the photos in the gallery. It can be used for portfolio websites.

Fancy Box

roundup jQuery Plugin

fancyBox offers a nice and elegant way to customize and add functionality to your images, HTML content and multi-media on your webpages.

Facebox Image & Content Viewer

content jQuery Plugin

Facebox is a lightbox plugin that can display images, divs or entire remote pages. It uses the compact jQuery library as its engine.

ANIMSITION

Animsition

Animsition is a simple jQuery plugin for CSS animated page transitions. You can download it from Github. It comes with different animations, such as fade, rotate, flip, zoom and even overlay.

jInvertScroll

jInvertScroll jQuery Plugin

This is a both lightweight and easy to setup plugin for jQuery that allows you to move horizontally while having a parallax scrolling effect.

gridscrolling.js

gridscrolling.js jQuery Plugin

gridscrolling.js takes care of your website layout by giving you the change to scroll up and down though the mains but also check the right and left of your page.

HighSlide

highslide jQuery Plugin

Highslide JS a quick and elegant looking image, media and gallery viewer written in JavaScript. There are no other plugins required, such as Flash or Java and also popup blockers won’t cause you any bugs or errors, as the content opens within the active browser window.

JQuery Tilted Page Scroll

jQuery Tilted Page Scroll

Tilted Page Scroll is a jQuery plugin with which you can create a 3D tilted scroll effect. It has smooth transitions, perfect for animated websites.

jCarousel

carousel jQuery Plugin

Carousel is a jQuery plugin that provides a flexible toolset for navigating and HTML based content. It is used for controlling a list of items in horizontal or vertical order.

jQuery.Tooltip

Tooltip jQuery UI

Tooltips can be attached to any element to help display the title’s attributes in a box right when hovering your mouse over that element.

jQuery.ScrollTo

scroll jQuery Plugin

This jQuery plugin can be used to create a lightweight, cross-browser and highly customizable animated scrolling experience.

Accordion jQuery UI

Accordion is a jQuery plugin that displays collapsible content panels when presenting information in a limited amount of space.

Dense

Dense.js jQuery Plugin

Dense is a jQuery plugin that brings in retina support to your website. It can help you clear the blurry images and an easy way to serve device pixel ratio aware images.

SVGMagic: the fully automated SVG fallback

SVGMagic - Great jQuery SVG fallback plugin

SVGMagic is another simple jQuery plugin.  This one searches for SVG images on your website and creates PNG versions if the browser doesn’t support SVG.

Space Gallery

gallery jQuery Plugin

Space Gallery offers a creative way to view a gallery. It has a cool effect – as one image fades, another one is shown. Implementing this plugin into your project is easy, all you have to do is attach the Javascript and CSS files to your document and then edit CSS file and fix the paths to images.

SimpleModeal

modal jQuery Plugin

SimpleModeal offers a flexible modal dialog framework. This is an easy to setup jQuery plugin for modal windows.

Virtual Tour

tour jQuery Plugin

Virtual tour is an extension to the panorama viewer and allows you to add interactivity by transforming some panoramic views into a virtual tour.

RowGrid.js

RowGrid.js

RowGrid.js a small and easy to use jQuery plugin that helps you place items in straight rows. This is perfect for creating grid galleries and/or for portfolio websites.

Featured Content Slider

slider jQuery Plugin

The Featured Content Slider plugin shows new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive slideshow.

gifplayer

gifplayer jQuery Plugin

gifplayer is a jQuery plugin that will make playing and stoping animated gifs on your website easier. This plugin has the advantage of letting you load a lighter static version of the animated gif.

matchHeight

jquery.matchHeight.js jQuery Plugin

matchHeight is a plugin that makes the height of all selected elements exactly the same. It is responsive, row aware, handles images and other media, supports hidden or none-visible elements, and more.

ADAPTIVE BACKGROUNDS

jquery.adaptive-backgrounds.js

Here’s a jQuery plugin which finds and extracts the dominant colors from images and then applies them to its parent.

jQuery Corner

corner jQuery Plugin

This corner plugin adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item.

piroBox

box jQuery Plugin

One of the most important things this plugin has to offer is the ability to open any kind of files, from inLine content to the SWF files, from simple images to pdf files.

jQuery Confirm mailto

jQuery Confirm Mailto

This is a plugin that can come in handy. You can confirm with users before opening any mailto: link through their default email client.

  Image Inq   Aug 16, 2017   Design   0 Comment Read More

Web Design Trend Showcase: Rockets & Spaceships


Add to Flipboard Magazine.

Yep, that’s right – Rockets! Probably one of the most obscure mini-trends, but one that’s developed a fair number of examples. Rockets and spaceships are appearing in a range of website designs and layouts.

Let’s take a look at some examples of websites using rockets and spaceships effectively.  We’ve also included some resources where you can find free rocket/spaceship graphics of your own. You will find some cool icons and vector illustrations at the bottom of this article.

Jeff Sarmiento

Rockets in web design

This website belongs to a web designer from Toronto and it is a nice example of how to integrate spaceships into the image of your site. It has a retro/vintage paper texture as the background and an overall sepia-toned color palette.

Turbomilk

Turbomilk space-themed website designs

Turbomilk creates icons, characters and many different illustrations for apps and deals with companies all over the globe. They also offer web design services and their portfolio can be visible on their site. Their website design is full of cartoonish illustrations, which give it a fun and childish (but in a good way!) vibe.

Easyrocketstudio.com

Easy Rocket Studio space-themed website designs

With the help of easyrocketstudio.com you can create your own e-sports portal. They have a fun, space-inspired website design. The website starts with a loading animation of an alien UFO abducting a cow. How fun and unusual is that?! They also use rockets and spaceships in a really unique way – to define their service modules/packages.

Makedo.net

 Make Do space-themed website designs

Makedo.net’s aim is making WordPress more accessible. Their website design displays beautifully on any screen size. They combine high-quality illustrations with cartoon characters on their background. This makes their site unique and easy to remember. The color palette is carefully chosen, and the green, light and dark blue shades blend perfectly together. It also makes use of white space in avery smart way, make sure you check out the site!

Minicool.net

Minicool space-themed website designs

Minicool.net is a website for baby graphic design. The overall design uses pastel colors and cute illustrations of trees, flowers, and clouds. The rocket space itself features a bunny wearing a blue baby outfit. Scrolling up with your mouse wheel takes the bunny inside the spaceship up to the clouds and past an illustration of the sun, which has an animated illustration with sun rays moving in a circle. Going higher up in the clouds you will see a parent mouse along with a baby mouse on a bicycle. You will also see an illustration of the moon that’s sleeping – another animated effect is used here with Z’s coming out of the moon. Finally, at the top of the page, the rocket spaceship arrives at the order button, allowing you to purchase graphic books targeted at children.

Rawkes

Rawkes space-themed website designs

Rawkes is a web design studio that explores different digital activities like games, programming and so much more. Check out their space-themed design! The use of spaceships and rockets is more subtle in this design. You will see the space reference in the slider, and also in the footer.

Paper Launcher

Rockets in web design

This interactive website lets you print a spaceship model and then teaches you how to build your own Turbolauncher. How cool is that?! Do to the nature of this business, they used lots of rocket/spaceship illustration in their design. Other than that, the layout is quite simple and clean.

Spacetelescope.org

ESA Hubble space-themed website designs

This website is a way to document space-based observations and discoveries through the Hubble Space Telescope. Of course, the Hubble website must pe space-themed! In this case, no vector illustrations were used, but instead, the focus is on super high-quality images taken by the Hubble telescope.

Spaceshipcollaborative.com

Spaceship Collaborative

Spaceship Collaborative is a team of people committed to creating innovative projects for communities. Both their website and logo are space/rocket-themed. The website’s background is colored in a deep, dark blue shade, to resemble the space atmosphere.

Pojeta

Rockets in web design

This website is really helpful when you’re in need of creative ideas for you and your business. They have some fun, space/alien-themed vector illustrations but also, as you scroll down, you will find other unusual drawings worth checking out, even though they are not space-themed.

Websitelaunchpad.com

Launch A Website On Website Launchpad space-themed website designs

Websitelaunchpad is a company focused on SEO, SEM services. Their website is designed to catch the visitors’ attention and make them wonder about the vastness of space. Their logo is also spaceship-themed and matches the whole branding perfectly. It has a simple layout with a basic, grid gallery to showcase their projects.

Download your own rockets and spaceships

There’s a bunch of cool rocket and spaceship graphics available for free on the web. If you want to follow the rockets and spaceships web design trend but don’t know where to start, here’s a roundup of various stock images, icons, and general graphics with spaceships and rockets. Be sure to check out the premium stock websites for plenty more resources and also read each freebie’s license individually, before using.

To the Moon Icon Set

Here are some wonderful icons of man’s journey to the Moon. Feel free to download them and use in your space-themed design projects.

Free rockets graphic

Space Rocket Photoshop Tutorial

This Photoshop tutorial will show you how to design a simple space rocket. Learn from it and use it in your own illustrations. This is a great way to start if you want to know more about this web design trend.

Free rockets graphic

Rocket Stock Illustration

Looking for a rocket illustration to use in your designs? Here is a free stock photo you can download. It has a simple, flat design, with a gray outline, like in a hand-drawn illustration.

Free rockets graphic

Space Rocket Stock Illustration

This is a fun, cartoonish, space rocket illustration given for free on a stock photo website. Its the same as the above example, just on a different background and in a different angle.

Free rockets graphic

Rocket Stock Illustration

This is a simple rocket illustration that comes as a free stock photo you can download. It’s red and has some subtle 3D gradients and shadows.

Free rockets graphic

Retro Rocket Stock PSD

This retro rocket design comes as a free PSD you can download and customize with just a few clicks. It’s perfect for retro/vintage website designs, due to the color choice.

Free rockets graphic

  Image Inq   Aug 15, 2017   Design   0 Comment Read More

Designer’s Guide for Designing Web App Interfaces


Add to Flipboard Magazine.

Recently, there has been a lot of development in web design and it’s published daily. Are you part of the web designer community? If this is the case, then you are working to develop web interface design, either in the form of dashboards, or as part of a website. The role of a web designer has been increasing in importance and in future, the role will be even more important as lots of startups are starting to focus on design more each day.

Inexperienced designers might find it challenging to deal with web interfaces. To create an amazing UI design, many factors need to be considered. However, the secret lies in detail accuracy.

Do you want to be a successful user interface designer? Let’s dive in. We’ll start with the basics.

Tips on intuition

UI Design Principles - Intuition

The easier it is to use your website, the higher the number of visitors and vice versa. Intuitive design carries a huge significance even when talking about easiness. This means that your website should have clear usage directions as soon as the visitor opens it.

An intuitive design offers invisibility which is its biggest advantage. There is no default guideline but an approach that most users are familiar with and can easily do what they want to do.

An intuitive design helps people concentrate on the quality of the experience. Any visitor would want to complete a task without losing time on interruptions. A non-intuitive design is disturbing and intrusive.

Intuitive design is invisible but it doesn’t mean that the visitors aren’t aware of its presence. They will notice that all the elements are related to the work they are doing and they will be happy about it.

UI Design principles

There are three principles that determine the use of visual language:

  1. Communication – shows in a manner that is familiar to users
  2. Organization – offer harmonic and precise structure
  3. Economizing – utilizes spectrum of cues efficiently

UI design’s nature

UI Design Nature

The main aim of user interfaces is to offer quality interaction, therefore, offering an amazing user experience.

If the users must complete their task easier, then they should use an effective and straightforward design.

Importance of user interface design on development

Importance of user interface design

Occasionally, owners hold meetings to go through user’s feedbacks and find ways to apply the user’s comments on the design.

This results in an amazing user experience because of the combination of simplicity and functionality.

What role does a web interface play during development?

Role of your web interface in design

A research is conducted using the user’s requirements and preference.

The owners go through every requirement and come up with a solution for every requirement that is possible.

It is important to listen carefully to what your client’s requests and feedback and adjust your design accordingly, keeping best UI design practices in mind.

UI design rules

UI Design Rules

  1. Clarity rule – users anticipate seeing straightforward and clear interface elements. People avoid complicated content when they are online. Also, they won’t find time to learn how to do easy tasks.
  2. Preference rule – users will feel confident when they have an idea of what is expected from them.
  3. Context rule – a UI should let users control what they feel they should control.
  4. Defaults rule – if your website is clear, users won’t try to change the default settings.

It is important to have defaults

  • TV devices come with default settings which are rarely changed
  • The fridge’s temperature is rarely changed
  • Defaults are everywhere in life
  • Defaults are crucial for every experience

Ensure that defaults are functional and applicable. These defaults are rarely changed.

New interface creation tips

Design Interface Creation Tips

Know your users: differentiate between their goals and yours. Include them in the priorities list. After doing that, go through their experience and competence and know what they want. Get to know their preferred interface and use them.

Avoid the modern trends and those style features that are newly introduced. The only way to help your clients accomplish their task is by focusing on them.

The navigation and structure of a UI design:

  • Come up with solutions that concentrate on the interaction between users and product and help your users accomplish their task.
  • Categorize the solutions according to significance, presence, user’s role and relying on usability.
  • Take care of structure, data architecture, navigation and create a functional UI design with rich content.

Preparation of final document: this final document needs to have the whole UI structure. It needs to contain the product’s path from initialization stage to final stage when it is displayed on web browsers.

Following patterns: users encounter different interfaces most of the time that is different from yours.

Some of the websites that most users encounter daily are Facebook, Twitter, news websites and WordPress.

Perhaps you know how successful these interfaces are and you shouldn’t reinvent them. Instead, go through these platforms to search for solutions for the problems you are facing. It is good to have familiar UI patterns.

Consider feedback: you need to constantly respond to users’ needs. You should give directions to your users and solve the misunderstanding and mistakes.

Ensure that your users are updated of any changes. Keeping them updated to make them feel as if they are part of the changing process. Eventually, your interface will be what the users want.

Making web interfaces easy to learn

The simpler an interaction is, the easier it is for the user to remember that action.

This means that you need to design the interface in such a way for the user to have a limited number of things to do. To do that, you will have to break the information into small digestible chunks.

You should also consider advertising your interface’s features on screen. Don’t stuff it in the users’ faces, though. Consider adding them somewhere in the sidebar, or at the bottom of the screen to avoid hijacking your users’ attention.

Making web interfaces intuitive

Making web interfaces intuitive

The most important factor that determines the performance of your web app is the user interface. Does it have an intuitive dashboard design? No? Then make it intuitive.

UI can show simple methods of achieving the results. It doesn’t matter if you have powerful programs, people ignore an inefficient dashboard design.

What matters is the user’s interaction with a program while helping them achieve their goal. Therefore, web design is concentrating on the user more and more.

Making the user decisions simple

It all starts with making the design as simple as possible.

Why?

Complicated designs confuse users and make it harder for them to make a decision. What do I click? Where? Is it the red button over here? Is it the green one over there?

Implement a visual hierarchy

What are the most important things in your web interface? Highlight them to make the users focus on those. You can use size, colors, typography, white space, among others.

Typography

You might be thinking “Oh, I know a good-looking font”. That isn’t enough. Having a good font in your design is useless if you don’t know how to use it, where, or with what other font to pair it with.

Putting Helvetica everywhere won’t save you. Every font has its own personality and works well for a certain audience.

Besides choosing a font suited for your audience, you should also make sure you use its size well, to highlight certain parts of the design. You should also use colors to do that, but be careful with certain color combinations.

Conclusion

A good interface design is like the air we breathe. We can’t see or think about it. However, it satisfies our needs. If you have ever experienced poor UI, then you will appreciate a site with easy to use user interface.

A good design should always make you confident as you work on your task and eliminate the worry of having made a mistake.

Apps and websites should functional and designers should put more effort and time on the usability of the product.

  Image Inq   Aug 14, 2017   Design   0 Comment Read More

Inspirational Showcase of Business Card Websites


Add to Flipboard Magazine.

The term ‘business card website’ has become widely associated with the popular style of website that has cropped up on the personal domains of designers and developers. The site is essentially a simple, single page design that displays personal information, contact details and links through to other social profiles, much like a traditional tactile business card is used to display basic information.

Business card websites come in all shapes and sizes, but popular characteristics include a compact, lightweight design, often small in size. Business card sites also tend to make use of Javascript to enhance the user experience and are commonly designed with a fresh take on the interface, taking inspiration from the clean style of Apple’s OSX.

Let’s take a look at an inspiring collection of examples, each with an individual twist on the original business card idea.

Tim Van Damme

Tim Van Damme Business Card Websites

Tim Van Damme’s personal business card website is as playful and colorful as a designer’s page should be.

Michealmorgan.com

Mícheál Morgan Business Card Websites

Michealmorgan.com is a young entrepreneur’s personal website which breaks the ice with a photo of him. Furthermore, you’ll find a lot more about him and his passions.

Florian Pichler

Florian Pichler Business Card Websites

Florian Pichler chose a simple letter-like design that focuses on delivering information to his readers in an interactive way.

 Ximenavengoechea.com

Ximena Vengoechea Business Card Websites

Besides the gallery of hobbies and activities she takes part in, Ximena’s website also highlights certain keywords that best describe her, making her personal web page an interesting way to learn more about someone.

Kristihines.com

Kristi Hines Business Card Websites

Kristi Hines business card website best shows her passion, writing. This site keeps things simple and focuses on her hobbies and aspirations.

Redrussak.com

Red Russak Business Card Websites

Red’s page is one that makes you smile when you see it. Not only does it start with a question to make you curious but it also has a funny portrait of himself.

Thierry Castel

T H I E R R Y C A S T E L Business Card Websites

This page is another way of presenting yourself, this time not through the birth date and graduated schools, but through what you do best, your hobbies and passions.

Sarahlichang.com

Sarah Chang Business Card Websites

Sarah Chang personal web site keeps it simple with a short presentation of who she is and a couple of links to her interests.

Ianenders.com

Ian Enders Business Card Websites

Ian Enders has an interesting way of presenting himself – a list of sentences that start with the same word and a couple of highlighted keywords that mark the important things in his life. Besides that, the photo is another way of getting you to know him because the t-shirt and the cup sure have personality.

Callieschweitzer.com

Callie Schweitzer Business Card Websites

This personal page is more complex than the other examples and focuses on presenting every important aspect of Callie Schweiter’s bio and line of work.

Nathanielkoloc.com

Nathaniel Koloc Business Card Websites

This example shows a lot more information than a normal business card web site, making it one closer to a personal bio type site with a formal concept.

Greg Thongsophon

Business card website

Greg Thongsophon’s business card web site focuses on presenting only the important information, just like a real-life business card.

Laurenicolesmith.com

Lauren Nicole Smit Card Websites

This one has a simple design, with a blue background, Lauren Smith’s name and line of work and some links to her social media pages. These kinds of pages focus only on delivering the important information to readers.

Clément Simon

Clément Simon Card Websites

Clément starts his first contact with his readers through a ‘hello’ before even saying who he is or what he does. This helps to make the information more personal and less formal.

Chris Rowe

Chris Rowe Card Websites

Chris Rowe is a Freelance Web Developer and his personal web page keeps it simple and clean. He doesn’t give us a lot of info about himself but he does mention that he can make great websites for great clients.

Pascalvangemert.nl

Pascal van Gemert Card Websites

This page is an interactive resume which starts by presenting Pascal’s name over a superhero background before getting into any other details. Furthermore, you’ll find everything there is to know about him.

Eugen Buşoiu

Eugen Buşoiu Card Websites

Eugen Buşoiu also keeps it simple by choosing a background that best fits his personality and line or work to which he added some info about him.

Hopereagan.com

Hope Reagan Card Websites

This website focuses on presenting Hope Reagan. This site uses a white marble texture to expose one name and some information about the person. Just like previous examples, you’ll find links which will help you find out more about Hope.

Jimramsden.com

Jim Ramsden Card Websites

Jim has quite an interesting way of showing us the two sides of his personality –  the city’s skyline representing his logical mind and his creative heart through a pastel-coloured landscape. If you’ll continue scrolling you’ll find out more about him and even some of his articles.

Timothy Armstrong

Business card website

Timothy’s business card web site uses a dark and neutral layout. This way, the information stands out making it easier to be read by anyone who is looking for him.

Lee Adams Norris

Business card website

Lee Adam Norris’ contact card uses an Asian design. You’ll find a list of sites, pages and social media accounts where you can later contact him in case you need his help as a marketing manager.

Michael Dyer

Business card website

Michael Dyer’s website is another example of a business card web design that focuses on the important information of the person. In this case, Michael chose a neutral blue background for laying out his contact details, networks and some other info about himself.

Christian South

Business card website

Christian South and his business card website tells us some facts about who he is before laying out any networks and contact information.

Ryan Glover

Ryan Glover Card Websites

Ryan Glover has a different way of telling us more about himself. Instead of giving us all the possible information, he uses his passion, writing, as a way to describe himself.

Mark Tyrrell

Business card website

This website belongs to a designer, developer, and blogger called Mark Tyrrel who uses a single page to describe himself and his skills.

Hannahsilverton.com

Hannah Silverton Card Websites

With a sensitive design, Hannah Silverton not only tells us some aspects of her life and way of living but also shares other people opinions about herself.

Allisonstadd.com

Allison Stadd Card Websites

Allison Stadd inspires energy through her personal website and her way of presenting information. Her photo in which she smiles, the font and use of caps lock gives you a good vibe while visiting.

Ellensriley.com

Ellen Skye Riley Card Websites

Ellen starts her personal presentation through a horizontal band with her photo, name, and logo before showing us some of her projects, passions and aspirations.

Adamhartwig.co.uk

Adam Hartwig Card Websites

This website uses a changing and animated interactive background to present important of Adam Harwig’s interests and hobbies.

Andrevv.com

Andrew McCarthy Card Websites

With a minimalist design, Andrew McCarthy presents himself in a fun and interactive way. Scroll down to find more about him and watch that logo change shape and color.

Michael Villar

Michaël Villar Card Websites

With an animated background, showing a personal logo before laying out any information, Michael Villar presents to us important aspects of himself and his line of work.

Nico Kaiser

Business card website

Nico’s website is another example of minimalist design, this time using a light gray background and an almost white rectangle to lay out information.

Rleonardi.com

Robby Leonardi

This website uses Robby Leonardi’s illustrations to portray himself. You’ll out it’s divided into 3 parts: a game based resume and two portfolios.

Gabor Szauer

Gabor Szauer

Gabor Szauer’s business card website also uses a minimalist design to state out information about himself. If you want to get to know him more, you can check his page.

Pedro Duarte

Pedro Duarte

This site uses yellow shape to present information about Pedro Duarte, while the black stripe has a list of projects which you can scroll through.

Michaël Betsch

Business card website

Michaël Betsch uses a light gray background and a centered, smaller panel to lay out some key information about himself.

 Garysheng.com

Gary Sheng

Gary Sheng starts with a friendly hello on a band made out his photo. This way, he gives a good and positive impression about what a reader is about to see.

Karsten Rieger

Business card website

Kasten Rieger also uses a simple and minimalist design to present himself. He uses a small and representative photo along with some other data about him and about how you can contact him.

Rafaelderolez.be

Rafael Derolez

Rafael uses key words and images which can be discovered while scrolling his page. He definitely found an interactive way to reach people.

Preshit Deorukhkar

Preshit Deorukhkar

This is another example of a static background, this time with a photo of the person this site is about, and a scrollable stripe that can be used to lay out information.

Brandoncjohnson.com

Planetary Scientist

This personal website best shows Brandon Johnson’s interests through logos, images and even the way the text is displayed. You’ll find out he is a planetary scientist before even noticing this piece of information.

Quinntonharris.strikingly.com

Quinnton J Harris on Strikingly

This is a different example of a personal page. In this example, Quinton Harris uses a scrollable gallery of personal photos to present himself.

John Phillips

John Phillips

This is another example of a single, static page which contains pieces of information about John Phillips. Like previous examples, you’ll key words highlighted and linked to other pages (ex. ‘being a dad’ is linked to a photo of him and his two kids).

Seanhalpin.io

Seán Halpin

SeanHalpin has a very creative way of presenting himself to his readers. He is a web designer who uses illustrations to best display what he can do and how he can help.

Chris Harrison

line25

Chris Harrison uses a background with a photo of himself and gives us a friendly vibe by simply saying ‘Hey’.

Tyler Galpin

Tyler Galpin

Tyler Galpin also uses a dark and neutral layout and only a logo of his name. This example is best used in smaller circles, as it doesn’t give you any other information about who he is and how to find him, and is much rather used to contour someone’s personality.

Mattias Kretschmann

matthias kretschmann

Mattias Kretschmann combines the business card website with a showcase of projects he has worked on. You’ll find out he’s a designer and developer and although he’s not available for hire, you can try talking him into one of your small projects.

Melaniedaveid.com

Melanie Daveid

Melanie’s page uses a horizontal band with her logo as a primary form of presenting her. By scrolling, you’ll find out her website turns into a grid-type that will showcase projects and more information about her.

Simoneviani.com

Simone Viani

Simone uses a minimalist design. This page only lays out key information about the person it is presenting. Besides that, you might be surprised to find out you can play a game on her page as she likes ‘crafting interfaces and interactions’.

Luke Stevens

Analytics Explorer

Luke Stevens uses his personal page to present himself to his readers and also to present ways in which he can help you optimize your site and business.

Nik.org

Nik Papic

Nik.org presents itself as an online home of Nik Papic. With its lilac layout, Nik tells us more about his life, passions, and aspirations.

Grahamhicks.com

Graham Hicks

Graham Hicks uses an animated logo as the first thing you see on his page. The rest of the page uses a white background with bold colors to layout important information about this person.

Ryry.io

Ryan Morrison, Designer

Ryan is a designer who works at Webflow and this is his business card website. What makes this page different are the 3 photos that play a good role in getting to know him and his hobbies. You can move them or change their size as you please.

Appenstein

Appenstein LLC

The last example is Appenstein’s business card website. With his page’s green layout and logo, Justin Youens presents himself as an independent iOS Developer.

  Image Inq   Aug 13, 2017   Design   0 Comment Read More
Page 35 of 36« First...1020...3233343536