Authors Posts by Enfuzed

Enfuzed

201 POSTS 65 COMMENTS
is a web and graphic design blog. Be sure to follow our social media accounts and subscribe to our RSS feed.

0
Useful tools for developers part one

Being a front-end web developer myself, it’s always helpful finding new tools to help make developing easier and more efficient. That being said, below is part one of useful tools for developers. All of the tools I will post in these articles will in some way be beneficial to developers.

If you have any suggestions for great developer tools that you yourself use to help with the process of developing, please feel free to comment them below and I’ll take a look at them. If I find them useful I will post them up in a future article.

Scribe

Have you ever been browsing on your iPhone or iPad and come across something you need to copy and paste to your Mac, but you’re forced to copy-paste-email it to yourself instead? Now you don’t have to waste all that time, scribe lets you copy and paste between your Mac and Apple iOS devices.

Scribe Apple App

Web Safe Colors

I know I just posted about this, but it’s a handy website. Web Safe Colors displays all 216 web safe colors in a grid format and displays the RGB, HEX, and HSL color codes in an easy copy format as needed for CSS.

Web Safe Colors by Zac Knoblauch

ColorZilla

ColorZilla is a very useful Chrome web browser add on that lets you pick colors right off of a web page with a color dropper. This comes in handy when you see a color you like on another site, or even on an image or logo from a website.

Once you click the dropper on the color you want it gives you the RGB and HEX color codes to copy. This cool add on even has a CSS3 gradient generator!

ColorZilla Chrome Add On

Ruul

Ruul is an on screen ruler and a great tool for developers. I use this (along with ColorZilla) on a daily basis. You have a short 560px ruler and a longer 1100px ruler to choose from in many different transparent colors. This comes in handy for quick measurements needed while developing on a website.

Ruul Chrome Add On

Adobe Edge Inspect

Adobe has been kicking ass lately as far as tools for web development go, and Edge Inspect is proof. I recently downloaded Edge Inspect to give it a shot and I have to say, I am impressed and I use it for my responsive website projects.

Adobe Edge Inspect allows you to test any website on multiple devices and inspect the code for each of those devices. Simply download the free Edge Inspect app for your Android or iOS device and download the add on for Chrome. Turn it on and start inspecting, change code and watch it change live on your device. This makes editing code and testing on mobile devices smooth and easy right from your desktop computer. I suggest you take a few minutes and head to Adobe to learn more about this awesome tool.

Adobe Edge Inspect

0
19 Free Long Shadow Social Media Icons

It’s Friday so you know what that means…a new freebie! Today’s freebie is a set of 19 free long shadow social media icons. This free icon download comes with 19 different social media platform icons.

These icons, created by Rihan Terence,  incorporate the controversial flat long shadow design trend. Some social icons included in the set are Facebook, Twitter, Instagram, Dribbble, Behance, Pinterest, LinkedIn, Tumblr, Stumble Upon, Vimeo, Flickr and YouTube.

Click the heading or image below to direct to the download page.

Free Long Shadow Social Media Icons

19 Free Long Shadow Social Media Icons

2
Web Safe Colors

Out of no other reason but pure boredom (and for fun), I created a little website to showcase all of the web safe colors. I actually started this project years ago when I first got into web development, but in my amateur-ness (is that a word?) I was using images to showcase the different colors (not sure what I was thinking).

Fast forward to a few months ago, I decided to finish this project with one goal in mind, make it super simple. I think I accomplished that goal as the site has only the bare essentials to serve its purpose, plus it only weighs 70kb.

Anyways, the site showcases the 216 web safe colors in a grid pattern. When you hover over each color it displays the RGB, HEX, and HSL color codes for that color. Why those color codes? Well because those are color codes used in CSS for the web :) I hope this site becomes of some use for those of you in search of web safe colors and I tried to make as user friendly as possible so enjoy!

Web Safe Colors

Web Safe Colors by Zac Knoblauch

Web Safe Colors by Zac Knoblauch

0
100 Free Simple Line Icons

Here is a free set of 100 simple line icons created by Mirko Monti. This icon download comes in AI, EPS, PSD, and SVG vector formats. These are free to use both personally and commercially and are perfect for your next modern, simple, design project. Click the heading or image below to be directed to the download page.

