Do you need to know about responsive web design? Responsive web design is an awesome solution to the multitude of different screen sizes and resolutions that we have to deal with as digital designers. This would be a great article for those of you who are just getting started: building websites, whether it’s design or development, and you want to make sure you have a firm grasp of the basics before you get started.
Personally, I miss the days of pinching and zooming in your mobile browser on old-school websites. I thought that was really the best way to do it. I’r just kidding. The first principle that you need to know about is the difference between responsive and adaptive web design, responsive web design. Your content is going to AB & Flow. It’s going to squish and release consistently as the browser or device size changes.
Adaptive web design. On the other hand, is just going to adapt at certain sizes, yeah, there’s no right or wrong answer; it just depends on which one you want. The second principle that you need to know about is the flow. Every HTML document which websites are built on are made up of a natural flow of the elements on that page and as screen real estate starts to get smaller. Your content starts to take up more vertical space.
It’s something to keep in mind if you’re not used to it. The third principle that you need to know about is relative units of measurement no longer Suri’s you’d be designing with pixels or millimeters or pikas, who still designs using PICUs. But we now have the opportunity to use relative units of measurement like percentages and viewport width and viewport height, as well as m and r e-m-s. All of these measurements are relative to the browser size or relative to other elements on the page relative units.
Allow you to design responsive, layouts so much more easily, so I’m going to put a bunch of information about relative units of measurement down the description. The fourth basic principle of responsive web design are breakpoints. Breakpoints are predefined areas of measurement that allow you to rearrange your layout dependent on the size of the browser or the device. So if you have a desk design with a really wide layout in twelve columns – and it starts squishing down to tablet or mobile device sizes, you might want to insert a breakpoint that allows you to rearrange that twelve column layout to a 6-3 or one column layout.
This is really really important because it allows you to take control your layout where things start to get a little funky and squished and no longer make sense. The fifth principle that you need to know about are maximum and minimum values. Sometimes it makes sense for your content to stretch 100 of the browser, 100 percent of the time, but other times it makes less sense and you might want to set a max width.
So it feels like there’s a containing element that it stays in, as the browser starts to stretch your content never goes past a certain point. This is really important for legible text. You don’t want to read measures of text that are 3000 pixels wide. It’s really hard for the eye, and so you want to capture control, govern and maintain with minimum and maximum values. Number 6 on our list of basic principles you need to know is containers or nested objects.
Sometimes it makes sense to take chunks of your content. Like a headline body copy, an image that are related to each other and insert them inside of a div you’ve now nested that content inside another containing element. Now you can control the containing element instead of constantly having to control each individual element. This makes a lot of sense. If you look at a layout like a list of blog posts, all of those blog posts are contained most likely in a div or an article, and each of the individual elements inside of them are relative to the parent container.
So understanding how to use containers and nested elements is super important. The seventh basic that you need to know about is actually an ongoing debate of either mobile or desktop. First, how do you start designing? Do you start designing the full desktop experience, or do you strip it down to that one column, simplified mobile, first approach, really it’s an ongoing debate because there’s no right or wrong answer.
I think the cool thing to say is actually mobile first, but I actually designed the desktop first, because that’s just how I roll basic number eight is web fonts versus system fonts. Do you want that super duper trendy new typography on your web, like you, should have it, but just keep in mind that every piece of typography or font that you load up in your website is going to have to go out to a server and make a Request and come back and that’s going to slow down your load times for the users who are browsing your site and so maybe consider a system fault because they’re pretty stinking fast and if they don’t have it on their system, it’ll default to something else.
So finding the balance between those two is a basic thing to understand in responsive website number. Nine is understanding the difference between bitmap images and vector images. Bitmap images are contained information. If they’re stretched up too much, they start to look a little bit fuzzy or if you have something, that’s really small on a Retina screen, it’s going to look a little wonky. So if you have that problem, you can move over to vectors, which is going to be nice and clean.
It’s math, something like an SVG, but you’ve got ta balance. How to use those SVG’s are great for simple graphics, like logos and icons, whereas an image really should be a bitmap, because that’s too much information to store in the SVG and so understanding the difference, how to balance them and when to use them is a super-important Basic foundation of responsive web design, number 10 and the final item on our list of foundational principles for a responsive web design was coined by Brad Frost whose con and one of the grandfather’s were responsive.
Web design and his famous words were make it until you break it, which basically means make your website work as much as you possibly can, wherever you can and then, when it breaks, maybe consider a break point or media query or a layout change, or some kind Of fix for it, but you should try to make your layouts and your websites work as much as you possibly can, and as many different type of device sizes without having to intervene and create some sort of first aid scenario.
Well, that’s it! That’s my list of 10 foundational principles for responsive web design. I hope you guys enjoyed the article if you did make sure to leave a thumbs up subscribe, the blog. I do lots of articles about design and development and websites just like this one. So maybe stick around hit that subscription button and the Bell notification icon, if you have any questions, leave those down in the comments and check the description for tons of links to helpful resources that I mentioned in this article, I’ll be guys are having amazing week.
Designing amazing things, making amazing things and building amazing responsive websites I’ll see in the next one.
And the planning that goes into it beforehand Before you get to those stages, but I think it’s just as Important and it’s just as important for you to See so I’m excited to plan along with you today, I’ve got my iPad got my Apple Pencil and let’s get going First off. Let’s take a Look at my current website as it stands. I guess So. This was designed back in…. I can’t remember now, if It was 2014 or 2015, but I just know that it was a while ago And so the design needs some updating.
I’ve changed my branding, Since then, slightly and also this website just doesn’t really fit to my needs anymore, It doesn’t really fit what I need from a website I used to write pretty Regularly, on a blog as well on my old website, Not in the past year or so But before then I was I’ve decided that I’m not going to be porting this blog over to my new website, Which, by the way, I’m going to Be building in Webflow, I guess it’s more of a Visual way to build a website, so you don’t actually need to know how to code it from scratch to be able to make it in Webflow And they have a really great CMS as well.
It seems really powerful. So I’m excited to try that out. My current website is built In WordPress – and they do have a way that you Can like bring all your WordPress posts over to Webflow, but I’ve just decided I’m not going to bother I’m going to like leave those in the past. There is a couple of posts: That I might transport over to my new blog that I’m going to Do which I’ll get into in a second but yeah For the most part, this Site is going to be completely revamped.
I want my new site to be a Little bit more flexible, I want it to do a few More things as well, The first thing is, I want It to be my content hub, This was kind of my idea. For the previous one, but it didn’t really turn out that way. It was mostly just the blog posts and links to my latest on the home page, but I want to be able to Have my articles on there podcasts on there blog posts on there and all be searchable? Together, so that, if you want to learn about a certain topic, I will be able to have a Page for that, with like this article, this blog Post, oh and this podcast that you should listen to on the topic So yeah.
The first thing: Is bringing all my content together cause right now? It Is just all separated out? The second thing is obviously Because I’m a designer, I need to have my portfolio on my website and it’s not only my design. Work that I want to have a new portfolio. I also want to have like a speaker’s page Like a portfolio of my public Speaking and workshop efforts to try and attract more of that, I am also planning on Starting to blog again, as I alluded to before, but this time on, a slightly different topic, I really want to write about the behind-the-scenes of my business So posts about like what it’s like to start up an LLC and working with an accountant income reports.
Perhaps Something I’m thinking of doing These things, I feel don’t Particularly fit with my YouTube blog, which Is more design-focused but they’re still things I want to put out there, So I feel like writing about Them will be a good fit, So that will go on my new website And then lastly, eventually I want to bring a store into this website Right now. My online store Is on a separate platform, It’s a completely Different brand as well, but in the future I want To bring that in and have it all in one space, I’m not going to worry About that for now, however, So we’re just going to focus On yeah the content and portfolio side of things, So with that in mind, Let’s start planning, And the first thing I’m going to do – is write down on this page.
Actually, I’m going to write content or hire me Cause. This is the two Frames of mind of like what people are looking to do, When they come to my website, as I see it, They’re either looking for Content to learn about something from me or they’re, like interested in hiring Me for a certain thing, With those in mind: let’s start planning what pages I’m going to Need as part of the site, The first one is obviously a home page.
I feel like I’m going to Want a page: that’s like a content hub, So I’m just going to write content That’ll, be perhaps that’ll be some Categories listed and like suggested to you Almost like the playlist that I have on my YouTube blog, but instead of just being articles, there’ll be Blogs and podcasts as well And then as part of content. I’r also going to need three different templates. Basically, I’m going to need audio article and written I’m sure you’re wondering right now how I became a designer when I can’t even draw a box neatly, but hey That’s how it works.
I’r also going to need my portfolio And in that I’m going to have like an individual project. Obviously I’m going to need A template for that as well Gon na add my speaking page in here as well. That I mentioned Then there’ll be the basics. That’s like an about page and a contact page too, probably Actually as part of contact. It would be a good idea for me to have a form on My website for my portfolio review series.
I think, Right now, my instructions Are for you to email me with a specific subject: Line and include the information you know, In order for me to review your portfolio in that Series that I do on YouTube, But not everyone uses The right subject line so it doesn’t go into Like the right folder in my inbox and not everyone, Gives all the information that I need as well? So I think, having some Sort of form on my website, where you can just fill in Your details and submit that will make the whole process a lot easier for everyone involved.
A page. That’s quite Highly-Visited on my website at the moment, thanks to a Article, that’s quite popular is where you can download My screen printing guide – Basically it just has the article and a form and that’s where you get The guide sent to you So a lot of people come Over from that article, I thought about having that Page as part of this new website, but what I think I’r actually going to do is have screen printing as a Category in my content here so it’ll be like part of this And that way the form Will be on that page for you to download and Also see any like articles or blog posts or Whatever that I’ve written about screen printing too So actually as part of this kind of in between here I should also put.
.., I’m just going to add it next to it anyway, Like a category page Content page is like the Home of all the content, and then a category page, is that playlist. I think where it’s the audio article written Thinking more about This contact page too, I think I’m also going to have like a freelance form submission. So if there’s a project that You’re interested in me working on with you, you can Fill this out with like information about the project, I’m also going to want Like a plain page, template that I can pull out whenever I need to for giveaways.
This is something that I like to do in the middle of logs every now, and then it’s just throw up a giveaway And to do that, I get People to fill in a form so that I can like pick the Winner, randomly from there So yeah Plain page that I can just duplicate whenever and make a new giveaway will be really helpful. Thinking about what else Is on my current website that I might want to bring over The only page that I really Am not considering here and not adding in is my newsletter page, So I just have a page about signing up for my newsletter.
I don’t think I’m going to do that because, to be honest, I haven’t been super regular with sending out a newsletter lately and I think, instead of having newsletters like the reason for people to sign up, I instead would rather have a form on each content. Category page that they can fill in There to get a certain, I don’t know: PDF opt-in, Something or other that I’ll create And then they’ll they Can get emails about that particular topic in general and they’ll also be added to my list.
If I do send a newsletter, I think that’ll be a better Way of going about it than having a dedicated newsletter page, I think I should really move this. I don’t know how to Move things in this app, so I’m just going to erase It and write it again, But I think home should be Seen as above all of these other things, Because my home page will Be the hub of everything, Perhaps some things won’t Be connected to home, like I’m, going to actually Remove giveaways from that, But everything else I think, will be coming from the home.
Page and the home page will be designed to lead You into the right thing With these two things: In mind, in particular, content or hiring me as the main thing that you’re looking for So that’ll, be the first Decision that I make someone make ( laughs ) Make someone make when they come onto this page. It’s kind of like this is the content stuff. This is the hiring me stuff, and these two pages are Kind of fitting, with both Now this seems like a lot of work right, Like that’s a lot of pages, That I need to design So to start with, to stop me from getting overwhelmed.
First, I’m actually going to just do an MVP of my homepage, So it won’t have all of these sub pages. It will just be a homepage that Links off to various things, So it needs to link off to my YouTube social media. I think I won’t have a Contact form even on it to start with I’ll, just have my email address, bio and maybe in place of building out a full Portfolio I’m going to have a link to my Dribbble on there and I will make sure I Update that a little bit cause, that’s also something I don’t do very often So this way people will Get access to my content.
They will know how to contact me. They will learn a bit about me and see a bit of my work, But without me having to Put in all the work of doing all these extra pages just yet So that means I can get my new site like up and running In designing this page I guess I’ll be able to develop a design system for It and kind of like a brand for my website as well That’ll make it easier to design these other pages And just in general, I Think it’ll be a good start to the project, ( laughs ).
So that is my very Messy plan for my website: It’s pretty simple, but it’s really good to Do this thinking about what you might need, rather than getting halfway through Like starting and then you know the project Keeps expanding from there, Especially this piece of figuring out what people are going to Be coming to your site, for, I think, is really important to get down. So if you have a website, Project that you’re working on, I really encourage you.
To do this step first, just to figure out exactly What pages are needed If you’re working with a Client you’re going to need to do this anyway, to Scope out the project and how much design work is Going to be involved for you, But it also just really Helps me to see it and to know what work is coming and I’ll be able to like tackle these section-by-section. I think Hope you found this Interesting to see, anyway – and that was useful in some way to you And that you’re excited Too, about this new series of mine redesigning my website, I’m very excited about it, and I’ve been talking about it for a long time, and I think that making articles about it is going to actually finally help me get it done, because I’m going to have you To keep me accountable All right, (, giggles ), That’s it for now Give it a thumbs up if you enjoyed it Thanks for reading and I’ll see you in the next one – And I guess the next article will be the wireframing and possibly design of this MVP homepage.
Basically I’ve gotten a lot of questions about how I did my portfolio, how I did my website just like how to do websites in general. So I thought you know what let’s do it? Let’s talk about it because I feel like it’s a really easy thing that not a lot of people know how to do they just haven’t like looked into it.
So I’m here to tell you about it also. I know this is getting a tad bit annoying, but if you are reading you for the first time or if you have not subscribed, what are you doing subscribe? Also tell a friend about my blog. I do art in design and also cool other things on this blog, so so, when you are starting out thinking about creating a website, I think the main thing you need to think about is what your brand is so like with me.
For example, I wanted to do basically all of it. I wanted it to be myself, it is about me. I want to guide people back to my YouTube. Blog, not just show my portfolio, but I also have my portfolio on there and I also have blogging stuff. Even though I need to get back into that, but you know it’s like a whole thing, that is around me. So what is it that your brand is? What are you trying to say? What are you trying to be? Are you just letting your work speak for itself? Are you posted on YouTube too, and you want to like put that in there? Are you portfolio website landing page whatever? You are really think about that whole branding idea, because that will help you and guide you through.
So it will help you in colors it’ll help you in type choices, it’ll help you an imagery. It will help you in how you want your website to be laid out. So that was a big part for me when I started designing my website and I feel like that’ll help you in understanding what you want to do. Let’s talk a little bit about inspiration, so I’ve gotten a lot of comments about people wanting to see why I did the things I did or how I did the things I did on my website and I first started off making those decisions because of how many Websites and people designers, artists that I was inspired by so I have a few that I love a few standouts one of them is Alexia.
Russia is the French graphic designer I found her randomly on be, and then I found her website and honestly. Her work is so stunning love it, but I love the way that she has laid out her website in a way that is very true to how her work looks. So the website is sort of its own art piece and you can scroll through it. The colors change there’s a lot of like text and scrolling animation, which is like a scroll effect, it’s very simple and then there’s like just really cool aspects of it.
The website that really speak to her work, so I feel like Alexia rue, is a big inspiration for how I decided to layout mine. I know it looks like nothing like it when you actually think about it, but it’s just that idea of understanding. Why you’re doing the things you’re doing because of how your work is laid out or the style of your work in general? Another person that I’m really inspired by is Gerald sensual, it’s Gino Chua and he was the creative art director at Conde, Nast Traveler, and then he has moved to away the suitcase brand he’s the creative director there now – and I am obsessed with him and his website, Like I go on all the time for inspiration just scrolling through again, you can see that his work really informs how his website is laid out and the colors, and just all the stylistic choices that he’s done.
I love it. It’s so beautiful and honestly, it’s a vibe. Those are just a few websites that I was really inspired by. You might not be, but you might find some designers and artists who are doing something that is similar to you in a way, and I feel like, even though my website doesn’t visually look exactly the same as theirs. I did let it inform a lot of the design I did on my website, so it’s all about your style and your design and your your work and how you want to display that and the best way possible for your unique sense of style and personality.
So actually designing my website: let’s get the tea, let’s get going, so I use a hosting website. So if you don’t know what that is, it’s like WordPress, Wix Squarespace, all of those and I use Squarespace. So I don’t want to go into like a whole thing about how squares freezes so amazing, a blah blah blah, because you know what they don’t sponsor me and I’m not getting paid to talk about that. I just use them.
I love them. I’r just saying I love Squarespace, but I’m not going to go into like a full Squarespace tutorial for you. I just want to talk generally about you know using a website host, because I think it really is the easiest way to have a website. I am NOT a web designer. I don’t do UX design that much so I’m not the kind of person that built a website from scratch in here. I’r going to show you how to do it.
I just want to talk about the decisions I made in my design, my website and portfolio. Why did I say it like that website and um yeah we’re just going to talk about it. So when you go to my website, Paula comm link below so you’ll see a home page and I used to not have a home page and then I went into that because I felt like it was an easier way, a cleaner way to see all the navigation. Like what you’re there for so, if you were there on my website to see just my portfolio, you could just click and it’ll.
Take you right there or if you want to see my blog, if you want to click on my articles, if you want to contact me whatever that is all laid out like very clean up front, I used to have a scrolling home page, which is also fine. If that’s what you want to do, if that’s your aesthetic, it could be all your work. You know, as you scroll through as soon as you get on your website, but for me I have a lot of other things going on on there.
So I wanted it to be very clear when you get on there, not just like here’s, a million different things but like you can do whatever you want. You know what I’m saying like. If you have a portfolio – and that’s all you have on your website, it would be so cool to just be like okay, I’m here and I’m scrolling through different, like colors pictures whatever and that’s great too. So I just did the homepage this way, because I wanted it to be.
Like here’s Paula Casa, here’s her whole thing check out my youtube check out my art, like all of that, you know what I’m saying so once you click into that which I’m going to use my portfolio as the example for all of this, because I feel like That’s the kind of the main reason y’all are here, probably so, let’s go on to portfolio, and this is where you see everything laid out and right now I mean I think it works.
I think it looks professional, I’m not obsessed with it. I might change the layout of this like whenever I feel like I’m, never satisfied with my website, but that’s okay, because it’s really easy to change and decide what you want to do. So I have it in a way where I have everything laid out. You can scroll through all the images and then, when you click into an image, is where you’re going to see the design the work, the info about the work, the title all of that you’ll see when you click into it, and I have it a very easy Way to get back to your my portfolio with the link, so I don’t have it like super confusing.
I have it laid out pretty easy. It’s pretty straightforward um! I know a lot of people try to get creative, but I feel like in a web design. You you want it to be very clear, especially if you’re showing your work and your art. You don’t want it to be very confusing. You want to be able to see everything very clearly and you don’t want it to be like too artistic to the point where that people are like okay.
What do you do? I don’t understand um. So that’s a really important part in web design when you’re laying everything out. Luckily, with Squarespace and stuff like that, like hosting websites, you can pick from a template which I did and I picked one that had a way to like share a lot of images in good ways. I mean you just have to look into what the themes can give you, so I have like scroll effects, so I can use that and I have like all these different things that you can turn on and enable some of the themes don’t have that you just Have to like do your own like little discovery into it when you actually start using it so get into the actual design part of it.
You know like what to choose, how to choose it. Um with the hosting websites. Like I said, it’s really easy once you have a theme to go off of that, but you can also bring in some of your own elements. You can bring in like typefaces, like it partners with Adobe. So if you have some typefaces that you want to use, you can use those and then like in under design. You can add, like your logo, to a lot of things that you want to add it to.
You can really brand yourself and all of that, it’s an if it’s important to you and also with color. You can bring in any color code from that you have like that. You know the color code, for you can totally bring that in copy paste and use whatever brand colors. You want it’s really like pretty straightforward when you start designing, but I think some people really try to stick to the template, which you can manipulate that template to be what you want like.
Don’t just settle on. Oh well, it’s over in the left corner and then the navigation is over on the right. Because of this template, like you can change what you want to change, you just have to figure out. What’s the best way and looking at a lot of examples, online is great for that of what you like what you don’t like, what you think looks the most professional or the most artistic. It’s really up to you, okay, so that is what I have for you today.
Hopefully, that’s screen recording things showing you my design process through web design and setting up my portfolio, and you know getting some inspiration, hopefully that all inspired you and that helped you in some way. I will leave links to everything below and also subscribe. If you haven’t subscribed, like I said at the top of this article, and also ring the bell to get a notification when I upload that’d, be great and give it a thumbs up, if you liked this article and do all the things comment to me, I love Talking you guys in the comments, so if you have any thoughts about your website, talk, it talk it out in the comments we’ll talk about it and yeah.
I will see you in my next article bye, bump, bump bump bump bump bump bump bump subscribe.
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-09-01 13:51:002020-12-20 18:37:34Web Design: How I Made My Online Portfolio!
Go share is also super affordable with an annual subscription of being less than ten bucks a month. But if you’re, one of the first 500 people to click on the link here in the description in YouTube, then you get the first two months: 100 % free. So join up everyone what’s up Gary Simon, of course, cetera column. So today we’re going to be embarking upon a two-part article series, where I show you how to design that modern landing page that I showed you at the beginning of this article now, if it seems a little bit jagged for that initial animation.
That’s only because of the frame where otherwise, it’s very smooth, you can check out the code pen as well all right, but this first article I’m going to be showing you how to work within Adobe XD to create this design, I’m going to go over a lot Of my thought process behind the decisions that I make then in two days I’m going to be uploading, the second article and final article, where we go all over all the front-end development stuff.
And you know: how do we translate this Adobe XD prototype into something that actually works on the web? It’s also going to be fully responsive and I’ll, be showing you a lot of interesting tips and tricks that you probably didn’t know about already. So we’re also going to be using G SAP, which is the green sock animation platform to handle all these interesting animations. Alright. So if you haven’t yet make sure to subscribe and let’s get started alright, so let’s go ahead and get started, I mean Adobe.
Xd just died, the the new document window we’re just going to choose web 1920 here to get started alright and by default, let’s close that out for now, and so this is basically just going to be a fictional landing page for maybe like a guitarist company or Something like that, or maybe an or musician or some sort, there’s something in my eye course, and I you have a lot of different options and chew in terms of how you choose to structure the layout.
First of all, you have to ask yourself immediately: what is the call to action? You know what is it that you want these people to do the visitors you usually want them to perform some sort of action, whether that be you know, click on a link to learn more to buy something to enter their email whatever, and that’s really going to. I direct your initial decisions in terms of what content you’re going to be placing where and what you’re going to be emphasizing in terms of prioritizing everything and visual hierarchy.
I you also have to address you know. First of all, you need to educate your visitors. You know what this site is about immediately, and you usually do that through the headline, a strong headline, with a supporting description of some sort, something that will help people easily identify the purpose of the website. If people don’t know what’s going on, they leave like that. I so I decided I we’re going to have like a sort of multi column kind of block level layout just for this demonstration.
So what I mean is we’re going to have kind of like a hero, section right here traditionally for a long time, people I did hero sections like this. You know you have your your navigation up top here. You might have some sort of a headline Center, but the sub headline and then like some type of dive. Usually they can illustrate enough some sort, we’re going to kind of step outside of that and break the trend and I’m seeing more unique layouts.
Fortunately, just because we’re starting to evolve or continuing to evolve rather as UI designers, and so we’re going to have kind of like just this big column right here, dedicated to the primary information like the headline, the call to action, and it will probably make it go Right around here, it’s not going to be read either and factors going to make it this color for now and we’re going to put an image in here.
Actually, in fact, let’s do that now we’re going to have like a photograph through CSS the background image property. We’re going to make it a also a cover three, the background size property as well. So a cover will just take a photograph that you place inside it and just make it a hundred percent. No matter what so I’m here at Google Images and I’m going to do a search for guitarist all right, so the guitarist you want to make sure if you’re using Google Images go to settings note, go to tools rather uses rights, labeled for reuse with modification.
That way, you have the right to use these images. Now when it comes to photography in UI designer, I could dedicate an entire article to. I think it did already. Actually, I on the YouTube blog, but you have to really choose the right photographs, especially if you’re planning on having important content on top of it like type like eyes. You know information and we’re going to do that entirely right here.
I so we want to use an image that a will contrast well and be also makes sense right. So, as I was looking through these initially before you know, when I was preparing you know, there’s several that would work. I depended on the amount of content you’re going to have, for instance, this one right here. I, if you wanted a darker sort of feel this space right here, would be really great to have like a headline and maybe a sub headline or like a call to call to action or something because it’s not much happening in this image same thing right here.
I decided to choose this one. I this is a quite large image, but if you click on the link, it allows you to specify a width and height and it’ll just download it for you right away. So I believe I chose like 1600 for the width and then just hit. Ok – and I you can click download right here at the bottom, so that will download it. Alright, we’re going to show that real, quick and then we’re going to drag that image onto our container.
Tada works very simple, alright. So I next after that, what to do our other eye column right here, so where it’s a two column layout, but we’re going to have who rose right here. Alright! So for this first row, let’s get our rectangle and you could go like just 50/50. If you wish – or you could do maybe like this or this I’m going to choose to do something like this, where it’s more like, I two-thirds of the width down or the length or other, and so it’s real important if you’re going to have multiple like these, These sort of block level layouts to separate them in some way, so you could separate them in a manner of different ways, but the most important element here is contrast.
You separate them through contrast, and you have to take into consideration these colors and also the colors between these of these two blocks right here. So I this is where you get out, and you just start experimenting, I’m looking at right now how this particular color and the hue, the lightness and brightness interacts with. What’s next to it right here, particularly right here, so we experiment we go like all the way to like right here.
That is not good. I there’s just not enough contrast, but there’s just enough to where it’s throwing you off you’re wondering what’s going on. Of course, white works really well as a contrast, but then again, what is this one get to be this one’s? These two should also, if you’re going to try to rien, read if you’re going to try to reinforce the idea that there’s you know multiple blocks here. They have to be different so for this one I’m going to choose to make the color more in the yellowish and something that’s right around, not completely saturated, although that actually isn’t that bad.
I actually kind of liked that I was going to go with something more like right here. In fact, I think I will it does contour us just enough right here with this color, it’s in the same hue i, but it’s just more saturated. In fact, we’re going to stick right here, yeah, because I was I lied, there wasn’t enough contrast, so i’m diverging from my original plan just a bit, but you could see everything contrast real-world! Well, you can see.
This is clearly find container the next one down here. The one at the bottom I white, works perfect. It contrasts well with this in a contrast, well with this over here, you could even I don’t have to follow along with this part, but you could make it probably black as well. If you wanted to – and you see that works just as well so a lot of it is subjective and a lot of it, a lot of it is also very subjective or objective as well.
I so there’s certain things you should do and shouldn’t and then there’s certain things that are completely up to you all right. So I next up, let’s go ahead and start putting in the type based elements, so I’m going to put Gary Simon. I don’t know just this is going to be like the compliment company name. I guess you could call it. Of course, those of you who follow me. I love Montserrat, the font and I just use it just because most of you probably have already installed it anyways, and this is just a great all-around font, so people get mad that I use it too much, but that’s tough, tough, titty, alright! So now we’re going to duplicate this we’re going to have just a simple navigation just with three links right here, I’m going to say home and I’m going to duplicate this we’ll say about right: there, we’re even and also FAQ – I don’t know, I think, we’ll just Leave it like that, originally I had planned on making them not bold, like regular, which that works as well.
So I think we’ll just leave that there next, let’s put in our headline so next for the headline, then the main content of this section, I’m going to indent I’m not going to keep it on the same right here. I want it to have nice a lot of white space from the edge of the browser or the phone I and also from the top as well. So I’m I’m just going to click right here, we’re going to say, go musician. I don’t know some sort of catchy headline we’re going to make this bold as well increase the size of that quite a bit nice and juicy.
So we’re really saying hey. This is probably the first thing we want you to read right here and we’re reinforcing that through size also color, as it is completely 100 % contrast. If you made this white, for instance, it just doesn’t stick out as much as you can see. So it’s all about understanding the background color and what you have to work with and making that decision in terms of whether it should be lighter or darker.
This next one. Actually, let’s undo that we’re going to left-click and drag out a area, a type area and I’m just going to type in start touring all over the place and melting, the hearts of chicks. I don’t know okay, so now we will bring this down in terms of size and also weight, so we really want to create a clear distinction between these two type based elements. I see a lot of people and my Friday review shows where I review designs definitely check that out.
I do it every I do it by weekly. I see a lot of people getting visual hierarchy as it pertains to type completely wrong and that’s another thing: if you go to my blog search and type in visual hierarchy, you’ll find my article that I really talk about this. Well, you want to separate your different type based elements that not not every single one of them like, for instance, if you have a bunch of paragraphs, they should be styled the same, but when you have type based elements that are representing different ideas, I that go Together that are, you know physically close together, then you really want to separate them a lot, and you do that through scale or the font size.
You do it through contrast. Sometimes you don’t have to, though you can do through font weight as well all right. So I think that’s good right there, let’s create an interesting sort of button like a call to action button. I’r going to put a text right here, get famous alright, so we’ll make this bold, maybe a little bit smaller and we’ll wrap it in sort of like a trendy, little unique container of sorts and we’ll take out the fill and let’s also put an icon here.
So we’ll put I take our pen tool hold shift, alright, even it up there, we go, make it white or black. Rather sorry, I saw white and I said white and you want to make sure everything’s. You know evened up. This will give you a guide telling you you’re at the center right there of the text. That’s good, and you also want to make sure that your button, you know all the padding, is pretty consistent in terms of the light space from the top to the bottom and I’m looking for an even amount of white space from the top bottom and right.
We can get away with it over here because we’re doing something a little bit unique, we’re having extend all the way off screen all right, so you could have done that button differently. For instance, I don’t do this, but I’ll just quickly demonstrate it. You could have just taken a right here, take these two elements and just put them in the center. You could have done that that works just as well, but if you want to be unique as long as you’re adhering to good design, principles and fundamentals, you can you know, do things differently like that, I so I think that’s good right there, let’s go ahead and Complete this area over here it’ll be done shortly.
I will go ahead and take this down. This is going to be like an h2 element in HTML. This would be h1. I’r this right here. This is this going to be secondary content. So it’s going to be ASA, I don’t know maybe it’ll be something like featured – will have some lorem ipsum text just duplicate this all right, so maybe it’ll come down around here with it selected I’m going to go to my plugins and there’s a lorem ipsum plug-in You can go ahead and click discover plugins, plugins and type in lorem and you’ll find it and you’ll be able to install it.
I’r going to choose fill with placeholder text. Alright, that’s good! I’r going to make this smaller font size and also increase the line height. Just a bit around 34 all right – and it looks pretty good to me right around there and then a real quick call to action just using this same sort of just this. These two elements, so I’m just going to control deselect those two duplicate them and then we’ll change this up real quickly.
To read more, I don’t know now, I’m also looking at the size of this element versus the size of this, and it’s a little bit too close. So I’m going to scale it down, maybe like nineteen. Alright, that looks pretty good right there to me and then, finally, we will take these two elements: duplicate them put them right here and I’m going to change. This is going to be like a email capture, so subscribe I’ll change.
This just Assoc, oh, is like two lines of text or something like that. I still think these are probably a little just a little bit too big in terms of font size, so I’m going to scale them down like to nineteen yeah. That’s that’s pretty good right. There we’ll take these to bring them down. Okay, then we’ll go ahead and put in a text field so notice. I mean it the width, so that’s an even amount of waste based between here and the right on the right side as well.
So it’ll span hundred percent in the container once we’re in HTML and CSS and then I’ll put in place holder text. So this will be email address and we will drop down the opacity just a little bit. So I’m using my keyboard, arrow keys to I get this aligned we’ll take these two elements, duplicate them and then I’ll make this one a fill of black and we’ll make this one white, and that rate this particular call to action.
You know it stands out pretty. Well, and then we’ll inside of here, we’ll just put in subscribe now again make sure this is all lined up as it should be. Alright, I just moving things around a bit. Alright, this line height. I want to get down just a tad bit there we go. Alright and there we go, I’m pretty happy with that as it stands, this is going to be very close to what it looks like in the browser and ordinarily.
If this is a real project – and you would also take this – and I you know – you would create – perhaps another artboard like an iPhone XR, just to show what this will look like when you’re in mobile or just basically a small device and what you would do Is probably extend this down and you would start taking these elements, and this is where it helps to understand. I front-end development as a UI designer and understanding, CSS and layouts and the grid, and all that so that you can understand.
You know which one would you have or prefer to should be shown on top and what else is possible. The CSS grid fortunately makes I a lot of that not entirely necessary in terms of understanding CSS as a UI designer, specifically because with the CSS grid, you can really move anything almost anywhere. You want, but it’s still helpful, to have an understanding of CSS if you’re a UI designer but yeah.
You would take these elements like. Perhaps you would start with this duplicate it put it over here. If you wanted to scale it down, you could do that as well like this and then take our stuff right here and maybe scale it down and then move them in and because this is such a small navigation and there’s not many links. It’s always advisable to discard the hamburger menu, because you can. I mean you have enough space here and why not do that? I it’s less clicking so for the UX, it’s less clicking to access the important information that they want to be able to access.
So you can always just do this or even sometimes put it on a second eye or secondary line underneath it. You could do that as well. I think we’re just going to do this, though, for our example. Alright and then you would take all this stuff and you would start translating it as well. You know this is going to be first and yeah right around there, and I think you get the point already, but you would basically just translate everything in terms of how you want it to look on a mobile viewport.
We’re not going to do that because we are you running pretty long in this tutorial anyhow, so in the article I’m releasing in two days on Friday, here I’m going to be showing you the HTML and CSS process, so there’s a few things can be mobile first. So we’re going to work within a mobile first context and if you don’t understand what that means, don’t worry I’ll, explain that and we’re going to do the HTML and the CSS and then work on the JavaScript to make this animate in a very cool and modern Way all right, so hopefully you found that useful.
If you did make sure to leave a comment subscribe and also click the notification bell icon to get notified every time. I upload a article, all right I’ll, see you guys later Inc, bye,
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-08-28 14:01:002020-12-20 18:37:50Create a Modern Web Design from Scratch – Full Process – Part 1 of 2
I used to design this website for my client w. This is a project that the web, design and brand was ten thousand dollar and i’ll. Show you exactly how we did this in under five minutes: let’s rock and roll hey everybody. What is up my name is ron segal, i’m a designer, and I know you don’t have a lot of time. So that’s why i’ll try to compress the whole process that actually took a couple of months into under five minutes? Let me start the clock by the way.
If you want to know more about this process, we actually created a full-on documentary about this process for the website of w so check the links below. If you want to see the full on documentary, but now the clock is running, so let’s get started the first step in this process, like almost every process for every website or a project that we do for clients started off with a strategy session. The strategy session is where we try to get to know the clients we’re trying to align, who they are, what they want to achieve and how to express this visually on their website or on their brand.
It goes on to cover things like who they are, what their story and missions are, what what makes them unique we’re using the online statement to understand how they are different. We’re trying to understand who their target audience is what their offering is, how they are trying to communicate and just try to understand who they are and cover all things they want to communicate. So that’s basically just trying to understand who they are as a brand.
Then we spent the whole day doing this sprouted strategy session to get to know them and their audience, and then we did a whole separate session just for the website itself. So in that session we basically cover what are the goals of the website? What do they want to achieve with this specific website and whether the people that are actually going to visit this website are actually want to achieve? So what do we need to show them? We then go ahead and try to brainstorm what content should be on the website.
So I came in with my suggestions about what should be on the website, but of course they have their own needs and ideas, and so this is kind of a brainstorming session about everything that needs to go inside the website. The second thing is we’re trying to get some alignment about what do they expect in terms of look and feel how do they want their website to look like so again, I came in with some references of things that I thought can be a good fit, but This is just to trigger them and to hear what they think about this.
Of course, I also encourage them to bring out their own ideas, and this helps to get alignment and so that, when i’ll end up presenting the design, I won’t surprise them and they’ll be like. Oh, no, that’s completely not what we’re talking about they’ll be really i’ll know what they are expected to see and what they are interested in. Seeing after we did this, we actually split the process into one phase.
We started working on the wireframe, so we used figma for this, because figma is really great for collaborations by the way. Now you can also do this with xd, but back when we did this xd didn’t have the collaboration features, so we use figma for that and basically here you can see it’s pretty ugly, but it’s basically showing the structure that i’m thinking about and what content is Going to be there now, the the great thing about collaboration is, I can give them access to this file and they click start editing the files, the the text here and we can start seeing if this is enough text for their story.
Is this enough text for the title and started to get feedback from them once we get approval on that, then we can move on and start talking about the design itself. So in parallel to this, we presented the actual design. So, as always, I do encourage you to sell your design and explain your design, not just show it as it is, and so, when it comes to presenting the design itself, I always try to tell a story in this case.
I wanted to show them. You know they already had an original logo, which was a butterfly, and I wanted to keep that, but also updated it. So I showed them how I use the letters of double and you abstract them to create some kind of a new flower that also represents holding hands or kind of an upside down heart, and so this would be a good fit for them using colors. That would be bold and aligned with what they’re want to show.
This is basically how we demonstrated it on multiple applications, including the website and social media, and all that kind of stuff. After they approved this, we went ahead and applied the design itself on the figma file. Now, if you structured your wireframes correctly, this is as easy as changing the styles, adding some colors and replacing the images, because you basically already have the structure for the website.
Once this face is approved, we go into webflow to actually develop this now. The way I do this in webflow is, I always start off with a style guide, which basically means i’m putting in all the typographic styles and colors, so that, basically, all i’ll have to do is copy and paste them to structure the actual website. And I start with the home page, I structure all the content. I make sure that it’s you know mobile, responsive and then basically just duplicating this page and changing the content for the rest of the pages.
That’s basically it and I think I did it in under five minutes, but i’m pretty exhausted and I feel like I spoke super super fast. So I hope you found this useful to kind of get the overview of working with a client on a website and brand project to get it from start to finish, if you’re interested in oh good, this is a timer for the five minute. That’s up if you’re interested to dive more into this topic.
We do have a full-on course. The 10k website process, which you can check also below and hope that was helpful. I will see you on the next article bye, bye,
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-08-24 13:55:002020-12-20 18:37:59Professional Web Design Process Explained in 5 minutes
It’s actually the best time to get started, stay tuned! I’ll! Tell you why hey everybody! What’s up, my name is Ron, say: gollum, freelance designer I’ve been designed for the web for almost 20 years, which sounds so old when I say it, but I do understand if you’re browsing on YouTube right now or on Instagram, and you see those amazing designer doing Those amazing things which you can’t do at the moment and they’re talking about so many buzzwords and processes and software, it’s just looks overwhelming and you’re like.
Ah maybe it’s too late to get started, maybe I’ll never be where they are. So I might just give up and stick to the job that I hate or something like that, I’m here to tell you no, no, no, no don’t do this. Now is actually the perfect time for you to get into web design. When I explain why listen when I got started almost 20 years ago, there is nothing like there was the internet, but there was no like youtube to learn from.
There was not like lynda.Com, you couldn’t even read it online. They had to send you, DVDs, home. If you wanted to learn Photoshop and you couldn’t have Photoshop download Photoshop as a trial cuz, you know Photoshop costed, like $ 3,000, or something like that. So you would probably have to steal it or look to a ways to download it illegally and then have to deal with all that crap of working with the legal software until you can afford to buy now like it was such a pain to get started.
There was nobody to teach you the Rope, nobody to teach you best practices, and it was just very very hard. It would take you much longer. There was no social networks or no online community. Where you could find clients, you literally had to go out to people that you know, give them flyers or something like this, and just like Network old-school time to get clients, it was very, very difficult now.
Obviously, things are way different. You know you can download most software’s for a trial or for actually a decent price. You can give them a go yeah. There is also many many free software alternative these days web-based or not web-based there’s tons and tons of tutorials on YouTube and people who will show you exactly what to do the processes. Everything is, you can just get started for free without investing much – and this is this is one thing that actually, of course puts a lot of people in the game.
There’s going to be a lot of competition, however, I don’t want to have this, bring you down and say: ah everybody can be a designer now, so there’s tons of competition and again I’ll, never win this competition. Look the only thing that is dangerous for you is you looking at people who are 10 15 people ahead of you and comparing yourself to them and that thing kind of crushes, your soul and you’re like I’ll, never be there, but the truth is you will be There, if you will you’ll, actually be there, probably faster than it took them to be there if you’re going to use all the tools available to you.
So the only thing dangerous for you right now is you giving up because you compared yourself to other people. That’s actually the only thing, that’s harder than what we had like 20 years ago, because back then, like I, couldn’t see what designers around the world are doing. I can maybe I could go to the library and pick up a design book and see what whatever pentagram words were doing, but it’s very different.
Now you get it in your face all the time. So that’s, basically the only thing that you have to worry about. So stop comparing yourself to people who are so down the line and start focusing on how you can take the next step. Look right, there’s more competition, but there’s also so many people online. So many people starting new businesses who need designers, help need new website. So there’s also tons of immense new opportunities.
It’s definitely definitely not too late to get started on this blog alone. You have many articles like how to get started and freelancing and all that type of stuff, if you’re not subscribed, make sure you’re subscribed and go read all those articles they’re here for free to help you get started. This is what I do not give up and do not have your soul crushed by looking at people. So far ahead of you.
Just look at the next step. Do whatever it takes, surround yourself by people who are maybe in the same situation as you, and it can be kind of a support group to help you move into the next step and not worry about so much in the future. There are so many opportunities right now, this just an amazing amazing time to get started. I wish you all the best. Let me know what you’re struggling with when you’re getting started in the comments and I’ll try to make the best to help you see on the next article.
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-08-20 13:55:002020-12-20 18:38:20Too Late To Become A Web Designer in 2020?
This is the page that takes unknown people and transforms them into known users, and we at future. We have a ton of these pages and we’re going to be honest. They all stock. When I first stood our website up in the future, I needed to get things up and running really really quickly within a matter of weeks, so I customized the stock beam that I bought online and threw up a really really quick before it press website.
Now, over time, the site has been added on to it’s been patched, it’s been fixed, it’s been broken and, to be honest, it’s really time to pay this site some some attention, it’s time to show our digital homes love. Basically, what it boils down to is. We have outgrown what we have so we’re going to cover this overhaul. This complete site overhaul, really in-depth on this blog, but but before we get to that, I am revamping all of our inbound marketing stuff and the first thing on the list is to revamp our download pages.
So I’m going to take you guys through my process of redesigning a single web page. This process is quick, it’s easy! It’s down-to-earth and you guys can take my tactics and my approach and apply it to your work pretty much immediately. This is going to be a multi-part series, but today I want to cover basic user experience, design and wire framing there’s a lot of different ways to skin this cat. There’s there’s a lot of different ways to design user experiences, but every single time I always start off in the sketchbook.
Now before drawing anything, I like to figure out a few things. I just write a simple list on one side of the page and I look for answers to four prompts now. These prompts are our goals, the user goals, questions to answer and emotions to invoke now to answer these prompts I just jot down three or four bullet points under each one. This does not have to be fancy, especially if this is your first pass at the page.
I always say that the first asset at a website is always an educated guess, it’s okay to guess, just make it an educated guess. Once I have all my bullet points mapped out, I start sketching a basic wireframe. The question always comes up. What comes first? Well, the thing that comes first is an intersecting goal. If you have a goal that both your users need to accomplish, and your website needs to accomplish from a business perspective or the site owners perspective, that intersecting goal should always be represented.
First, on a website, in our case, the goal is to get a download. The users are coming to this page because they want to download something for free and we want to drive those conversions. So I’m going to prioritize the form above everything else and that’s the first thing that goes on the page. I also want to make sure that there’s an easy-to-read summary on the page, just in case there are those people out there who don’t read.
I don’t know you’re out there now once that first goal is accomplished, I want to start filling in content that fills in and answers the rest of the questions and the rest of the goals. In our case, this is educating the users you guys on what this download is and what you get. We also want to make sure that we’re answering all of the users questions or what we’re guessing the user would ask. It’s also really helpful to make sure that you keep in mind what assets you have at your disposal now.
Assets are images, articles illustrations, the creative things that make the website pop, and I know that we just finished shooting a promotional trailer for this download. By the way, this download is the first meeting worksheet it’s a fantastic resource to send magenta for that. First meeting with the client, which I got who’s, the link go check that out so because I know that we shot that article.
I know that I need to use it. I wan na make sure that I have space for that article on the page. Now. Remember you can put anything you want on this wireframe anything any idea that bubbles up in your head, but you want to make sure that you remember that somebody has to make this stuff. You know throwing 97 images on a webpage might not be the most effective use of your time. So you want to keep that in mind, make sure that you have those assets kind of in your head as you’re putting them down on the paper now.
I know that I have this article, but I also know that I want to do a couple of new mock-ups for this template and so I’m going to make space for those images in that article. I also know that I want to make this diagram. That shows the process of making a sale and where this kind of fits in in the process. So because I know that I want to make that stuff, I want to make sure that the page long story short don’t go crazy with photos and articles.
If you don’t have them make sure that you’re using the assets that you have or that you can make my life is dying here now there are you symbols that I use all the time larger headers are written out. If I can think or brainstorm of a really catchy title smaller headers are there these like narrow, rectangles that are really wide and short, and then text is usually just straight lines that are grouped together.
Articles looks like a box with a play button inside it’s pretty self-explanatory and then images it’s another box, except this time it has a big X across it. I mean you guys get the idea. You can kind of see the site come together in the sketch. You just want to make sure that you’re using the same symbols so that later on down the road when you’re looking at this thing four months later and somebody asks you hey well, what’s supposed to go there, you actually have an answer once I have all the Content mapped out on the page.
I go back to my list and I make sure that every goal and question has been answered. I literally go through and start checking things off and labeling these sections on my wireframe. This doesn’t have to be pretty. This is not a showcase of your sketching abilities. This is just a rough sketch, the wireframe of a potential webpage that you’re redesigning so just work fast and efficient, and get your thoughts on paper as quickly as you can.
That’s why I love starting in the sketchbook because of the sketchbook. This is where creativity is born and you just don’t get that same feeling that same vibe that same freedom from working on a computer and I’ve done it a whole bunch of different ways. With those wire framing kids throwing my own wireframe, I use the mobile apps for wire framing and nothing compares to pencil and paper. So once I’m happy with the basic wire frame in a sketchbook now it’s time to take it over to the computer next time we’re going to cover how to create a digital wire frame in a program like Adobe XD.
If you have any questions or want me to do a deeper dive of anything that I covered in this article, please let me know in the comments section below I cannot to read that stuff. I love when you guys, interact and I’ll be stocking the comments for a few weeks months, hours days as always guys. I want you to go out there and crush it. You got this like subscribe. We love you we’ll see you next time, oh and by the way, by the way, turn on that little Bell notification: this is a new blog and I don’t want you guys to miss any part of this series so make sure that you’re subscribed make sure that You hit that Bell so that way you get notified when new articles pop up – and you don’t miss a second of this thrilling website, we’ll see you next time.
It’s going to be crazy, let’s rock n roll all right. So, let’s dive deep into the first website. This is a website called router lab and, as you can see, when we were loading, it there’s kind of a bubble here that floats around and actually you can interact with it and you can see when we’re scrolling, not sorry to burst your bubble.
So let me scroll down first and give you the experience they’re talking about making thanks that make you think and change is going to happen. So obviously, there’s something here with social change with you on our side will will be even louder and, as you can see, when we’re scrolling down the bubble, kind of gets, bigger and bigger, and at some point it says, list burst the bubble and you can see That the bubble is burst actually when coming down here, so there is actually a bursting experience here.
So, besides the fact that it’s cool and let’s burst the bubble again here – it’s bursting here BAM. So not only is this really visual cool and really kind of a cool experience to interact with, and it’s very very playful. What I really love about this beside that it’s beautifully done is that they’re using this gimmick, a lot of website use these kind of effects. Just to make something look cool, but here they’re using it to send a message right.
The whole message is here is bursting the bubble and they’re using the bubble as kind of the visual element. But the point here is that they’re, using this to send a message of you need to step out of your bubble. So I think this is a really great way to use these kind of interactive playful things and cool JavaScript effects, hovering over your text and everything. But to send a message which I think is really really cool.
I do think it’s kind of weird how they put the signup form here on the side. I’r not sure I would do this way, but it is pretty cool. You can see that it was designed by IDI, which is an agency, I guess, from from Australia by the URL, so great job edy. What I really love about ad this agency is we build the best brands and websites just ask our moms, and then you click here and you get testimonials from their moms, which I think is just hilarious.
So congrats had really nice job on the rouser website. Alright next website is the greta the year of greta. Maybe you have seen this and you probably know Greta, who is this young child who is kind of advocating for environmental change and everything and in in a way this website is basically you scroll through a timeline of her basically history, and you can see that you’re Going back here and you can see the mount months changing and at any point you can just stop and read some article of her and so basically, basically, this website is a timeline website and I think we’ve seen along the way, a lot of timeline websites, but They kind of use this 3d scrolling down kind of feeling, like you’re, going through a tunnel here with these articles coming from the bottom, which I think is a really cool experience and a cruel scrolling experience kind of use of a 3d.
I don’t remember what they call this technology of where you can kind of live, live, render the 3d element, but I think it’s done pretty cool and this website was done by superhero cheesecake, which is an agency. I think they’re they’re from Amsterdam, but I’m not really sure yeah they are from Amsterdam, Amsterdam. I have some good designers, so Congrats superhero, cheesecake, really nice work on the Greta side next website that I really really loved.
Is this P link, which is a website that uses 3d? Now I love the use of 3d and I use it myself and you can see that it kind of gives you this kind of a quick article that really supposed to show you that payments become really really fast like a spaceship spaceship. So they’re. Using this metaphor and combining it with money, which I really like so this is, this is really cool and they use this 3d in a playful way, together with other kind of interactive, as you see the these things pop up here and there also yeah.
So again, I really like how they’re using this metaphor of 3d, but also here when they’re talking about scanning, so they gave you this kind of a scanning experience where you’re actually going and looking for this QR code. Now again, I think that we have seen this kind of a mouse over with you know. Invert thing we’ve seen this effect so many times, and it’s usually just used for coolness, but here they actually made this meaningful because you can scan and you go in.
They created kind of a game for you to look for this QR code, which I think is really nice. I really love the art direction of this. So when they’re talking about all payment methods, they kind of rearrange this in a rainbow type of things. Kind of created the gradient of color. I think this is a really smart way to showcase the information, so there’s a lot of attention to the details here, which I really really like about this.
This website was designed by autumn another agency in Amsterdam, which is pretty weird they’re, usually working in fashion fashion and tech and life style. I don’t really understand how that’s a niche, but obviously super great work autumn, Amsterdam, so congrats on your work next website that I really really love is this website by 5’s content and, let’s see what happens so we take 7 seconds to make an impression.
We do it in five and that’s kind of the meaning of their name, five seconds content. So, first of all, I really like their message and I really like how this builds up, and I don’t know if you’ve noticed, but when I reloaded this actually the colors of the website change every time you load it. So now it’s actually the same color, but I think there is a random color palette. So now it’s going to be a different color.
You see which I like so first of all, I like the message and I like how this builds out and they’re, showing their show real here, but what I really like, when you start scrolling into this website, there’s a lot of layering here so notice. First, it comes kind of behind the text and then it goes over the text and these kind of a layering. Now these this comes up on top of the text in the project that makes us blush.
Now this stays and we go over it. I really love how people use layering and web design to create kind of depth and to create kind of a sense that there’s a lot of things like going on here. So it’s not just one thing: squalled, there’s multiple things scrolling in different times. It’s kind of a I think, a more elaborate and innovative way to do parallax, which is kind of maybe boring these days. We’ve seen this enough, but this I think, is really really well done, so I really like the way that they’ve structured it also with you know the way that they’ve changed their colors.
Everything changes dynamically every time that you reload the website. I really like this and again it’s super like the Met. Oh, I didn’t notice that when you click it oh, I was thought that it was on reload, but actually, when you click the website, it changes color. So that’s even more awesome than I thought, and it’s so nice that they used everything is vector, so they can change the color of everything using the code on a click more mind-blowing that I actually thought great work, 5s content and the last website that I really Like this month is the website of Amanda Braga, which is a fashion designer from Brazil, so know when you’re just exploring here on the heroes that can you get a flash of really cool things that she’s doing, but it’s kind of just like a teaser.
You can’t really look in-depth they’re, just teasing you to dive deeper into the website, they’re, showing you kind of the jewelry really fast, and then the images drops and then you start scrolling down, and basically this is a very textual website. So Amanda is a Brazilian fashion. Designer and when you scroll down first of all, you have this kind of a cool effect that brings in the text, but at the end of the day, this is mostly mostly text, but I think that our direction here is really nice.
The way that they use the colors is really kind of like design oriented from the 50s kind of feel to it. You know the color scheme, the the kind of geometric shapes to it so again, notice how you can take a very, very minimalistic, typographic website, but by just using very good typesetting and good composition of images and good color scheme. You can make a really really beautiful website. Again, it’s very very simple.
Most of it is just a story written by text, but I think this is really really fun to read through and really really great experience for a jewelry design or a personal brand, especially how they intrigue you to get in there and then capture you with the Text this website was designed by Cap’ n, an agency, I think from Miami so congrats on your work, Cap’ n. This is it. Those were my favorite websites of this month’s March 2020 drop in a comment: what’s your favorite website of this month, do you, like this format, do you like to see the website that I like best and seeing kind of like inspiring web design? Let me know what you thought about this format in the comments and I’ll see you on the next article.
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-08-12 13:54:002020-08-14 12:39:46TOP 5 WEBSITES EVERY WEB DESIGNER SHOULD VISIT: Mind-blowing web design | March 2020
It just means that it’s a lot easier than it used every other web design. Blog will tell you to do things like learn coding and programming, and server management or they’ll. Tell you it’s too late to become a web designer and instead we should prepare to bow to our AI powered robot overlords.
I’r not going to tell you any of that nonsense, although the jury is still out on those robot overlords. Instead, I’m going to share a simple five-step process. This process will get you prepped and ready to start your very own web design business in no. That is, if you actually follow the process to a team. Let’s start with number one pick a web designer. The truth is that the barrier to entry for web designers has never been easier.
The web design process has been dramatically streamlined with the rise of drag and drop website. Builders. At this point, there are literally dozens of website builders available to you for the purpose of simplicity, we’re going to limit our options to the 8 most commonly used website. Builders, keep in mind that nearly all of these website builders have a free trial version, so try them all out for yourself and figure out, which one makes the most sense for you.
There are no wrong choices here. It just comes down to personal preference. I’ve ranked these in no particular order, but I will share my personal opinion of each one, as we took a long time, let’s dig in first off. We believe I have a soft spot in my heart there, a big reason why I now have a successful web design business today. How is right, where you are now when I first started out on my web design journey.
I knew nothing about coding and programming servers and nonsense. I didn’t even know anything about the fundamentals of web design, things like user experience, performance, optimization and clear calls to action, but I knew small business owners were desperate to get online fast and affordably. We’ve Lee gave me the tools I needed to learn the basics of web design without worrying about all the technical stuff.
I used Weebly to start from zero working. My way up to dozens of clients builds and hosted on their property. Eventually, as my knowledge experience and skills improved by outgrew, Weebly and transitioned to WordPress, plus Elementor, but if you’re a complete noob like I was Weebly is a great place to start your web design journey. Our second website builder is Wits. Wix is easily in the top three most popular website builders.
They went on a commercial tear a couple of years ago, but since then, I’ve been rather silent, probably because they’re content with the tens and millions of sites they host with regards to their products. From the limited experience I have with it, it works just fine. My main issue with Wix is: there are parent performance issues many websites have seen built with it. You don’t seem to load very quickly.
Of course, that may not be an issue with Wix itself, but rather the people who built it. Don’t blame the tool and blame the man wielding it. Another big concern is the fact that you can’t seem to change themes once you’ve begun building the site. If you choose to change the theme, it resets everything forcing you to rebuild from scratch. That’s a problem for me. The third website builder is Squarespace.
Surely you already know all about these guys, they’re everywhere, podcasts youtubers, blogs, billboards TV radio in your shower, wherever you are Squarespace, will find you. I personally find Squarespace to have a very limited and boring aesthetic with their website templates. It actually drives me kind of crazy. They market themselves as the be-all end-all of website builders for all types, but most of the examples on their website never stray far in the hipster fashionista Instagram influencers I’ve, but they do have idris elba in their corner, so I’m sold.
The fourth website builder is Shopify. If you’re doing e-commerce Shopify are the guys freedom, Shopify have mastered the art of selling things everywhere and not just your website either. Shopify will help your clients and sell their products on their website. Blog social media chat box, retail stores and more and shot a fight, easily integrates with the myriad of apps and platforms, making things like shipping payment processing and order, fulfillment and breeze.
You could even argue that they pioneer the entire drop shipping business. Thanks for the drop shipping bros and my youtube ads Shopify. They also have a robust partner platform with multiple blogs for web designers to build their business offer. If your main clientele will be ecommerce businesses, you simply cannot ignore shopping. The fifth website builder is WordPress. WordPress is the king of websites so much so that over 30 % of all web sites are run on WordPress and for good reason.
WordPress can be whatever you want it to be. It is a fully functional CMS, with an endless array of plugins to customize your website to your exact needs. That, of course, comes with some increased complexity, but if you can master WordPress your opportunities for running a successful web design, business will expand drastically. In addition, there are a handful of CMS plugins that make building websites with WordPress easier and more fun.
Let’s take a look at these options: our sick website builder is wordpress plus Elementor Elementor was a game changer for wordpress designers and the website industry as a whole. Never in my life have I seen a product that makes designing gorgeous websites so easy and so stinking fun and that’s such a ridiculously, affordable price too, if it’s not obvious yet WordPress plus Elementor, it’s what I use to build all of my websites these days.
I love Elementor with everything in my being, and the developers continue to make it better every month with new releases and updates and they have a free version. So you have no excuse not to try it out for yourself and see what I’m talking about. Our seventh website builder is wordpress plus beaver builder. I’ve never used beaver builder before, but I hear good things about it and what I particularly love about it is that it’s tiny, beaver builder is made up of three guys just doing something they love.
I strongly identify with that. You could argue that beaver builder is the OG Elementor. It was around way before, and its founding principles are very similar. Elementor is simply built off of Beaver, build and made something better. The student becomes, the master, our eighth and final website builder is wordpress, plus digi. Now Divi has been around a bit longer than the rest for beaver builder in Elementor Divi popularized the idea of integrating a simpler CMS on top of WordPress, but some would argue that Divi has become a bit of a dinosaur in this day and age over time And has slowly become bloated with unnecessary features and integrations.
However, the big players always have their fair share of detractors and here’s Diddy is still one of the most popular CMS in the world, so don’t write it off too quickly. Step number two in our process consume. All of the content around that tool, so you picked your go-to website builder now it’s time to learn everything and anything about blogs. Youtubers, podcasts books, courses and much more are all available for your consumption, much of it for free.
It’s time to lock yourself in your mom’s basement and get too nerdy for a full, complete list of bloggers and youtubers to follow. Based on each of these website, builders check out the link to my blog post in the description step. Number three choose a web design. The web design industry is ultra competitive. It’s going to be very difficult for you to stand out from the pack and carve your own piece of the pie.
One of the most tried and true marketing strategies is to identify a low competition web design. Niche then make yourself the expert of said niche. It’s not enough to simply tell people that you make beautiful websites, millions of web designers, do the exact same thing it’s time to get those creative juices flowing when it comes to web design Nations. There are basically two categories: one character, niches and two industry nations still confused.
Here’s some ideas for you: some ideas for character, niches, conclude fast, affordable, premium, lightweight mobile, simple, complex, minimalist, animated, 3d, even VR, and some examples of industry niches can include restaurants, dentists, optometrists gyms landscapers, plumbers, roofers, surfers bloggers, social media, influencers startups, schools, accountants, cleaners and on And on and from here you can reach down even further, for example, why stop at building websites for bloggers? Why not build websites for personal finance blog? Do you build websites for restaurants, or do you build websites for Chinese restaurants, websites for social media, influencers or websites? For Instagram influencers me Shing down will help you target ultra specific audiences and rank higher for Less competitive keywords.
Remember it doesn’t mean you have to build websites for only this one type of client for the rest of your life. Niching down is just a great way to get your foot in the door and build a solid foundation from which to springboard to your next niche in the future. And you can mix and match your niche as well combining character niches with industry niches to create a hyper targeted call to action is great fun.
Here’s a few quick examples: simple lightweight web design for Mexican restaurants, powerful minimalist web design for tech startups mobile focus, web design for yoga studios. The possibilities are endless. Step number four practice practice practice. If you picked your favorite website builder consumed all of the content, you can find about that builder and chosen a specific niche for your web design business.
Now, it’s time to get to work. When someone decides they want to learn how to play the guitar. They don’t expect to become Jimi Hendrix overnight, so why is it that so many wannabe web designers are so impatient learning web design? Is the exact same as learning anything else? It takes time, patience, commitment and consistent practice. Fortunately, it doesn’t have to take anywhere close to 10,000 hours to master web designer.
Thanks to many of the tools and resources we looked at before one of the simplest ways to get in some good practice and possibly even make a few bucks is to use Google Maps to find web design cards. Here’s how you do it get on Google Maps and pull up your neighborhood then find all of the restaurants. Dental offices, retail stores, nail salons and barbershops check out their profiles in it. You’ll find a link to their website or you won’t find a link at all, which is even better.
That means they don’t even have a website if their site is garbage, pull as much of the content from it as you can then rebuild it for them. No, I’m not kidding, then once you’re done, email them with a link to their brand spanking new website and ask for their feedback if they love it, sell it to them by using this method, you’ll be able to gain tons of valuable experience, building websites for your Specific niche, eventually you’ll streamline your process to the point where you’ll be able to build an entire new site in just a few hours and finally, step number five sell yourself as an expert of that tool.
This is the part most of you are going to hate. The most I know I do sales, it’s one thing to have the skills and expertise but being able to convince others that you have them is an entirely different challenge. I know so many skilled and experienced web designers that are struggling to find work. Usually it’s because they haven’t spent enough time crafting their brand story. Think about it. There are millions of web designers for your customers to choose from.
Why should they choose you? Why should they work with you? What do you bring to the table? Who are you, you might think, you’re boring that you don’t have an interesting story to tell you’re not, and you do telling a compelling a story and integrating it into your brand is one of the most important ways to differentiate yourself from your competition. Give some real thought to your brand. What story do you want to here? Are some books to help you get started with your brand story? Marketing spark by Mark Evans story driven by Bernadette dois and steal, like an artist by Austin, Kleon I’ll link to them in description below also build that portfolio the hardest part about starting a web design.
Business is getting those first few clients, as it turns out. People are rather apprehensive about hiring web designers with zero proof of their skills and abilities. Go figure getting web design. Clients when you have no portfolio will be your biggest challenge. The good news is, it only gets easier from here. The truth is, you will likely need to do some work for free or at a steep discount. This takes all the risk out of hiring a brand new web designer by offering your web design services for free.
You accomplish six things, one you stand up in the crowd, because no one is offering free web design. I guarantee it to you, alleviate all of your clients, concern and anxiety by hiring an experienced web designer three. You build an awesome website that you can now add to your portfolio, drawing in new future business, for you gain a new relationship to add to your network for potential future referrals.
Five, you get a five star review to add to your Google Places profile and six. If you don’t get a five star review, you get valuable feedback on. Why not and improve for next time. Trust me. There is a lot of value in all that, so don’t balk too quickly at the idea of working for free in order to build up that portfolio. Finally, take action. Congrats you made it to the end, which is honestly saying a lot.
These days recap: here’s your five-step plan to the learning web design to fast 1, choose a website building to consume all of the content about that website. Builder 3 pick a web design piece for practice. Practice practice and 5 sell yourself as an expert in your niche. It’s a super simple plan, the rest of it just takes hard work and commitment. Nothing is going to happen if you spend every evening reading five hours of Netflix and refreshing your Instagram feed, I don’t want to hear any excuses.
Gay. Alright, I’m done talking. Let’s get to work,
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-08-08 13:55:002020-08-09 16:51:52How to Learn Web Design FAST in 2020 (The 5-Step Process)
What’s up everybody, I’m Jesse Showalter and today we’re going to figure out those differences between a web designer and a web developer and it’s a great career to be kind of pursuing. But when you’re first starting out, you kind of don’t know, maybe where you fit, and so there are some people that are kind of both and there is a lot of crossover between the two fields.
But I want to talk specifically about the roles, the tools and the expectations of the two different kind of fields and then, which one is the best kind of fit for you. Let’s, first start by kind of defining the two fields will start with web design. I’r going to use a car analogy, a web designer would be the person who kind of designs the aesthetics of the car. What the car looks like what the car looks like on the exterior on the interior, how it feels all of that stuff.
The experience the aesthetic that’s a web designer the web developer would be responsible for all of those internal kind of components like the engine and the transmission and and and all the other parts of the car that you don’t even realize, you’re using when you’re using it. That’s the web developer it makes it function makes it move, makes it go, but just like an engine is useless without the car and the car itself is useless without the engine.
The two have to go together. Inevitably, they’re going to go together, they’re either going to be the same person a web designer and developer or they’re, going to be working in the same team and they’re going to utilizing each other’s strengths and skillsets to accomplish their goal. I’r going to first start by talking about design, okay, so a web design or design in general. The tools of the trade for designer are going to be aesthetic tools like Photoshop or sketch interface, design, tools, user experience tools, but these would be the tools that have the aesthetic of any sort of design, whether that’s print design, web design, product design whatever it is.
These are going to be the things that you can actually create things to look at okay, so visual tools, knowing how to use those tools, and so it’s important that you know those tools. It’s important that not only do you know the tools, but you know some of the principles and the foundations of design, so we’re talking about color and space and line and form and all of those things. This is the realm of a designer, but but yes, also web designers, now web designers don’t need to know how to code you can be.
I know plenty of designers that are purely designers and they work at web agencies. Marketing agencies they do freelance and – and they themselves do not code, okay, but knowing what code is and how it kind of interacts will help you kind of better design. For the medium. Does that make sense like like knowing what’s possible and what’s not possible, so knowing you don’t have to code, but knowing some ideas about code what’s possible, what’s not possible what needs to be documented? What needs to be explained? That’s that’s the signs of a good web designer web developers and and all developers work with code.
The web developers, specifically, I would say, spend the majority of their time working with. What’s called client-side code, okay, so client-side languages like HTML, CSS, JavaScript and there’s even some JavaScript frameworks like react or node or backbone working with those three: that’s the bread and butter of a web developer. Now a developer in general learns and speaks coding languages. So if you kind of drip into back-end development, which a lot of web developers do, they would speak more server-side languages like PHP or Ruby and and on all those different server-side kind of technologies.
If you want to be a web developer, specifically, you probably need to know your HTML and CSS and your JavaScript, like that’s your bread and butter. You need to know that and have that, like Pat, and you probably want to have a good idea – or at least some experience with server-side languages like Ruby or or PHP or whatever so that’s kind of the realm of a web developer. You spend all of your time in a text editor in a code editor, but that is the realm of a web developer.
It is not visual, it is taking the visual and making it functional. Remember like engine and car. Ok, let’s talk day to day kind of like operations, the designer is going to spend a lot of time, looking for inspiration, making visual sense and trying to visually communicate the message of the brand or the company or the site itself, they’re going to spend the majority Of their time, doing, visual things and, and that can be anything from wire framing – to mood boarding to creating brands and logos and websites and animations, and all that kind of stuff you’re doing everything and anything that is visual for a web developer on their day to Day, they’re going to be spending time in code, they’re going to be receiving the visuals and the documentation from the web designer, and they should be working in tandem.
They should be working closely not in a silo but closely with the designers, to make sure that the functionality is everything that the site or the client or the project demands. But it’s also on par with the styles that the designer has handed over. Those deliverables that are handed over need to be executed by the developer and so they’re going to be spending the majority of their time in code, creating branches in github.
We’ll talk more about that in different article, but basically creating and making the vehicle move per the restraints of the designer and the designer is designing things, / restraints of the client or the project so which one is the right field for you. Should you start pursuing design, should you start pursuing development? Should you start pursuing both I’m going to give you a couple opinions of mine on how to kind of decide where to go from here so which one is going to be for you? My opinion is this from stick it from somebody, who’s done both and does both.
If you are a person who enjoys the visual aspects of things and and remember, design is problem-solving. It’s just it’s not just making pretty things, but if you’re somebody who likes to express your problem-solving through visual modes of solution, like III, think I could make sense of that using color, I feel like I could make sense of that using typography and photography and all Those things, then, then design might actually be more for you, okay, somebody who likes to make sense of problems that way, if you are a person who likes to do puzzles, face down if you’re a person who likes to analyze things, and if you were the kid That liked to take your remote-control car apart and see how it worked.
You might be the person who’s, a developer just say: maybe dabble try a little bit of both of them out and see which one suits you and then follow it and here’s. I think the good news is none of this is final, because these things are so closely related in the creative or tech kind of world. You have the ability to change your mind. You have the ability to kind of flex and decide where you want to be.
Where you want your kind of space to be, I started out doing thinking. I want to do nothing but print design and package design, and I realized very quickly. I hated math and I moved over to digital design and now I do primarily interface design, experience, design and front-end development and that’s what I really really love to do. But it took me some years to figure it out. So I hope this article has really helped in some way for those of you that are just starting out trying to figure out which one would be for you.
I think both of them are awesome careers and we’re really really excited for you to start down. One of these paths, both those of both of these paths, whatever it is, that that kind of floats your boat and suits you. I just hope whether you go down the path of the design or down the path of like development. I just hope that you enjoy yourself, because this is really a career that has a lot a lot of people to escape jobs, that they hate and be part of something and actually create something and make things that they really care about either way.
You are a maker of things and that’s huge, that’s just so huge, and so I just really want to encourage you today to be making awesome stuff be designing, be developing. However, it is that you make make amazing things and do it in excellence. If you have any questions, please let me know down in the comments or if you want clarification on anything, I would love to answer. Your comments also make sure you subscribe to this blog and like this article and maybe even hit that little Bell icon down below.
So you get notifications when a new article comes out. Hope you guys are having a great weekend talk to you guys soon. Aloha
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-08-04 14:08:002020-08-09 16:49:54Web Design vs Web Development | What’s right for you?
We may request cookies to be set on your device. We use cookies to let us know when you visit our websites, how you interact with us, to enrich your user experience, and to customize your relationship with our website.
Click on the different category headings to find out more. You can also change some of your preferences. Note that blocking some types of cookies may impact your experience on our websites and the services we are able to offer.
Essential Website Cookies
These cookies are strictly necessary to provide you with services available through our website and to use some of its features.
Because these cookies are strictly necessary to deliver the website, refusing them will have impact how our site functions. You always can block or delete cookies by changing your browser settings and force blocking all cookies on this website. But this will always prompt you to accept/refuse cookies when revisiting our site.
We fully respect if you want to refuse cookies but to avoid asking you again and again kindly allow us to store a cookie for that. You are free to opt out any time or opt in for other cookies to get a better experience. If you refuse cookies we will remove all set cookies in our domain.
We provide you with a list of stored cookies on your computer in our domain so you can check what we stored. Due to security reasons we are not able to show or modify cookies from other domains. You can check these in your browser security settings.
Google Analytics Cookies
These cookies collect information that is used either in aggregate form to help us understand how our website is being used or how effective our marketing campaigns are, or to help us customize our website and application for you in order to enhance your experience.
If you do not want that we track your visit to our site you can disable tracking in your browser here:
Other external services
We also use different external services like Google Webfonts, Google Maps, and external Video providers. Since these providers may collect personal data like your IP address we allow you to block them here. Please be aware that this might heavily reduce the functionality and appearance of our site. Changes will take effect once you reload the page.
Google Webfont Settings:
Google Map Settings:
Google reCaptcha Settings:
Vimeo and Youtube video embeds:
Other cookies
The following cookies are also needed - You can choose if you want to allow them:
Privacy Policy
You can read about our cookies and privacy settings in detail on our Privacy Policy Page.
:max_bytes(150000):strip_icc()/web-designer-developing-responsive-website-layout-946928244-5bcf7fe246e0fb00513cc772.jpg?w=1500&ssl=1)
