From Archives: 1WD’s Super Collection of Best Web Design Posts

Posted in 1WD Features, Web Design • Posted on 4 Comments

Nearly three and a half years ago in 2008 an idea was born. An idea based on love and passion about design. Couple of mockups, sleepless nights and cups of coffee and a blog was about to come to light. Little by little with hard work and ambition the blog grew bigger and bigger and attracted more and more designers from all over the world. Yes, that’s the story of 1stwebdesigner. Now being the third largest design blog and attracting over 3 million monthly visitors we can truly be proud of the success we gained.

A couple weeks ago we reached our thousandth post. One thousand, really? Can you imagine a pile of a thousand books, a thousand ideas running through your mind for a thousand nights? We’ve managed to achieve that amount of articles in three years. Ideas come and go, trends and technology change, but there are still some articles that have been, and will, stick around. With this post we’d like to start a new series of articles – 1stwebdesigner’s unique pages. We will gather the very best content from 1stwebdesigner reaching as far as the beginning. The series will cover all the major and popular themes such as web design, tutorials, WordPress, jQuery, freelancing, inspiration and many more. We’ve gone through dozens of pages, reviewed your comments and choices so these series are basically chosen by you, our dear reader.

For the first article of the series we’ve chosen an important topic. The beginning web designer’s guide to a successful career. This blog has helped many designers with insightful articles, useful tips and brilliant tutorials. Thus, we decided to compile the best of the best. This article contains all the basics you need to know about web design and also some basic development stuff since knowing that will just make your work a lot easier. The article is divided into sections so you can start from the very beginning and gradually move up. Good luck with the learning and stay tuned for more articles.

Basics

I will have to sadden you if you thought that you’d open Photoshop and start creating stunning websites from the get go. Before diving into the intricate and advanced aspects of web design you need to learn the fundamentals of it. Starting with history and moving up to some basic tips. If you’re absolutely new to web design this is where you should start. This section contains some of our best beginner and explanatory articles on fundamentals and basics of web design. Study the history, get to know the modern trends and learn from examples.

1. 11 Essential Tips Every Designer Should Be Aware Of

Essential-tips-beginner-intermediate-guide

Almost every profession requires never-ending learning and self educating, but especially it’s important in design field – new software, websites, tools come out every day, it’s your task to keep up, evolve your view and find the best ways to do specific tasks. This article contains some essential things every growing designer and not only should keep in mind.

2. 20 Reasons Why Your Website Design Sucks Part 1

Design-sucks-beginner-intermediate-guide

No matter how good or bad personal style is, the truth is that everyone has one. However, when design conventions are left out of a project, the result will be a bad or uninteresting design. That is exactly what happens with those terrible clients, when they try to implement their personal style without knowing anything about design conventions. This post will cover 10 common beginner pitfalls in web design and how to avoid them.

3. 10 Basic Visual Web Design Mistakes

Visual-mistakes-beginner-intermediate-guide

No doubt, all of you has so many experiences of seeing so many web design when surfing in internet. It often happens that you see more bad web design layout than a good one. This article covers 10 basic visual web design mistakes and tips to avoid them.

4. Ancient Website Design Practices That Beginners Should Avoid Part 1

Ancient-practises-beginner-intermediate-guide

This article is intended for beginners in the field of web design and development. It talks about old design practices that have died off several years ago, but up to now some are still being used. The goal is to discuss why these practices are bad and to instill in the minds of budding designers and developers that doing the right thing even if it’s hard to do and hard to learn will greatly pay off in the future.

5. Ancient Web Design Practices that Beginners Should Avoid Part 2

Ancient-practises-2-beginner-intermediate-guide

Part one mostly talked about the errors designers and developers make, here in part two you will also have the chance to read about the problem with what “webmasters” or website owners do to sully their names. Also be sure to read the comments because, very often, the gems are hidden there.

6. Things Web Designers Do That People Love

People-love-beginner-intermediate-guide