100 Simple Line Icons by Mirko Monti

100 Free Simple Line Icons

0
25 Bootstrap based Joomla Templates

Website design is not something you change every three months, but many businesses wait too long to refresh the look of their web page. When a design was created a decade ago, it usually shows, plus new features come along every day, and it’s unwise to deprive your site’s visitors of them!

If you haven’t revamped your website for too long because you think it will take lots of money and time, here’s the good news: with a predesigned template, your new web page can go online in a matter of days, and the cost of a theme will not be more than a hundred dollars.

For the proud owners of Joomla-powered websites, whose sites are crying for a revamp, we have selected twenty-five top Joomla templates, based on Bootstrap framework.

What’s Good About Bootstrapped Themes?

Bootstrap is one of the best front-end frameworks that allows building flexible, great-looking templates with rich functionality. The best thing about Bootstrap-based designs is that they are mobile-friendly, which is vital these days. As more and more people browse the Internet on smartphones or tablets, you want to make the website handy for them.

Why Buy a Ready-Made Theme?

These Joomla themes, as you already know, are cost-effective, fast to install, and mobile-ready. Here are other benefits you get when buying a Joomla template from this collection.

Licensed Images, Easy to Replace

Images are usually the heart of the design. If you want to use a theme as is, with the carefully selected images, feel free to do so. You will get all the images and a license, permitting you to use them on your website. If your business needs other photos, though, you can easily remove default images and use your own.

Part of the Biggest Collection Online

All themes are brought to you by TemplateMonster.com, the resource that features the biggest collection of designs and has been in the business for over a decade. So, if twenty-five is not enough – feel free to check out hundreds of others on TemplateMonster’s website.

Expert Help and Support

If you don’t have an in-house webmaster to take care of the theme you buy, you can order installation and customization at TemplateMonster.com. Plus, you will enjoy 24/7 support to help you with your design template.

Now it’s time to look through the themes collection, may be the perfect one for your new website is right there.

1. Glossy Car Models

This big-resolution design puts the emphasis on the sleek lightbox with photos of luxury cars. It’s a great theme for an online car magazine or a car dealer’s website.Glossy Car Models Bootstrap Based Joomla Theme

Details | Demo

2. Comfortable Home

With a pleasant combination of beige shades, orange, and white, this theme looks clean and elegant. An apartment rental business will find it just right for its website.

Comfortable Home Boostrap Based Joomla Theme

Details | Demo

3. Informative Business Site

This professional-looking website features an informative homepage and will make an effective corporate website.

Informative Business Boostrap based Joomla Theme

Details | Demo

4. Stylish Flats

Nothing extra in this clean and stylish design: pretty photographs in the grid look especially good on white. It’s a perfect design for an apartment rental firm.

Stylish Flats boostrap based Joomla Theme

Details | Demo

5. Wild Life

Combining warm beige with green, this big-resolution template matches the wild life theme perfectly. It’s the right choice for a charity foundation that works with wild life.

Wild Life Bootstrap based Joomla Theme

Details | Demo

6. Karting Star

The photos in the big lightbox add some dynamics to this clean design. It’s the perfect theme for the website of a karting club.

Karting Star Bootstrap Based Joomla Theme

Details | Demo

7. Multi-Colored Pasta

The colors in the header menu harmonize with the colors on images and brighten up this clean design. With its pretty fonts, the theme is great for a website on Italian pasta.

Multi Colored Pasta Joomla Theme

Details | Demo

8. Trendy Portfolio

Colorful macro photos on the simple dark background leave a lasting impression – and that is exactly what a photographer’s portfolio needs.

Trendy Portfolio Bootstrap based Joomla Theme

Details | Demo

9. Clean & Dynamic

This reserved and clean design has a bright blue accent in the lightbox that adds color to it. It’s a fresh option for a corporate website.

Clean & Dynamic boostrap based Joomla Theme

Details | Demo

10. Italian Cuisine

The vivid, mouth-watering photos in the lightbox look especially good on the plain black-and-white background. It’s a perfect theme for an Italian restaurant.

Italian Cuisine boostrap based Joomla Theme

Details | Demo

11. Reserved Gray

