All Posts By



Getting started with SVG for Web Design: Introduction

hello and Gary Simon and welcome to this course on SVG for web design so SVG stands for scalable vector graphics and it’s becoming increasingly popular among web designers and for good reason

because modern browsers support SVG it’s a no-brainer to use SVG where possible because it doesn’t contain the pixel based limitation of pngs or JPEGs so svgs are also exciting because they offer interactivity and they can be controlled both from JavaScript and CSS so here’s a quick look at the

projects will be covering in this course so we’ll come back to this in a second so the first one we’re going to cover this right here this I basically kind of like a loading animation and this is all in SVG and it’s also responsive all right so this is entirely all controlled within an SVG graphic and it’s in

an HTML file and if you want to check it take a look at that source it’s very simple as you can see and all the information is here in the actual SVG file that will be working with all right and the second project this one’s pretty exciting because these are icons so traditionally we’ve used pngs in the past four icons and I what’s really cool about these is we can add hover effects and we can also add clicks and make

custom animation with CSS animations and keyframes based on hovering and even clicking now what’s also really cool about these icons let’s say for example you’ve had these bigger icons and you have a lot of details so say for example if you were to take these icons and scale them down and a viewport save for example where they’re only like 16 by 16 well these type of details might get in the way and make it look a little bit cluttered so what you can do is actually make these details go away based on the viewport width so essentially

they’re responsive SVG icons so here’s what that looks like so if we scale it in there a certain point they will vanish right there so as you can see if we switch back and forth they’re here and now they’re not and of course you can set it up with a lot more different media queries and control them even more so than this and what’s also cool is everything still works well in terms of the hover and the custom animations and then finally for our final project will actually work with a layout and we’ll design this

in Photoshop and let me refresh this does to show you what this looks like so this is SVG line animation that will do will come down here and we’ll work with this SVG graphic and as you can see as we scrolled down the animation played until it was into the viewport view and we’ll use adobe edge animate which is software that can allow you to really easily control animation much like adobe flash or after effects and then we’ll come down here and we’ll do another button and you can see we’re experimenting a little bit differently with CSS animations you click this we can also change it and change it back alright i hope you enjoy the course and learn a lot so in the next lesson we’ll start with the first project creating an animated loading SVG graphic so i’ll see you then


Speed Design in Sketch 3 – Web Design Reviews Website

okay and just I’ll hang out some wireframes here just getting a general idea of the layout and now I’m making the style tile which will have all the typography all the input forms what essentially

the elements of the website will look like I’m making the input forms and the submit button wait some placeholders defining all the textiles so I can use them easily later now I’m setting up the header this real quick and dirty now I’m kind of roughing out the margins and in their hero section and the top three benefits of getting a free website review some lorem ipsum actually hipster and hip some kind of adding more hip some

it’s hip some co2 get your free good hipster episode now I’m doing the footer try to look for a good stock image to use but I really couldn’t find anything that pertains to free website reviews so now I am just kind of adding some more stuff figuring out my colors red always works because it’s nice and strong and vibrant and it’s a good for call to actions which I have at the top and bought up at

the website looking for subtle patterns and all that going through random stuff having a Twitter SVG icon and check to sign up to my newsletter it’s now I’m cutting up the front end of the site which is what I do I do find development and sign so it’s doing some basic HTML now this is the easiest part of development just you’re literally just coding what you see and then coding it up the CSS

I actually use sass and in that compiles in code kit and gives me the final CSS file I love using sauce because it literally lightning fast it’s better at my workflow so much and then I love using colors as variables so the red will be a certain shade of red that I use and then I can change the certain shade of red and it’ll be changed throughout the website to school so yeah it’s coating it up adding up some placeholder videos that’s actually a video I did for a client last year and cutting up the

