What you find here is an interesting blend of trends and unusual layouts that will hopefully inspire you to assess the fundamental structures your applying to web design. Let’s dive in and take a look.
01.Put thoughts on paper first
It look pretty,before designing I thought using photoshop designing a layout,need just to draft a layout structure that free style the problem. Design is about solving problems and those problems can't be resolved through gradients or shadows but through a good layout and a clear hierarchy.
02.Sketch a Frame work
When I'm asked to create a look and feel for a project, the first thing I do is come-up with a top level framework that solves all the design problems. The framework is the UI that surrounds the content and helps to perform actions and navigate through it. It includes the navigation and components like sidebars and bottom bars. If you approach your design from this perspective you will have a clear understanding of what your layout needs will be when designing sections beyond the homepage.
03.Add a grid to PSD
It's as simple as it sounds. Before starting to design anything in Photoshop you need a proper grid to start with. There are no valid excuses for starting without a grid, and yes if you don't, I can assure in one way or another, the design won't look as good.
A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, to be consistent in terms of spacing as well as many other design issues.
04.Choose Your typography or word Font
Exploring different type fonds and colours is part of the discovery phase of a project. I would recommend not using more than two different font word in a website but it really depends on its nature you could use more or less. Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. Don't be afraid of using big fonts and overall be playful and consistent when using typography.
05.Select Theme Color
Throughout the process of choosing a set of typefaces to use you should start exploring what colours you will use in the UI, backgrounds, and text. In terms of colours I recommend using a limited set of colours and tones for the general user interface.
It's important to apply those consistently across the UI depending on the element's functionality. Think about the layout of sites like Facebook, Twitter,or instagram. Besides the UI there shouldn't be any colour restriction for illustrations or graphic details as long as they don't interfere with the functionality of the components.
06.Devide The Layout
Each section in your site needs to tell a story. It needs a reason and a final outcome for the user. The layout needs to help the content highlighting what are the most important pieces in that story. In reality there shouldn't be too many call outs on a page so everything should drive to that final "What can I do here".
Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. At the end you'll be surprise how hard is to keep it simple.
07.Challenge yourself
I encourage every designer out there to challenge themselves on every project. Innovation doesn't always come as a requirement for the project so it's up to us to come up with something interaction or design related. Examples of different challenges could include using a new grid system, creating a new component, or even minor challenges like avoiding blend modes or using a specific colour.
08.Pay Attention to the details
This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that "love" could come in different ways.
It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential and also natural if you really enjoy what you do
09. Treat every component as if it could be presented to a design contest
I have to admit that this piece of advice is not mine. I heard it in the past at fantasy interactive and I was shocked by how clear and true this statement was. Each component needs to be designed as it could stand alone as the best component ever. Sometimes designers leave some parts of a site last on their to-do list and show little respect to them at the end.I have to admit that this piece of advice is not mine
10.Design the best case scenario but prepare for the worst
As designers our job is to solve problems through different constraints. With web design, the constraints range from conceptual and technical issues to content related issues.
We need to build a site that can work not only in the ideal scenario, but also in the worst-case scenario. For instance a user could be using a really small screen and check the site when there is barely any content on it so it looks broken.
However for the purpose of presenting our work I always strongly recommend building the best case scenario for it. Therefore we are going to display the ideal amount of text and we are going to show the site inside the ideal browser size that should be the most common scenario for most users using it.
If you work inside an agency you might have realised how easy it is to find yourself struggling with the design of a new project when the previous one you just finished is being developed. Contrary to general belief, your work on a project doesn't end when the PSD and styles- sheet are delivered.
If you really care about your designs and interaction ideas being well executed, check in on your old best friends the developers from time to time and help them as much as they need to ensure that everything little pixel is perfect.