Thursday, August 28, 2014

1stwebdesigner

1stwebdesigner


Get the Best Out of Your Best: 25 Finest Premium WordPress Themes

Posted: 28 Aug 2014 07:00 AM PDT

The saying 'You get what you pay for' applies perfectly for the finest premium WordPress themes. These themes are packed with plenty of features that help you in creating all sorts of websites on WordPress. There are thousands of great themes out there but finding the one that will match perfectly with your need seems like a challenge.

So in this post, we are sharing some fresh and beautiful premium WordPress themes that will help you in finding the best one. These premium themes are best to work with in 2014 because of their features include a shortcode generator, responsive design, and custom widgets, etc.

You will find all kinds of themes ranging from portfolio, magazine, personal blog, music, video, and business themes in this shared list. The good thing about premium themes is that it's always responsive so it can easily adjust with every screen resolution.

Responsive website design is very essential for the success of brand which is looking to start its business. Premium themes are also SEO-ready so you don't need to worry about getting your site visible on search engines. But the only thing required is to choose a premium WordPress theme that has such features. So take a look on the list below and choose your favorite one!

1. Zen

Zen

2. ImgBlog

ImgBlog

3. NewsCore

NewsCore

4. Ados

Ados

5. Flipbox

Flipbox

6. Trendy Travel

Trendy Travel

7. Flatize

Flatize

8. Sportify

Sportify

9. Pearl

Pearl

10. Ernesto

Ernesto

11. AMY Theme

AMY Theme

12. Frover

Frover

13. Margot

Margot

14. Quantum

Quantum

15. Cadillac

Cadillac

16. Wunderkind

Wunderkind

17. Akast

Akast

18. Jollyany

Jollyany

19. This One

This One

20. DOIT

DOIT

21. Nerva

Nerva

22. Himeros

Himeros

23. Kitai

Kitai

24. The Agency v2

The Agency v2

25. Spaces

Spaces

All the premium themes featured above can be easily used without any geek skills. Every one of these themes has highest quality that will suit your website. If you want, you can also make adjustments to the theme accordingly.

So I hope you have founded what you were looking for. If you like to share something with us, just leave a comment below.

The Basal Guide: How to Create a WordPress Child Theme

Posted: 28 Aug 2014 06:00 AM PDT

Creating a WordPress child theme is important. It gives the user access to the theme without the threat of breaking it when updating. Unfortunately, child themes can be confusing if you don’t have much experience with WordPress customization.

As WordPress users customize their themes more, there might be some instances when users lose all of their theme’s layout or functionalities after updating the theme.

This gives some headache to WordPress users as they might need to debug their themes, or worst, recreate or install them all over again.

In this article, you will learn something about creating a child theme in WordPress.

Understanding a Child Theme

A child theme is a theme that inherits the functionality of another theme also known as the parent theme. It allows users to make changes or add functionalities to the parent theme by separating a set of files to modify it without breaking the original theme.

Not only does this make the modification easier, it is also the safest way to update a theme. As a matter of fact it can also be turned off and fall back on the original.

Why You Need a Child Theme

Using a child can be helpful to WordPress users and developers. Here are some reasons:

  • Update the theme without any harm
  • It can make your site more secured as it won’t break any security driven codes
  • Speed up the development time
  • A great start for WordPress aspiring theme developers

A simple guide in creating a WordPress child theme

In this part, you are going to learn how to create a basic child theme. For the sake of this article,let's use the built in NeoBlog WP theme from the previous tutorial as the parent theme. Go ahead and download it.

STEP 1 – Create a new folder for the child theme

To start off, create a new folder on the theme directory (wp-content/themes) and name it with the word “-child” added to it.

So for this example, you’ll be calling our folder “NeoBlog-child“.

neoblog-child

STEP 2 – Create the stylesheet

A stylesheet is the only required file to make a child theme. So let’s create the style.css inside the “NeoBlog-child” folder.

stylecss

Next, the style.css must also contain the following information.

  /*  Theme Name: NeoBlog Child Theme  Theme URI: http://www.1stwebdesigner.com/  Description: NeoBlog Child Theme  Author: Sam Norton  Author URI: http://www.1stwebdesigner.com/  Template: NeoBlog  Version: 1.0.0  */  <p>@import url("../NeoBlog/style.css");    /* =You can start customizing your theme here  -------------------------------------------------------------- */  

Note: You can change any information above but take note that you need to keep the theme name and the template codes.