Twitter making responsive and done in here is a kind of real-time scroll through up the website it’s not live yet it’s still on cook it on my machine so yeah it’s responsive and I actually still need to code the drop down for when you click the hamburger icon besides everything works and all I need to do now is up fix the responsive menu and upload to the server and that’s it oh and center the footer links on a responsive screen on the mobile width and yeah besides that there’s not much more yeah the Twitter link goes I go to click to tweet calm and it sets up a link for you which is kind of cool thanks


How to Get Web Design Clients

so you want to help people develop their websites I got bad news for you nobody wants to buy your web design services stay tuned I’ll show you why hey it’s Al’s a Calhoun with covenant

consultant and yeah the truth is nobody wants to buy web design services and so here’s what I mean so let’s start with what you are thinking as the web design expert you understand how websites are put together you understand their value you understand all the depth of what’s involved in the art of web design so

you’re thinking about stuff like this you’re a web designer you can code it in a variety of different coding languages you can develop content for a website you can design graphics you can do things like on-page SEO you can check web browser compatibility you can improve website loading time and all the other things that go into your expertise but here’s the breakdown here’s the issue that’s not what

your client is thinking here’s what they’re thinking our website looks old and we want it to look new our website should explain our services better our website should rank higher in Google we want to be able to do X at our website we want to be able to add video on our website we want to be able to blog at our website we want to be able to connect I look like the social media etc etc and our websites to generate more leads can

you see that there is a difference between what they are thinking and what you are thinking nobody wants web design services what they want is their problem solved and so these are all things that your best client is currently thinking about that reflect their problem so what should you do right so what you what

you should do is you should focus on your best skills so yes it’s true you had this long menu of services a lot of things that you could do that you know how to do that are possible but are any of those your best so you’ve got to figure out which of these things is your best service what brings the best work out of

you what you’re most excited to talk about and excited to work on one then you got to focus on their worst pain so they may have they may say one of these things your best client may say one of these things they may say that they want one of these things but one of these things is their worst pain where if you were to fix it you’d be their best buddy right so which of these is they’re worse so you’ve got if you got to figure that out and then third is you’ve got to have an outreach plan so even though you’ve chosen you’ve got you’re clear on

your best service you know how it solves one of their particular problems then you’ve got to consistently be in this conversation all the time always asking people about what their what their worst pain is so you can offer up a solution that becomes a rhythm so once you’ve done one and two you can start with that now you’re going to need three and so if you need some help with the outreach plan

I’ve already laid one out actually you can download that for free as a link below this video where you can get it and you can begin to connect all of these dots communicate clearly communicate on a regular basis so you can attract that best client you’re really looking for it doesn’t stand alone it doesn’t promote itself it doesn’t attract clients in some magical way a real step-by-step content marketing with your big idea your transformational productize service that you bring to you because this is the improved model about how to follow up and close he’s my level


How To Generate Web Design Leads Using Facebook Advertising

all right so in today’s video I’m gonna be answering album for this question so he’s asking me so how do you get web design leads all right so it’s simple man all you gotta do is identify who

your target audience is who your ideal customer is and place an amazing offer that they’re gonna want to have they’re gonna want to claim okay so this might be like a free website set up or or a free review website review or something like that and these people are more likely like let’s just say

your target audience is entrepreneurs people that have a business but they don’t have a website right now so you could create an ad that said like are you on a business owner without a website we’re giving away 10 free websites for our first 10 customers and then once they click you would send them to a landing page that said enter your name your email and your phone number and the we’re gonna give

you free websites or something like that and that’s actually a pretty crazy offer pretty cool offer that I just invented and me as an entrepreneur if I saw that ad and I didn’t have a website man I’m definitely click on it and I would give them a my information to get a free website and then you can just set up like a simple website basic website for everybody and then

you can observe them on a more premium website so that’s where you will make the money so for example you have to identify this person is male or female if your customer avatar between what which age range are they what fan pages do they like what interest do they have what goals do they have etc and then test several offers maybe three offers to start with to see which one responds the best like a free website set up you know free pdf something like that you have to really think about it obviously