Web designers and web developers often wonder what kind of things they should do so that their audience will love them. This article will talk about those little things that create a big impact on people throughout the internet.

7. Web Design History: From The Beginning

History-beginner-intermediate-guide

The history of the internet is short, but so much has changed within that time. It has radically changed how we live our lives. More importantly, the internet has created thousands of jobs that did not exist a decade ago. These include jobs in SEO marketing, online telemarketing, freelance writing, blogging and of course, in web design. In this article you’ll find out how everything evolved and turned out the way it is now.

8. The Elements of Design in Modern Web Design

Elements-modern-web-beginner-intermediate-guide

The elements of design are pivotal in creating an eye-catching, harmonious design that speaks to your audience and shouldn’t be overlooked. They are the fundamental elements of design which can be called upon when you reach a tough part of the design process. Becoming familiar with these elements means you have the knowledge to make sound decisions in regards putting a design together.

9. Future of Web Design – Facts and Thoughts

Future-beginner-intermediate-guide

Web design has changed tremendously in the last few years and it’s still changing. More than changing, web design is evolving and evolution is bounded with complexity. Although the industry is not in danger some web designers are. Sounds contradictory right? Not really. The truth is that the web design industry is healthy and growing, new jobs are being added, more clients are emerging and consequently more agencies and companies related to the business.

10. 20 Reasons Why Your Website Design Sucks Part 2

Design-sucks-2-beginner-intermediate-guide

Like the previous article, this one’s focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time you won’t see extremely bad layouts that make you laugh, instead you’re going next level and will focus on bigger mistakes that good designers make.

Design tutorials

Photoshop still is designer’s tool of the trade number one. You have given it a try but aren’t quite sure about the results and some commands still confuse you? In this section you’ll find some of our most successful and instructive tutorials that will teach you how to be a solid web designer.

1. 1st Photoshop Web Design Professional Layout Tutorial

Web-layout-beginner-intermediate-guide

This tutorial will guide you through the process of creating a beautiful, clean and professional business type web design.

2. Learn How To Create A Clean Layout In Photoshop [Very Detailed]

Clean-layout-beginner-intermediate-guide

In this Photoshop tutorial you’ll learn how to create a clean looking website layout, you’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let the tutorial guide you through this layout creation process.

3. GD Auto Service: Learn How to Create an Awesome Landing Page in Photoshop

Auto-service-beginner-intermediate-guide

In this tutorial tutorial you are going to create an awesome landing page for GD Auto Service as an example. The template will have a cool logo, search bar, navigation, slider gallery, login panel, blog, services, testimonials and footer.

4. Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop

Burnstudio-beginner-intermediate-guide

Have you ever had a hard time designing your own personal website? Thinking of what elements, shapes, font styles will suit your design? This tutorial wil guide you in creating a stylish personal website. You will be using mostly shapes, layer styles, and fonts to create a new personal website.

5. 9 Etiquettes And Tips of a Photoshop Rockstar Designer

Etiquettes-rockstar-beginner-intermediate-guide

With the abundance of online resources, tutorials, blogs and articles which keep on excavating the trade of photoshoping, anybody with passion and readiness to work hard can become a pro over time. But what does it take to transition from just a pro, to ‘the best’? Why are there some designers who are always the best? Check out this article to find what it takes to be a rockstar designer.

6. 1st Ideas: Create a Stylish Design Agency Website [Very Detailed]

Design-agency-beginner-intermediate-guide

In this tutorial you’re going to be showed how to create a stylish agency website. This tutorial will be quite long, yet don’t be afraid. The techniques and tricks learned will be invaluable. You will be using tools gradients mostly, combination of light and dark colors.

Development tutorials

The title says this is web designer’s guide however as already mentioned in the introduction if you want to be a rockstar web designer you do have to know some basics of this. Knowing how to slice your design into a functional HTML/CSS will just make your work a lot easier. This section is just right for those who already are a bit familiar with the designing process yet are willing to bring their designs to the life. you. Below you’ll find some of our best basic coding tutorials to get you going.