Done mostly in gray shades, this theme looks reserved and professional – the right fit for the consulting company’s website.

Reserved Gray boostrap based Joomla Theme

Details | Demo

12. Industrial Business

With a metallic gray background, angular elements, and straight lines, this is the right theme for an industrial company.

Industrial Business boostrap based Joomla Theme

Details | Demo

13. Minimalistic Grid

With its simple grid of monochrome photos, this minimalistic theme is perfect for a design studio that creates high-tech interiors.

Minimalist grid boostrap based Joomla Theme

Details | Demo

14. Friendly Corporate

With a nice color scheme and pleasant photos, this corporate design has a friendly feel about it.

Friendly Corporate boostrap based Joomla Theme

Details | Demo

15. Rich Harvest

With colorful images and interesting backgrounds, this warmly colored theme is created specifically for an agricultural business.

Rich Harvest boostrap based Joomla Theme

Details | Demo

16. Contemporary Dance

Combining black with bright colors and dynamic photos, this design conveys the atmosphere of a modern dance studio.

Contemporary Dance Joomla Theme

Details | Demo

17. Simple & Elegant

Using simply-shaped elements and gray shades, this design has an elegant look. It will work well for an architectural bureau.

Simple & Elegant boostrap based Joomla Theme

Details | Demo

18. Trustworthy Business

Multi-layered and rich in information elements, this design will be a good match for a corporate website.

Trustworthy Business boostrap based joomla theme

Details | Demo

19. Orange Business Site

Soft orange is pretty unusual for a corporate website, but in this design it harmonizes perfectly with the sepia-styled photos and images.

Orange Joomla Theme

Details | Demo

20. Modern Gym

This clean design has a modern look, and the photos in the lightbox make it the right choice for a gym’s or fitness club’s website.

Modern Gym Joomla Theme

Details | Demo

21. Clean Architecture

With an original lightbox, this clean big-resolution responsive design looks incredibly stylish. It will work well for an architectural bureau.

Clean Architecture Joomla Theme

Details | Demo

22. Exquisite Restaurant

With the delicious-looking images as a background, this responsive design has nothing extra, and looks exquisite and attractive. It’s a great theme for a top-notch restaurant.

Exquisite Restaurant Joomla Theme

Details | Demo

23. Seafood Restaurant

The cute background and great images in the lightbox make this template the right choice for a seafood restaurant.

Seafood Restaurant Joomla Theme

Details | Demo

24. Paradise Island

With the lovely images as a background, the design speaks for itself. It’s the perfect template for any travel agency.

Paradise Island JoomlaTheme

Details | Demo

25. Electricity

Darkly colored, with several bright accents, this is a professional-looking design for an electricity services company.

Electricity City Boostrap based Joomla Theme

Details | Demo

0

Free for download is this iPhone 5C PSD vector mockup created by Pixeden. This free PSD mockup of the iPhone 5C at a three quarter view comes in the 5C colors which include in green, blue, yellow, pink, and white. This is a colorful and fun vector phone mockup to showcase your app or mobile website designs. Click the heading or image below to direct to the download page.

iPhone 5C PSD Mockup by Pixeden

Free iPhone 5C PSD Mockup by Pixeden

7
2014 Web Design Trends Predictions

One of the main jobs of designers is keeping pace with the current design trends, this includes knowing what’s cool and what’s not. There are many reasons for this, most of which you should already understand, but in short it’s money. If you are able to know what’s hot and current more people will look to you for designs and it increases your ability to get hired (assuming you’re looking for a job) and get noticed by others in the design community.

1. Content First

A trend that has grown large recently, and will continue to grow, is the content first trend. Rather than building a website and throwing the content in later, more and more designers/developers are working around the content. Creating content first for a website and then designing around it should be what every designer/developer does. It makes for less headaches down the road and it looks a lot better and more consistent throughout the website. It’s not always that simple though because clients aren’t almost always late in terms of content for a website.

Websites that focus more on content rather than the visuals usually turn out better (not always though) because they have a more minimal layout and design (which is another big trend prediction for 2014). Below I’ve gathered some examples of websites that focus solely on content.

A List Apart is a great example of a website that is built around content.

A List Apart Website