STEP 3 – Activating the Child Theme

Now to activate the child theme, navigate the WordPress admin panel and go to Appearance-> Themes. Next, click the “Activate” button and you can see your child theme active.

Great! The child theme is now active! From there you can start adding your styles below the @import tag, overwriting the current style from the parent theme.

activate

Some Things to Remember When Using a Child Theme

Now that we know how a child theme works, it is important to consider some pointers when using a child theme. Here as follows:

  • If you want to add new functions or add hooks on your theme using functions.php, you need to create your new functions.php file on the Child theme folder. Please note that the child theme functions do not override the parent theme's functions.php.
  • The fact that a child theme's functions.php is loaded first means that you can make the user functions of your theme pluggable — that is, replaceable by a child theme— by declaring them conditionally. See WordPress Codex.
  • When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). See WordPress Codex.
  • To support RTL languages, add rtl.css file to your child theme using the @import tag.
  • WordPress templates are modified by replacing the file with a copy of it inside the child theme's folder. The theme's original file is then ignored and the new one is used instead.

Start Using a Child Theme

WordPress is a great platform to build dynamic sites. With a lot of users trying to make their site looks good by customizing the stylesheet, the child theme is the best way to go.

If you are not comfortable doing all these stuffs you might want to try the One Click Child Theme Plugin which will create a child theme for you with the click of a button.

If you have any questions or ideas about the topic, or would like further explanation, please feel free to drop a line in the comments section.

How to Create SVG Loading Animations using Adobe Illustrator and Adobe Edge Animate CC

Posted: 28 Aug 2014 05:00 AM PDT

Keeping your viewers glued to your webpage while it loads is like trying to stop a time bomb, except that it doesn't blow people into tiny bits. Some web designers give special attention by providing users with some entertainment while the all the information they want to see are still waiting to be fully loaded like this tutorial on how to create SVG loading animations using Illustrator and Adobe Edge Animate CC.

fill

There are a lot of loading animations out there. Sure, you can copy and paste these animations to your designs every now and then, right? Yeah, making use of templates are easier and more convenient. But there are times you need to do your own for learning's sake.

This tutorial won't require coding, so for those designers who don't want to get their hands dirty with codes, here's a great tool for you.

Why you should  choose SVG as a file format for all the images:

  • They are resolution independent.
  • Can be used together with CSS.
  • They are lighter than JPEG.
  • They can be easily edited.

Now, I would not keep you waiting, here's the tutorial!

Bonus:

Aside from loading animations, you can also create the following using Illustrator and Edge Animate:

  • Interactive Graphics
  • Header Animations
  • Google-like Doodles

Conclusion

Learning SVG animation can be difficult for some, but with the use of tools like Illustrator and Edge Animate, it can be easier and faster. The only thing you need is to be patient and creative.

I hope you learned something today! There are more of these tutorials to come so keep your tabs open for 1stwebdesigner! Good luck!

Do you have questions about the process we just followed? Feel free to ask us at the comments section below.

 

10 TED Talks Every Web Designer and Developer Should Watch

Posted: 28 Aug 2014 04:00 AM PDT

What is are TED talks? Why is it so popular nowadays?

Ted Talk is a nonprofit discussion event devoted to spreading ideas which can be in the form of a short, powerful and convincing talks usually runs from  18 minutes or less.

TED began in 1984 as a conference where (T)echnology, (E)ntertainment and (D)esign converged. But nowadays, it covers a variety of topics, from business to global issues and hot topics across the globe.

Some are independently running TEDx events that help share ideas in communities in every part of the world.

TEDx-logo

1. My Philosophy for a Happy Life: Sam Berns at TEDxMidAtlantic

The video was about Sam, who was diagnosed with Progeria, a rare, rapid aging disease, at the age of 2. He was able to experience a lot of obstacles in his life, which helped him create a philosophy of a happy life.

He said there are 3 aspects in his philosophy :

  • Be OK with what you ultimately can't do because there is so much you can do.
  • Surround yourself with people you want to be around with.
  • Keep moving forward.

He believes that he can change the world and he will keep on striving to change it. His determination in surviving life’s difficulties despite of his impairment is truly amazing. It gives hope that everything is possible if one lives with it. The power to accept what one is leads to the fulfillment of one's dreams.

2. John Maeda: How Art, Technology and Design Inform Creative Leaders

John Maeda delivers a funny and charming talk that involves his lifetime of work in art, design and technology mixed it with a picture of creative leadership in the future. It talks about the relationship of form and content and vice versa. Changing the form and changing the content affects any message.