1. How to Create a Minimalist and Typographic Blog Layout From Scratch

Typographic-blog-beginner-intermediate-guide

Typography is probably one the most important and powerful design element ever, so in this you will learn how to create this minimalist theme scratch including XHTML, CSS and WordPress.

2. 9 Inspirational Website Effects Deconstructed

Effects-deconstructed-beginner-intermediate-guide

As you may know, there are lots of great tutorials out there which can definitely help you practice, learn and achieve amazing results. The good thing about having so many tutorials to learn from is precisely that – you have a large variety of sources to choose from. Sometimes though, the tutorials aren’t clear, or difficult to understand or you just can’t apply it in the real world. The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.

3. 17 CSS/HTML Effects with Cross-Browsing Alternatives

Css-html-effects-beginner-intermediate-guide

We surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser. You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right? Thus, the point here is to collect some cool CSS effects that you should be using.

4. How to Create an Awesome Blurry Menu Using CSS

Blurry-menu-beginner-intermediate-guide

Today you will get a perfect and simple blurry menu effect via CSS. In addition to it, you will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. You will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.

5. Convert Burnstudio from PSD to HTML [Very Detailed]

Convert-psd-html-beginner-intermediate-guide

In this article you will learn how to convert Burnstudio Personal Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout.

Inspiration

Inspiration is an inalienable part of every type of art. Web design is not an exception. While working you’ll often find yourself in situations where you’ll want to look how others have resolved this or that problem. Having a lot of inspiration sources will lighten your creative work and help to find your own uniqe style. In this section you’ll find some neat and inspirational articles to keep your creative flame buning. Also be sure to check out our Inspiration section out to find some fantastic things.

1. Web Galleries as a Source of Inspiration for Designers

Web-galleries-beginner-intermediate-guide

There are a number of web galleries that feature inspirational web designs. These web galleries serve a purpose, and that is to update people on new trends and showcase sites that are pushing the boundaries. It is important, as a designer, that you know what the latest trends are and see how other people are pushing the boundaries. In this article, you will find some of the best web galleries that you can reference for inspiration.

2. Inspiring Videos For Designers & Developers

Inspiring-videos-beginner-intermediate-guide

Whether you’re a motion designer, front-end developer or economy student – you have to keep up with the times and constantly increase your knowledge and broaden your professional viewpoint. One of the best ways to do that is by watching videos from professionals and experts in your field. Videos don’t have to be strictly instructive. A good and gripping video can inspire you for the rest of the day. In this article you’ll find a compilation of 40 awesome, inspiring and valuable videos varying from entrepreneurship to web design and self-motivation which will help you to develop new skills, gain a bunch of inspiration and simply look at things from a different perspective.

3. 30 Sources To Get Your Web Design Inspiration

Sources-inspiration-beginner-intermediate-guide

If You are developing web designs, then you know there is times when you struggle without any ideas. That’s the time when these web sites becomes handy. This post contains a nice list with some of the most known web gallery sites showcasing and listing well design sites into different categories, letting you to promote and demote all designs.

4. Great Art Movements That Inspired Modern Web Designers

Art-movements-beginner-intermediate-guide

The first modern designers are, of course, inspired by traditional and classical art. We designers, as a whole, get our ideas of beauty and aesthetics from by viewing paintings, sculptures and artworks from the most powerful art movements in history. Here are among the top art movements in the 20th century that helped shape how we view art and beauty.

5. 33 Excellent “OUT OF THE BOX” Ways for Creatives to find Inspiration

Out-box-inspiration-beginner-intermediate-guide

Feeling uninspired? Running dry on inspiration is normal. We all get there at some point and none of us feel very comfortable being there. Every one gets tensed when having no inspiration. This article shares some great tips to get back to the creative corner. Some tips may seem funny but seriously give them a try and you will love them.

Resources