the stronger the offer the better results a better performance of that is gonna be because people are gonna see how amazing these people see an amazing offer they’re gonna click on it and it’s gonna be more relevant click-through rates are gonna go up costs are gonna go down you’re just overall gonna have a better results but if you want to get web design leads that’s all you gotta do man find your target audience is create an amazing offer for them and just join them together and you may seem resolved so

for example giveaway giveaway of free website so you can do it you can even do a giveaway for example we giving away 5 free websites worth $1,000 simply click on this link to participate enter your name email phone number and that’s it so you give away 5 websites and for the rest you you call them on the phone you follow up via email and you tell them you’re gonna give them a 50% discount if they purchase your website over the next 3 days and let’s just say if your website cost a thousand dollars

you’re gonna give them to them at five hundred but it’s not only about the front end profits but also about building that customer list that prospect is that following that email list that you can later get to monetize on the back end so that’s how I would personally get web design leads I’ve never personally done it that’s just some tips that I person I want to give you and that’s what

I would do if I had to do it but the key in here is to have an amazing offer to the right audience so Alvin I hope this I should request a man if you have any more or anyone else watching this video simply type them in the comments below I’ll create a video answering it and I’ll see you on the next one alright so if you’ve got value out of this video and wanna learn more simply

click on the link below or go to Esteban Gomez net forward slash course where you’re gonna get access to my facebook advertising 101 course it’s gonna teach you all the fundamentals from A to C on how to launch your first successful campaign everything from how to do market research how to do audience research how to create an ad and how to launch first successful Facebook campaign so this is something you’re interested in simply click the link below this video or go to Esteban Gomez dotnet for it slash course and I’ll see you on the inside


Web Design & Development Final Project

as Marcos Isuzu and I’m a graduate from the fossil web design and development program and my final project was a mobile application for restaurants we first came up with

the idea when we were actually sitting in a restaurant and trying to get some service there had to be an easier way that we can have the chest more connect with the restaurant and be able to get whatever they want right on a device that’s familiar to them that’s how we came up with excuse

me what excuse me is it’s an iPhone application that allows you to do different things at a restaurant which is stuff like call for service view the menu view the deals of the day that sort of thing it’s basically a way to enhance the way people interact with the staff members of their favorite restaurants walk in download the app which is custom built for that specific restaurant they sign in

they register that table and then from there they can view the menu order their food do the deals and there’s even a tip calculator where you can see their bill total and see how much they owe number one unique feature is the call for service button that was one thing that we found that no other app out there had none of them had that special little button that allowed you to hey

I need assistance I need someone to come over to my table and help you and that’s what we focus excuse me at our final presentation we actually set up a table to simulate a dining experience we had two volunteers from the audience to come in and we kind of did this little deeper thing a play we had a look at waitress walking by kind of giving them the service they needed through

the app and we’ve got great feedback from it so I think it was successful working today the person that understand how much you want this happen and he also wants to happen it kind of brings everything together he’s a very skilled with the front-end and design aspect of things and for me I’m still that yo back in technology is databases frameworks that sort of thing his skills complement mine and mine skills complement his so it was just a perfect fit for us to work together by yourself you might be able to create a good project but if you’re working with somebody who’s on your level and create a fantastic rush you


10 Tips for Becoming a Successful Web Designer

everyone GERD here from Cove the web and in this video I’m going to be giving you guys ten tips on how to be successful web designers is the first tip I have for you guys is effective communication skills extremely important

because in the world of web design you’re going to find you’re going to have to deal with a lot of people whether it be clients or colleagues or anyone else really in general because you’re going to need to be able to communicate what you’re thinking as well as understand what they’re thinking second tip I have for you guys is be able to sell yourself extremely important