He said:

  • Leaders are faced with how to lead differently.
  • A traditional leader is always wanting to be right, whereas a creative leader hopes to be right.
  • A regular leader loves to avoid mistakes.
  • Someone who's creative actually loves to learn from mistakes.
  • In this complex, ambiguous space, and artists and designers have a lot to teach us.

3. How to Find Your Passion and Inner Awesomeness: Eugene Hennie at TEDxMMU

Eugene Hennie realized that his job was not giving him total happiness and adventure that he expected from life. He went on a soul-searching trip in South America before ending up working as a product launch strategist at Mindvalley in Kuala Lumpur. He now runs Anti Wantrepreneur, an online platform and podcast for aspiring entrepreneurs.

He points out these 10 things:

  1. Know yourself – Who are you? What do you like?
  2. Embrace yourself – Once you embrace who you are, everything in life becomes easier.
  3. Surround yourself with encouraging people – The company that you keep helps to dictate where you go in life. Surround yourself with cool, inspiring, and motivated individuals.
  4. Know what you want – Don't feel ashamed to express what your wants and needs are in life.
  5. Work your s** off – Work hard, lose sleep, and put in the time to achieve your dreams.
  6. Make the impossible the new possible – Don't ask yourself how can you do something; ask yourself, how can you not do something.
  7. Fail hard and fail often – If you fail a lot, the successes will be greater.
  8. Beat on your craft – Develop a crazy work ethic and perfect your craft.
  9. Learn to embrace confrontation – You must take risks for great things to happen.
  10. Do what is right – When you do the right things, good things happen to you.

He delivers his talk in a satirical way. Considering all of what he has said, this is an excellent foundation for inspiration for changing the way an individual think in relation to the things an individual really wants to do in  life. It simply helps the individual to be open-minded to the reality of embracing what an one wants to do and not by what the society is telling him to do. Breaking the conventional is what the talk is all about.

4. Overcoming Hopelessness: Nick Vujicic at TEDxNoviSad

Nick talks about the importance of parenting in early childhood and it’s vital role in overcoming hopelessness. Willpower is a driving force for making big dreams come true, but, if there is no chance of having  a miracle in life, anyone can always be a miracle to someone else.

He pointed out that what other people say about a person doesn’t matter, that the world needs hope and love. With these important characteristics, life will exist with contentment. His idea is very touching and moving that he can dream big. There are no walls. If someone finds inner peace, then those walls will become doors for hope.

5. Thomas Suarez: A 12-year-old App Developer

Most 12-year-olds love playing video games — Thomas Suarez taught himself how to create them. After developing iPhone apps like "Bustin Jeiber," a whack-a-mole game, he is now using his skills to help other kids become developers.

This talk is a great example of innovation. As young as he is, he was able to conquer the possibilities and capabilities of an adult. He is just so inquisitive and smart to invent something that is very valuable.

He inspires a person to think like him. If someone has the right resources, the possibilities and exploration of resources, an individual can create something brand new.

6. How to Know Your Life Purpose in 5 Minutes: Adam Leipzig at TEDxMalibu

Adam Leipzig talks about life purpose. He tackles the necessity of doing what a person really loves to do. He formulated a set of questions to answer one’s life purpose. Change and transformation is necessary. Answering these questions can greatly help in find someone's purpose in life.

  • What do I  love to do?
  • What do I feel supremely qualified to teach others?
  • Who do I do it for?
  • What do they want or need?
  • How do they change or transform as the result of what I give them?

He says that the most successful people in any field always focus most on the people they serve than how they are served by other people.  Adam Leipzig explains that knowing 5 things with conviction can open up your eyes to a greater life purpose.

7. The Skill of Self – Confidence: Dr. Ivan Joseph at TEDxRyersonU

As the Athletic Director and Head Coach of the Varsity Soccer team at Ryerson University, Dr. Joseph is often asked what skills he is searching for as a recruiter: Is it speed? Strength? Agility?

In this talk, he explores self confidence and how it is not just the most important skill in athletics, but also in people’s lives.

He points out, that without self-confidence, someone can be useless. Having a skill is really important.

Self-confidence can be trained by:

1. Repetition, repetition, repetition. Practice! – The problem with repetition is that anyone bails out after a few tries. Don't accept failure; repetition and persistence are key.