Resources and assets are on of the most important things in web design. Learning how to use premade resources and enhancing your workflow is a huge part of being a web designer. Sometimes finding these resources may be quite time-consuming but that’s where blogs like this come to aid. In this section you’ll find almost every resource you’ll need when starting off.

1. 45 Online Generators For Designers And Developers To Do The Job Faster!

Online-generators-beginner-intermediate-guide

Online generators can be extremely handy for creating small details or saving time writing code. Whether it’s a striped background, a pattern or an advanced CSS3 text effect, online generators can surely make your workflow go smoother. This post presents 45 of the best and latest online generators for designers and developers. The emphasis has been put on CSS3 generators since CSS3 is quickly becoming the new progressive web standard.

2. 50 Superb & Free PSD Files From Dribbble To Learn From The Best

Dribbble-psd-beginner-intermediate-guide

Either for self-promotion or simply for goodwill and to help others, the truth is that finding free resources and inspiration can be a really easy task. If you are an experienced designer, you know the best way to learn is by just looking and studying other people’s work. PSD files can be a powerful way to learn and fulfill your work expectations. This collection includes some fantastic UI kits, a lot of assets for web and graphic design, as well as a few cool icons. These PSDs are as perfect for learning as they are for your future projects.

3. 30+ Best Websites to Download Free PSD Files

Websites-psd-beginner-intermediate-guide

PSD files are very useful resources for learning purpose because you can see all the layers and also what techniques have been used to create the work. In this article you’ll find almost all possible websites to find free high-quality PSD files.

4. Photoshop WebDesigner Toolbox: All the Resources You’ll Ever Need

Photoshop-toolbox-beginner-intermediate-guide

If you’re using Photoshop daily it’s essential to have an asset library. Having a pre made toolbox or asset library can be extremely handy. While you could spend countless hours making your own resources, usually there’s no need to do that. Nowadays the web is full of pre made high-quality resources. This post contains various resources, sites and tools that can considerably boost your workflow, free up some time on your agenda and simply enhance your projects.

5. Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources

Design-elements-resources-beginner-intermediate-guide

Have you ever thought that every day, while you are busy doing your work, there are a lot of people doing almost the same thing as you? And they are releasing it. For free. And sometimes we just forget all this stuff and lose a lot of time doing things that just didn’t need to be done. Someone else has done it for us. Why should you start from scratch if you can get some cool things and just make them better? So, this is a post with a lot of links to resources and comments about them.

6. 18 Wireframing, Mockup And Prototyping Tools To Plan Designs

Wireframe-tools-beginner-intermediate-guide

Many beginners usually forget how important it is to plan your webdesign, sitemaps, draw flowcharts,wireframes before actually starting to design a functional and beautiful design. If paper and pen ain’t for you check out this article and find some useful tools for wireframing, mockuping and prototyping.

7. 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Html5-css3-frameworks-beginner-intermediate-guide

Everyone of you has heard about HTML5 and CSS3. And you probably are cognizant with the features these two offer. However, you may be asking yourself – Is is time to change? Should I forget everything I know and dive into this new world? Well, actually you don’t have to. There a lot of tools that make that transition to new and better technologies safer and smoother. Frameworks are really helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point. This article will talk a little about frameworks and other tools, like generators and templates.

8. 10 Useful Tools For Cross-Browser Compatibility Check

Compatibility-check-beginner-intermediate-guide

Something that makes a website great  is when it is compatible in multiple browsers regardless of version. Technically this is referred to as cross-browser compatibility. This can be a struggle for developers throughout the creation of their websites. If a user cannot view your website properly, he will not blame the operating system or his browser, he will blame the website itself. In this article you will find ten useful tools that you can use for your cross-browser compatibility check.

Going Further

So you’re now cognizant with all the basic stuff and it’s time to go further. How to redesign a website, what’s UX and how, for instance, your typefaces will effect it? This section will take you into the next level and discuss things like responsive web, redesigning, preparing for a project etc.

1. Beauty vs. Function: On Redesigning

