How To Find Inspiration From Today's Best Web Design Trends, Themes And Styles [Part 1]

How To Find Inspiration From Today's Best Web Design Trends, Themes And Styles [Part 1]



hey guys it's Mike here and in this tutorial I'm going to show you what are the process in creating a web template or layout in Photoshop the first thing to do for me is to look for inspiration here are some example sites that I'm searching for inspiration first one is deviantART the second one is behance and the third one is dribble so in devon art i've join a groups we're showcasing websites like for example this group graphic and web design and let's see for dev web design as you can see when you scroll down into the gallery let's see we'll go back in Jiang Web Design you can see here various type of design which is from the latest one right here while it's loading let's take a look at tribal in interval as you can see this is a VIP section for great artists you need to have an invitation to post your web design or web layout you've created so as you can see right here in the first page you can see personal site redesign or you can search for web site as you can see the one of the latest trends is minimalistic type and has a full width blurry type of background so for my personal point of view is creating his personal site design which showcases her or his skills like icons illustration and user interface and I think the background there is his workspace so it's really minimalistic and yeah it's great so let's take a look at other examples so here so this is a great one to a full-width background on the banner area and this too for B hands let's click this drop down field and go to web design so what I like in B hands is they the graphic presentation is very very cool like for example this one as you can see this is their brand logo and they showcase it in a art direction way so here you can look at some inspiration let's zoom this out or I mean zoom in so these are the places where you can look at great web design so for the web design they have a featured designs like this one so it's an agency type of web site so in this tutorial we will be making a design agency website like some type of this one like showcasing what are the services like what design or the process on making it like from planning or design coding and launch a website so it's a matter of picking up the best elements or the goal of the website like this one this is an agency website that offers web design digital printing and online marketing and also they showcase their portfolio and some clients and their foot hmm so I think this part right here is great for instead of freebies we will be making this a portfolio footer is great too but I think we will stick to four columns footer and then on the slideshow part I kind of like this approach where it's the background is full width and blurry and then we are going to showcase some portfolio templates we've created already for example so yeah so I have this idea on mind now of what we will creating so take note this website this is great for looking for inspiration for latest web design trends or yeah what is the latest in web design or design layout in 2013 so let's close this out the next step is to wireframe a website so let's take a look at some War framing tools that available on web so go to google and then search for war framing tools as you can see or as you know on my previous tutorial on the basic basics of web design I'm using Mockingbird but then let's try to use some other wire war framing tools I think it's yeah Mac flow this is a free so great if create an account if you don't have one and let's login I think I created mine so firm Michael John let's try or maybe burns at first web designer calm and I think it's login so here is a first web designer layout I've created for a warframe come on load now all projects why is it not showing open so click on if you if we've created something let's just click this down arrow icon and open so it's loading now so here is my warframe on what we are going to grade so I will not show you how I do it but I will show you what are the elements I put in so since we are a web design agency that offers services like like creating layouts I've in the header part or this here in this section post the site logo on the top left corner and the navigations in the top right side and then this banner section right here will have a heading and it text and a call-to-action button and I'm planning to showcase design inside a web browser so I think I will create three of this so basically on the header part there will be three designs and in this section is another heading and some text for the process or how we do web design or how we created a layout what I'm thinking is first is plan then the second is to design second is to program and the third is lunch and then above it or below it rather there will be a heading title again for our portfolio section and some images for the clients and here will be our footer section which composed off testimonials or blog and I think this will be lady Stewart's latest tweets tweets and the further section is centered just another links and some social media icons and a copy right so this is very easy to create when you go to Mach flow calm just a quick tour here is the page page one and here are the elements you can just drag and drop this on the layout for example like yeah button and just drag there and you can even resize it so it's very straightforward to use so I will not show you to make that because it's boring so I will show you what I've finished so here is the tutorial or the layout we will be creating as you can see we have the header part based on our mock-up or our warframe and then a catchy heading and a call-to-action button and I also add learn more link and this is the browser which contain a example layout so I basically duplicate it and place it on the back and paste on the warframe I added text here but I think we will we will not need needed that so I just created something that looks like this so plan design develop lunch and for the portfolio part here so this is the portfolio part and this is the clients part so I just created four logos and for the testimonial section I switch it to align left – I think this is not balanced right here so I switch it on the far left side and for the social icons I just created a follow us on Twitter and like us on Facebook so this will be our layout tutorial I'm going to show you step by step on how to create this so yeah that's it the process is to search for inspiration from dribble or Behance and event art levy on art so for me dribble and be hence has the great website inspiration because most of them are professionals and do the latest trends in web design so yeah that's it for the next video I'm going to show you how I created this one step-by-step guide so make sure to watch it and I hope you will learn something step-by-step so I catch you guys on the next one you

Related Posts

26 Replies to “How To Find Inspiration From Today's Best Web Design Trends, Themes And Styles [Part 1]”

  1. Thank you for the video. Interesting for the medium skills designers like me. I hope if you can make a video how to convert from psd design to full html website with steps pls. Can you arrange videos under playlists 🙂 tks

  2. Great video and resource share for web designers at all levels.  Thanks  I use the same sites for inspiration.  I hadn't heard of Mockflow.com.  It looks interesting.

Leave a Reply

Your email address will not be published. Required fields are marked *