you need to be able to market and brand yourself in a way that people are going to find approachable simple to deal with and friendly so that they want to come to you they want to have you on their team and help them accomplish their goals very very important that you help yourself by being able to sell yourself to other people all right so next and this is extremely important might be one of the more important tips that I’m going to be giving you guys and that is planned before you start to design you need to know what you’re doing what your project is what your client’s needs are or what

your company’s needs are or what the project whatever project it is you need to know what the needs are of the project before you can start throwing things on the Photoshop and throwing code into editors and anything like that you need to know what you’re going to do before you just go out there and do it so that way it’ll work out well and you won’t waste time down the line so another useful tip I have for you guys is be able to evaluate your own work and also find feedback from others around

you it could be your mom and dad I mean they’re always going to say it’s awesome so maybe look to others as well another really important tip I have for you guys is to stay up to date with current technology the web and just the world in general around us is always changing and it’s always important that you stay up-to-date with the latest and greatest technologies that are being used in the industry right on up there with one of the most important tips I’m going to be giving you guys today is this next one and that is gain experience now the only way to do this is just by simply do you just got to do it over and over again now of course an easy way to look at this is to say oh well I have to go out and find clients but

yes that is true and that more goes to dealing with people and dealing with dealing with people’s creative needs and learning how to cope with certain things that come up on the job however one thing you can do just pick a random topic and just create an awesome website for it and do the best you can give it your all and you’ll see that over time not only would you be able to build

your portfolio without having to actually go out and do work for clients but you’ll also learn more and more about yourself when it comes to design and develop your style before you actually are in the job alright this next one is extremely important and it will help you to streamline your workflow as well as just be better at getting the job done it’s something that is important no matter what field you’re in and no matter what you are doing be organized it is extremely important to keep all of your files whether they be images songs movies just type in general or text keep all of them organized so

it’s easy to find them when you need to last but certainly not least is have some business sense if you don’t or if you’re just not a business person go to a website like entrepreneur calm that’s the entrepreneur magazines website and you can find a ton of awesome stuff about how to get your business no matter what business it may be up and running alright thanks for watching guys if you found any of these tips helpful or if you liked the video in general definitely subscribe we’re going to be coming out with videos every Wednesday and Friday of every week from now on till the end of time take care peace


Cool Web Design Layout You shouldn’t miss

The first layout that becoming quite popular for some time is parallax scrolling. Many websites currently using this layout and I have to admit. It really does give a nice feeling to scroll through your site.

But the one that I’m going to show you today is not a regular parallax scrolling.

It’s a little bit more than that Welcome to parallax.js! As you can see it detects your mouse movement and scroll the element accordingly additionally if you are mobile user, parallax.js will detect your device orientation.

If you tilt your device, the element will scroll the same as you’re moving your mouse on the desktop computer.
So this might be the one that you are looking for if you’re going to make something new for your website Another one that you might have seen it already on many site is grid or brick layout.

This will automatically adjust the image into a grid. Don’t worry about messing up with lots of code as there are JavaScript grid layout library available.
And the one that I’m suggesting here is Masonry because they are available document and quick tutorial for you to get start You can check out the official website and download the document or go to the github another interesting

layout is kind of vertical rain down style that let users scroll through your site and the content will dynamically appear or call “lazy load” but to make the most of your layout and make your cycle interesting I think you’ll need some kind of scroll animation and the plugin for this that I recommend is “Super scroll orama”

it’s a plugin for this job and will make your scrolling more exciting with many kinds of effects like fade, fly and spin or whatever you name it. Another one that is similar to previous layout is full page vertical layout which popular among the minimalist design.

This will give you a simple and clean design and also that your users are able to focus on the content and also separate the content into a section.

I found a small example code that will get your home page up and running with a quick coding. So have fun! This is the most impressing layout in my opinion.
It’s separate your page into multiple columns horizontally. Very suitable if you have lots of contents and you want to separate it into a scrollable columns. You can also navigate it to any section that you like through sidebar link.

So that’s all for this video let me know what you think and if you like this don’t forget to subscribe for more interesting video! Thanks bye