2. Self-talk. He says that everyone has negative self-talk in their heads. There are enough people saying "We can't do it; we are not good enough." He explains more that thoughts influence an individual's actions.

The more an individual focuses on the negative, the more that individual starts to believe in it. Everyone needs self-affirmation. It is more likely a good choice to avoid people who tear somebody down. A solid self-affirmations is very important.

Some valuable insights were:

  • Writing a letter to oneself of the things to be proud of and read it daily for reaffirmation.
  • Stop the negative self-talk.
  • Build confidence in others by praising the positive behavior someone wants to reinforce.
  • Self-confident people interpret negative feedback the way they want to.

Lastly, No one will believe in someone unless somebody do.

8. Amy Cuddy: Your Body Language Shapes Who You Are

In this talk, Amy Cuddy tackles the idea that the body language affects how others see us, but it may also change how we see ourselves. Social psychologist Amy Cuddy shows how “power posing”, standing in a confident posture even if we don’t feel confident, can affect testosterone and cortisol levels. It might even have an impact on our chances for success.

She expounds that the body language is a crucial consideration that proper posture and body language can affect an individual performance.

Her talk helps an individual understand about the power of nonverbal language. What someone projects may be very important. It turns out that the body language may also change how people see themselves.

9. Kelly McGonigal: How to Make Stress Your Friend

Stress makes an individual sick. It makes the heart beat fast, affects the breathing and gives someone a sweat in the forehead. Psychologist Kelly McGonigal urges us to see stress as positive thing. In this Ted talk, she gives us a way to reduce stress- and that is reaching out to others.

She shows that the people who are under more stress but don't believe about its "negative" effects are healthier and more likely to live long happy lives.

Here are some ideas on stress:

  • People think that stress could kill them. People who have stress are said to have a higher death rate probability than those who don’t think stress can kill them. It’s the negative thought about stress that kills, not stress itself.
  • Oxitocin: also known as Anti – stress hormone. It is activated in times of stress when someone hugs a loved one or participate in any social activities.
  • Stress should not be the enemy, as many health specialists think. It causes the heart pump at a fast rate and blood tension to arise. Instead of thinking negatively about this, take the challenge of controlling it.

10. Simon Sinek: How Great Leaders Inspire Action

He describes how it is that great leaders inspire action, why some people are able to achieve things, when others are not.

He also talks about the brilliant, biologically-based "Golden Circle", a new way of looking at how people approach what they do.  He also discusses the Law of Diffusion of Innovation, and weaves it all together with several brilliantly told examples, from Apple computer, the Wright Brothers, to Martin Luther King, Jr., some realizations why people fail.

According to him, there are 3 factors:

  1. Under-capitalization
  2. The wrong people
  3. Unfavorable market conditions

Closing Ceremony

TedTalks are so versatile and uplifting. They touch every human life. They inspire, change and transform individuals by its driving force of content and knowledge.

Ideas are really worth disseminating.

These are just some of my favorites that inspired me so much. How about you? What is your Tedtalk favorite?

Website Cosmetology: What Makes a Good Design a Good Design?

Posted: 28 Aug 2014 03:00 AM PDT

What is a good design? And what makes a good design, really?

Many of us have a lot to say when it comes to designing. People would say a good design is something that is useful and for others, it should be functional.

The answers are actually infinite.

There are certain ideas and principles in creating a good design. Web developers and web designers need to think deeper into their projects to get the best results.

question

How about this?

What constitutes a good design?

The total package of a good design portrays a vital role. The first thing you should have in mind is: the message should be CLEAR. There is only one goal: the design should emphasize the message.

"You can design and create, and build the most wonderful place in the world.  But it takes people to make the dream a  reality." — Walt Disney

A good design gives information and communicates an appropriate idea. Having a poor design dematerialize the communication by breaking the correct information.

There are principles of design that become handy to format the elements of design such as color, shape, texture, among others.

To sum up, these ideas must be taken into consideration:

  • Clearly conveys ideas and information
  • Emphasizes the message
  • Follows the basic principles of design

Principles of a Good Design

With the right combination of design principles and aesthetic, there is no reason that your design will be a rubbish! It is important to know these principles.

arrow

Image from Flickr

Direction

In creating something it is necessary to have  a sense of direction. Direction tells you to move and aim for something and which gives the process fluidity.When all necessary things are in one direction, there is arrangement and focus that help the viewer see the emphasis of your designs.

Space

As important as emphasis, many designers overlook space. Without space, your design more likely would fail. It is considered one of the important elements of design. It is also sometimes called the "white space".