Another great example is zerosixthree.se, built, created and written by Sebastian Ekström. This site uses minimalism and content to create a beautiful design that makes you want to read everything on the website.

Zero Six Three

2. Hexagon

I predicted this trend for 2013 but it didn’t quite take on as I had originally thought. Anyways, hexagon shapes will begin to replace the traditional square and circle shapes that you are used to seeing. Below are a few examples of what I mean by hexagon design.

Melborp’s website does a great job of illustrating this trend. The hexagons work beautifully with the website and give users something different and new to look at.

Melborp's website

Built by Buffalo is another great example of hexagons in web design, take a look below.

Built by Buffalo website

3. Lightweight

With mobile taking over the internet browsing world, it’s important to make sure your website loads fast. Why? Because cell phones don’t have the high speed internet that you have at home/work. One thing many designers/developers are doing to insure lightweight websites is cutting out all the unnecessary stuff like massive images, logos, “cool” animations, videos, etc.

Focus on things that your website NEEDS not things you think are cool. This lightweight trend goes hand in hand with content first and minimal design, cutting the fat allows you to speed up your website, focus on content, and give it that minimal look.

4. Faster Loading/Fewer HTTP Requests

Faster loading websites goes in hand with lightweight, but I wanted to elaborate a little on other ways websites can load faster. For those of you that are unfamiliar, an HTTP request happens when a user visits your website. The users computer requests styles, scripts, images, web fonts etc. from the server and that in turn loads the website in their browser window for them to view. The more HTTP requests required the longer the website will take to load, for example, if you have 4 different Google web fonts in your header, an HTTP request is sent for each of those fonts.

This will cause a website to load slower because of all the extra work from requests happening behind the scenes. Limiting these requests can help speed up your website. An easy way to cut back on HTTP requests is by creating sprites for images, this way you aren’t loading multiple images individually, instead you’re loading one large image file that includes multiple images on it. Other ways including combining CSS into one file, combining scripts into one file, and limiting the amount of fonts being used on the website.

5. User Experience

The days of flash and crazy animations on web pages are gone. Web designers and developers are focusing more and more on the user rather than trying to get an Awwwards ribbon on their web page (or they should be at least).

The goal of any website is to communicate information easily to the user in a way they can figure out and understand. Websites that are nothing but a ginormous image do nothing but get in the way of what a web page visitor is truly there for. Using an informative paragraph of text or video is a better alternative in my opinion.

CSS3 and HTML5 are helping us out a lot with this. We are now able to provide minimal animations for the user experience without bloating the site to the weight of 2MB+.  That’s why 2014 will be the year of the user, more and more developers and designers will create websites that are simple and easy to use; but also be an enjoyable user experience that doesn’t take minutes to load.

6. Mobile First

We’ve been over it many times, mobile is still going to be in this year and you can be sure its use will continue to grow throughout 2014. Websites will begin to be built with mobile in mind; icons that you are familiar with on mobile devices will start to be used in place of text (the menu icon for instance) on websites.

The user experience of websites will also begin to shift towards that of a mobile device where navigating through it will be similar to how you navigate through a website on your mobile phone.

7. Serif Typeface

This may be a towards the end of 2014 web design trend. The use of Sans Serif typefaces are going to slowly fade away, as regards for regular paragraph type, and plain serif type will start to replace it. I am already beginning to see more blogs (that focus on content) switch to a Serif typefaces. I have an article in the works that will dive more in depth regarding this so stay tuned.

8. Minimal

Are you noticing the similarities between all these trends yet? I’ll give you a hint, they all have to do with minimalism. Defined, Minimalism is the art of stripping down an element to only the necessary essentials it needs in order to function. When done correctly in web design, it leaves the user with a sophisticated impression and ease of use.

Minimalism really took off last year among the big players and that means this will be the year that it will be fully adopted by others. The basic idea behind a minimalist design is to remove the clutter and use only what you need. Apple has been doing a great job of this for years in both product design and interface design. Below is a great example of a minimal website, for more check out our article 19 Minimalist Website Examples

The Kitchen Website

Conclusion

There you have it, the 2014 web design trends. 2014 will be the year of simplicity which will greatly benefit all designers, developers, and even end users.