Beauty-function-beginner-intermediate-guide

The thought of producing the best possible design, either from scratch or redesigning something, gives jitters to the heart of many designers. Even professionals in the field can’t quite balance beauty and function. In this article you’ll find things to take into consideration when planning a redesign.

2. A Brief Introduction to Web 3.0

Web-3-beginner-intermediate-guide

For many, Web 2.0 is characterized mainly by the ability of users to share information quickly with others, which has been developed into the phenomenon that we call social media. From Twitter to Facebook to YouTube and to all sorts of other kinds of communities, Web 2.0 is all about sharing and seeing. Now if you recall or were around during what is now known as Web 1.0, information was put up on a website and that was it–the best way of sharing it was privately through e-mails and such. There was little to no communication and if you wanted information, you had to go to the source for it. Can you imagine such a harsh internet? Now with Web 2.0 on it’s way out, the obvious question is, what in the world is Web 3.0 going to be?

3. 15 Most Influential People in Web Design

Influental-people-beginner-intermediate-guide

The web design industry is continuously changing and there are many people who are setting the bar higher every day with their incredible work and contribution to the web design community. Here is a list of just a few of the people who are responsible for changing the meaning of web design with their awesome work and concepts.

4. Preparing For a Web Design Project

Preparing-project-beginner-intermediate-guide

There are several stages during the process of a web design project, and every stage is important to achieve a positive end result. In order to proceed to the research phase, you need to gather information and know what the project is about, which technology is required, the target audience, goals, content, etc. Every professional designer or developer work in different ways, however, this article’s goal is to give you good insights about how you can prepare and deal with some practical aspects of a web design project.

5. 4 Reasons Why Designers and Developers Should Learn to Write

Learn-write-beginner-intermediate-guide

If you are using the internet to gather and share information you really must learn this secret. What is the secret, you ask? The secret is that everyone should learn how to write in order to advance well. The days of people who focus only on one skill is numbered. Slowly, and steadily, a rise of designers, photographers, developers, and anyone who knows what a blog is are starting to write. This will be harsh for people whose desire is to focus only on their trade. People in the online community will soon eradicate specialists, the internet will be filled with Jack-of-all-trades and if you are not one you won’t get noticed. Learn why it’s good to master writing skills and how to do that.

6. Redesign Process: Taking Small Steps for a Better Website

Redesign-process-beginner-intermediate-guide

This is an experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.

7. A 5-Step Checklist for Mobile Website Designs

Mobile-checklist-beginner-intermediate-guide

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. This article will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website.

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

4 Comments
  • Manuel Garcia

    Saturday, April 21st, 2012 09:14

    1

    No doubt why this blog is one of the leading design blogs in the world.

    0
    • Dainis Graveris

      Saturday, April 21st, 2012 16:32

      3

      Thank you for kind words, Manuel!!

      0
  • Kendol J Mason

    Saturday, April 21st, 2012 11:40

    2

    This is a really good one stop shop for getting web design resources in all of it’s caliber.
    From preparing for the web design project it’s self to developing a method of effective production. Daniels Mekšs Great Job!

    0
  • Umer

    Sunday, July 1st, 2012 17:18

    4

    Great Collection I Like it

    0
  • Umer

    Sunday, July 1st, 2012 17:18

    4

    Great Collection I Like it

    0
  • Kendol J Mason

    Saturday, April 21st, 2012 11:40

    2

    This is a really good one stop shop for getting web design resources in all of it’s caliber.
    From preparing for the web design project it’s self to developing a method of effective production. Daniels Mekšs Great Job!

    0
  • Manuel Garcia

    Saturday, April 21st, 2012 09:14

    1

    No doubt why this blog is one of the leading design blogs in the world.

    0
    • Dainis Graveris

      Saturday, April 21st, 2012 16:32

      3

      Thank you for kind words, Manuel!!

      0

Comments are closed.

54.204.90.135 - unknown - unknown - US