weighing-scale

Image from Flickr

Balance

Balance is how every elements of a design neutralize each other. With balance, design elements are organized in a manner to create the whole idea in its equilibrium.

Proportion

A good proportion maintains the cohesive connection of parts in relation to its entire body. It’s how each  element works with other elements. It is the connectivity.

Minimalism

You can relate this to the minimalist point of view. Designers nowadays are now embracing the flat design because it looks clear and simple that allows them to focus on the content and the message.

Contrast

By using contrast you can generate variety. Combining all the artistic elements of web design brings  appealing and great output. Balance and proportion projects coherence. On the other hand, contrast gives interest.

Emphasis

Giving an emphasis to your design gives a sense of clarity. When design elements are arranged in levels to create hierarchy of visual importance, this is emphasis.

Colors

palette

Image from  Flickr

A perfect choice of color palette can enhance any user experience. Having a suitable color combination helps in creating balance and harmony. Colors projects a certain mood and emotion and should be used minimally.

Loading Time

Of course, almost everyone really doesn't like a website that loads too long. It eats up their time. Effective optimization processes such as image sizing should be taken into consideration. Combining codes into a central CSS file can reduce HTTP requests.

Understanding these principles make one designer an effective and productive one.

According to Dieter Rams’ "10 Principles of "Good Design", a good design is:

  • Innovative
  • Makes a product useful
  • Aesthetic
  • Product understandable
  • Unobtrusive
  • Serve as functional tools
  • Honest
  • Long-lasting
  • Thorough down to the last detail
  • Environmentally-friendly
  • Should have less design as possible

first-aid-kit

Image from Flickr

Here are some helpful sites and tips to develop your skills in web design.

A good design is not always based on how it looks. You should also have to see its ability to perform, to astonish, and to serve its purpose.

Typography

typography

Image from Flickr

Typography, according to About.com, is the design and use of typefaces as means of communication.Typography uses typefaces and the white space around and through them to create a whole design.

Typography encompasses everything from calligraphy through digital type and type on web pages. There is richness in design for web designers who use letters as part of their designs.

Bad typography in your website can affects viewing span. It distracts readers, making them turn away and become uninterested.

Viewers usually take most of their time in a certain website because of its quality and effectiveness to deliver messages and ideas. So it is important to consider some symptoms of a  poor web design output.

Symptoms of a Bad Web Design

no-signal

Image from Flickr

Sometimes web designers do not know that some little details can affect their design aesthetic in relation to creating a website.

According to Nielsen Norman Group, some elements are unconsciously disregarded by web designers.

More Insights!

bulb

Image from Flickr

1. Poor Contrast

New visitors usually come to visit websites with fresh eyes. They don’t know where they eyes lead to. Having good contrast leads the viewers to their specific needs the time they enter a specific websites.

2. Navigational Failure

compass

Image from Flickr

Navigation must be simple and consistent for everyone.

Common mistakes usually include:

  • Different types of navigation on the same site
  • Poorly worded links which makes visitors become lost if they click on anything on the page.
  • No links back to the homepage
  • Confusing links to the home page

3. Lacks Valuable Content

One serious problem about website design is the inability to deliver direct and interesting information. An updated content is very necessary. Try to think about this question always before you start something: Does your content solve your customers’ problems or does it create problems?

4. Don't Use Graphics as Text

Don’t use graphics or Flash for text. No more, no less.

Reasons why:

  • It increases the page size.
  • It is not search engine-friendly.
  • The graphics are often of poor quality.
  • The mistakes are hard to correct.

5. Don’t Use Small Text

letters

Image from Flickr

Designers usually are fond of playing with their designs using small text. Older people often have trouble looking at websites with small fonts. If viewers can’t see it, they will flee it.

What viewers WANT for a website?

looking-forward

Image from Flickr

People basically visit a website to satisfy their need and want. Considering these might be helpful.

  • They want/need helpful information.
  • They want/need to buy something.
  • They want/need to make a valuable donation.
  • They want/need to be entertained.
  • They want/need to be part of a social community.

painter

Image from Flickr

To Conclude

Generally, web designers create visual solutions to communications problems. They have interpretative and conceptual skills to share information. They use different styles and ways to achieve results based on  color, typography, illustration, photography, animation, layout, and media.

As web designers, you should know how to use the principles of design to communicate a message and present data. What is your design principle?

No comments:

Post a Comment