3 Flat Design Video Tutorials to Change Your Design Style

Posted in Quick Tips, Tutorials, Web Interface4 weeks ago • Written by 3 Comments

We truly live in a flat world! With iOS7, Android and even Windows Metro now adapting the flat design layout trend, the world has become a flatter place, indeed. Flat design video tutorials are a great help in the transition.

Website designs have followed the same pattern, transforming their sites to become easy-to-browse, colorful, responsive and simple. How is this made possible?

  • The use of larger and wider spacing
  • The use of simpler logos
  • The use of slightly desaturated colors
  • The use of thinner fonts

For starting and freelance web designers, it might be very difficult at first to learn the philosophy of flat design. Of course, you are born during the Skeumorphic Design Era, where all should be seemingly real and predominantly having 3D designs.

3 Flat Design Video Tutorials to Change Your Design Style Read More

How to Create Smooth CSS3 Animation Styles and Effects with Ease

Posted in Coding, HowTos, Tutorials, Tutorials, Web Interface1 month ago • Written by 12 Comments

With the newest capability of CSS3, transition from one style to another without using JavaScript or Flash becomes possible. It allows elements to change values over a specified duration, animating the property changes instead of having them static and leaving them dead. CSS3 animation styles and effects give your more freedom to create the design you want.

Today, I’m going to introduce to you different transitions and effects that can be done using only CSS3. So get ready and let’s rock!

How to Create Smooth CSS3 Animation Styles and Effects with Ease Read More

How to Create a CSS3 Pop-Out Menu Without Learning Programming

Posted in Coding, Coding, Tutorials, Tutorials, Web Interface1 month ago • Written by 8 Comments

Modern websites offer a more complex hierarchy of navigation. This navigation sometimes makes user-experience on the website’s menu a bit confusing. Using a CSS3 pop-out menu makes it easier to find your way to what you want on the site quickly. Thanks to CSS3, animation is now possible.

Using CSS3, you can simply hide and unhide an element under other elements. This will not only simplify your code but also makes it  easily updated. This means you can now perform some sliding animation even without the knowledge of programming.

How to Create a CSS3 Pop-Out Menu Without Learning Programming Read More

How to Use UI Kits – Plus Free UI Kits to Choose From!

Posted in HowTos, Quick Tips, Tutorials, Web Interface, WordPress3 months ago • Written by 2 Comments

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

How to Use UI Kits – Plus Free UI Kits to Choose From! Read More

Get ‘Layed’: What You Need to Know about Photoshop Layers

Posted in Photo Effects, Quick Tips, Text Effects, Tutorials, Web Interface3 months ago • Written by Leave a comment

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

Get ‘Layed’: What You Need to Know about Photoshop Layers Read More

70 Best Web Design Tutorials of 2013

Posted in Coding, Quick Tips, Tutorials, Web Interface3 months ago • Written by 28 Comments

2013 has ended with a great blast and I’m pretty sure that everyone has done their countdowns and throwback blog posts, tweets and even status updates. It’s a pretty cool thing to do because you get to remember all the awesome things 2013 has given you. You look back at how bad you were design-wise last year and how well you’ve improved. With this, you get to assess yourself how much more you could exert and, in turn, how much more money you could earn. Retrospection also tells you what more could you learn. Seeing what you’re weak at will also allow you to see where you could trained. That is why self-correction and openness to new things is a great habit for a designer.

70 Best Web Design Tutorials of 2013 Read More

How to Create Flat Icons in Photoshop

Posted in Icons, Tutorials, Web Interface4 months ago • Written by 13 Comments

Okay, let’s face it. Flat design is the new ‘thing’ for web interface. With iOS and even Windows now adapting this design scheme, it will not be any longer when almost (if not all) all websites in the World Wide Web adapt this design scheme. You would just be baffled to know one morning that as you woke up, opened your browser and typed in your favorite website (we hope it is 1stwebdesigner, just kidding!) and be surprised to see that it followed with the trend of flat design! So you would immediately re-code your website or blog, for that matter, to be ‘in’ with the trend, and that would entail a lot of grueling hours again.

So why not start today? Why not start your web motif revamp today? Try to be there before it happens. Try to be cool before being cool is cool. Be a hipster!

You may be thinking, “Where will I start?” Of course, revamping your website design is hellish as hell is. But that’s why we are here – so that you’ll have a helping hand in going with the flow of design. Right?

How to Create Flat Icons in Photoshop Read More

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch

Posted in Coding, Tutorials, Web Interface6 months ago • Written by 29 Comments

Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning. If you’ve missed it, check Basic Web Design Video Course.

In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wireframe into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!

Get ready and let’s get started!

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch Read More

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

Posted in Tutorials, Web Interface9 months ago • Written by 35 Comments

Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content. It’s also very flexible, which is really ideal for responsive web design. If you, like me, love flat design, make sure to check out 40+ Flat Web Design Inspiration. I’m pretty sure you will get goosebumps after seeing several flat designs.

Feeling inspired seeing those designs? Good! Today I will teach you how to design a portfolio landing page- an almost an hour long free video tutorial!

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download] Read More

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

Posted in Quick Tips, Tutorials, Web Interface10 months ago • Written by 13 Comments

In this tutorial I am going to show you how to create a simple countdown timer, iOS 7 inspired!

Flat design is dominating the web and I’m sure you all know that Apple created a new look and feel for their OS. I’m really happy seeing the minimal look of the user interface and I know Apple fans are eagerly waiting to test iOS7 this fall. So, while we’re waiting I’m going to show you some great wallpapers and we’ll create a countdown timer in Photoshop. The look and the colour scheme will be based on the iOS 7 wallpapers that have been released. This tutorial will be very quick and beginners will find this Photoshop tutorial helpful in understanding the power of Free Transform.

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired Read More
54.198.20.215 - unknown - unknown - US