How To Make Your Client’s Budget Work For You - Vanseo Design

---

How To Make Your Client’s Budget Work For You Posted: 28 Aug 2014 05:30 AM PDT How do you get your clients to understand that their website is an investment? How do you get them to see their site as more than something they pay for only once and then leave alone? Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes A number of posts here the last month or so have been talking about the web design industry and I’ve possibly left something of a depressing mood by asking if the web design industry is dying. I wanted to offer some positive thoughts for a change. I want to talk about clients and budgets and the benefits of getting clients to see their site as a business investment. A few weeks ago I came across an article on Smashing Magazine. by Trevan Hetzel on Selling The Value Of The Web To Small-Town Clients. Trevan offers some interesting thoughts and the article is worth a read. It’s pretty much what the title says. It offers several points you can bring up with clients to help them understand what a website can do for them and why it’s worth their investment. Clients and Budgets One thing I’ve learned being a freelancer for the last few years is that what clients want typically exceeds their budget. I’m sure a few of the people who approached me over the years were just trying to get me to do more work than the price justified, but most have been honest people who simply didn’t know what a website costs. Why should they? They know what they like and what they see on other sites that they want. They know how much they can reasonably spend. What they don’t know is how much work goes into each of their requests. Again why should they? A common question I get is “is this possible: in reference to a site request. My response is always the same. Everything is possible. It’s just depends on how much you’re willing to spend A large part of my job has often been figuring out how I can give clients as much of what they want as possible within their budget. To do that you have to listen between the lines. You have to listen for the things they aren’t saying directly. You have to listen for what your client truly needs. What are the goals for the site? The business? Listen closely because your clients won’t necessarily use the same terms you do to describe things. Not long ago a client asked me about responsive design. I was excited. I didn’t think it would be a term any of my clients would know. It wasn’t until we were deeper into the project that I discovered what my client really wanted was for the PDFs availale for download through the site to be readable on an iPad. That was it. Don’t assume your clients are using terminology the same way you are. Ask more questions and dig deeper into what they mean. You need to really listen and hear what the client isn’t saying. You have to ask a lot of questions, even when you think you know the answer. Once you understand the needs, wants, and goals of your client, you then prioritize all their requests according to their goals. Prioritize from the must have requests to the nice to have to the won’t help with the goals. With a list of priorities I think through everything I can do within budget and offer some thoughts about when we might work on the rest along with some rough ideas of the cost for the future work. I don’t give a price break down per each request. I tend to underestimate the cost of some things and overestimate others in a way that balances over a project, but can be far off on specific features. I’ve found when pricing granularly down to each request, clients inevitably choose to work on all the things I underestimated. It’s Murphy’s law in action I think. Instead I list what I can do within budget and offer the rough estimate for the rest of the work. This usually leads to a bit of negotiating over both the price and what I’ll do for that price. Not being so granular helps with these negotiations. With some clients I’ve found there’s a maximum amount they’ll ever spend at one time on one project. It’s all they can reasonably pay at any give time. With these clients I figure out what that max is so that I can group future requests into bundles never costing more than that max amount. We’re more likely to agree on price and features this way. My clients get as much as possible with each project and I get to hold the project to something reasonable for the price. A Website is an Investment When I was first starting out I might have turned some potential work away because the client’s budget and my costs were so out of line with each other. I’ve learned over the years not to turn these people away. Odds are you won’t be able to get them to increase their initial budget, but you can get them to understand they can’t get everything they want with that budget. It’s ok that they won’t get everything. You can give them the best site you can within budget and you leave the client with a list of things they’d still like to add to the site. You can offer them a plan for when you can do the work, how long it will take, and what it will cost. You have a built in excuse to contact them at any time and see if they’re up for the next phase of the project. Do whatever you can to get across to your client that a website is a serious investment. For many small businesses, it’s the best investment they can make and yet so many small businesses still their site as little more than a brochure. They need the about page and the services page and a way to contact them, but that’s all they see. They see their site is something they pay for once and leave alone. Change their minds. Get them to see their site as part of their business strategy and potentially the best investment they can make for their business. Explain to them how a website is a great marketing tool is good for building relationships with customers is good at establishing trust and authority can serve as a direct sales channel can serve as a lead generation tool can lead to unexpected opportunities Again you have to get them to see their site as an investment and that all the things a site can potentially do cost money. Help them see all the things they want aren’t a single project or payment, but several projects with several payments over a longer time frame. Let your clients know that not everything a website can do makes sense for them specifically to do. Help your clients define their web strategy. It’s more value you provide and can charge for and you get to share your expertise with someone who can use it. Help your clients define their online strategy so you can both prioritize what they want done and how much can and should be done within their budget and how much the site can wait on for a future project. Doing the work over a longer time frame also gives you more flexibility in pricing plans. With clients you trust to pay, you can do all the work now and charge monthly over time. You might agree to a weekly charge with a weekly definition of what work will be done that week. The project in those cases will be done when it’s done, though I find some clients are mistrustful of this, since they won’t know the full cost at the start and might think you dragging out the work to increase the final price. On your end if you write code modularly as possible it can help keep your costs down. It allows for quicker and more flexible solutions that are easier to maintain. It leads you being more productive and being able to get more done within your client’s budget or save yourself some time. Closing Thoughts Clients often have a limit on their budget that doesn’t meet the cost of the work they’d like done. They create their list of requests without price in mind. They don’t know what those prices will be and there’s no reason to expect they should. Some will see their site as a one time thing that they pay for and never have to touch again. Change the perception of what it means to design a website and get your clients to understand their site is an investment. Show them how everything they want can be built in parts, in layers. Make clear their site will require maintenance as well. When a client wants more than what they can pay for, don’t turn them away. Help them prioritize their requests so you can do as many as possible within budget and set a plan for when and how you can finish the rest. Help your clients understand where their site fits into the larger context of their business. Get them to see the investment. If you do, you’ll be able to move projects from a single large one with a single large payment to recurring payments (albeit smaller ones) that you can collect weekly, monthly, or quarterly. Your client gets the best site their budget affords and you aren’t having to do more work than you should to close a sale. Download a free sample from my book Design Fundamentals. The post How To Make Your Client’s Budget Work For You appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

What I’d Tell My Younger Self About Learning Development As A Web Designer - Vanseo Design

---

What I’d Tell My Younger Self About Learning Development As A Web Designer Posted: 25 Aug 2014 05:30 AM PDT You understand the fundamental principles of design and you know how to build web pages with html and css. Now what? Where do you turn next to expand your design and development skills? The last few weeks I’ve been offering advice to my younger self on how to go about learning web design. I talked about the graphic side of web design and then talked about learning html and css. Today I want to look at what comes next. I’ll share some thoughts about learning JavaScript and then server side languages and databases. I’ll offer what I can about a few additional things I think worth learning, before finishing with some closing thoughts on this series. Please know in advance that my expertise isn’t really in what I’ll be talking about today. It’s not that I know nothing about today’s topics, but I’m hardly an expert. I do think I know enough to help my younger self or someone like my younger self, but we can find out together. JavaScript At some point in your web design career, you’ll either want or need to add some behavior and interaction. You’ll want to explore what JavaScript can offer. Everything starts with real world problems and not with the technology Stay away from libraries like jQuery at first. Learn some basic JavaScript before jumping into a library. Learn how to do a few things like using JavaScript to modify the classes on an html element. A library like jQuery is easier to learn and use initially, but you’ll be better off understanding the basics of the JavaScript language itself. Once you understand the basics of the language and programming in general you can learn and use whatever library you find useful. Libraries handle low level details that can be a pain to code. The thing with a library is the more you use it, the more dependent you are on using it again and again. The way to break that dependence is to understand the basic language. You may never want to code those low level details, but it’s good to know you can if you have to. There are also plenty of things that can be written more simply without using a library. A library is another asset for the browser to request and you don’t always need a 50kb library to write what might be a half dozen lines of code. I know any programming language can be scary, but JavaScript will make it easier to jump in because it compiles in the browser. That means you can see your code or changes to your code near instantly. It’ll feel more like learning html and css than learning to program. You can pick up a book on JavaScript (I recommend JavaScript: The Definitive Guide) or find some tutorials online. If you prefer you can find some example code online, make it work on something you’re developing and then modify it to suit your needs. You don’t need to be a JavaScript expert to be a web designer, but it’s worth knowing the basics and it’s worth being able to read the code of others. Some concepts will be common to most programming languages. Concepts like: Programming structure Variables Operators (+, -, etc.) Boolean logic (and, or, etc.) Comparison operators ( ==, <, <=, etc.) Conditional statements (if then else, while, for, etc.) Most important you’ll learn how to think logically and create algorithms for accomplishing a task. Combined with the concepts above, an understanding of algorithms will apply to any programming language you later want to learn. The main thing that will change from language to language is the syntax. It’s similar to how learning a new spoken language doesn’t affect your ability to think. Every language will help you express your thoughts. They’ll do it using different words and a specific language could even impact the thoughts you have, but in general the language is just a new syntax for expressing the same thing you could express in other languages. Keep in mind that css can do some behavioral and interactive things. For example you can change css on hover or when an element has focus. You can also simulate click events through several techniques. I’d look to css before JavaScript where you can, as it’s usually a performance benefit to choose the css way. Look to JavaScript when you need more control or more granular control than what css offers. Server Side Programming and Databases There will come another point in your web design career where you want more functionality than html, css, or even JavaScript can provide and you’ll turn to server side languages and databases. There are several server side languages from which to choose. I made the choice by paying attention to the job listings I was looking through at the time and noticing different companies were looking for skills in different languages. My longer term goals were to be a freelancer so I paid more attention to the skills being asked of contract workers. That path suggested php as the server side language and mysql as the database. The language you choose will impact which database you also choose. Most languages should be able to work with most databases, but some are naturally paired. For me (and likely you) the choice will be php and mysql. Much of the web is powered by their combination. While my guess is your choice will also be a php/mysql combination, it doesn’t have to be. Identify which languages tend to be used with which databases and pick a pair to learn. Again you aren’t limited to php and mysql, though you’ll notice the two stand behind much of the web as it exists today. You also aren’t limited to learning one pair. You can learn more combinations later. There’s only so much detail I can suggest here as I know less about backend development than front end development, but I will tell you that a server side language is the first step toward creating templates and themes and together with a database they’re a step toward content management systems, and ecommerce solutions, and more advanced site features in general. With databases learn how to read from and write to tables in the database. Learn how to read and write from multiple tables at once. Learn how to structure data in different, but connected and related tables. Learn how to do it all more efficiently. At the very least develop a reading level understanding of both a server side language and a database. You’re going to run into them whether you want to or not. Being able to understand what the code is doing is a valuable thing to understand, even if you have no intention of ever modifying the code of others or writing your own code from scratch. Servers We’re veering even further away from my expertise when talking servers, but it’s definitely something to know about, at least a little. You can’t be a web designer or web developer without interacting with servers. From the start you learn to use FTP to move files to and from servers. Your server and your client’s server will go down at times. Often that will mean waiting on your host to fix things, but sometimes you can fix them yourself if you have the access and knowledge. I’ve always been on Apache servers. I’m hardly one who’ll log into the server and interact with it through the command line, but I’m thankful I can create .htaccess files that redirect URLs (my entry point into servers), block suspicious IP addresses, give directives that improve performance and so on. You will interact with web servers so learn something about them. Understand what happens when someone sitting in their living room calls up a web page in a browser. How do the browser and server communicate? A Few Other Things Worth Learning As you work your way through the basics of graphic design, building sites with html and css, learning a little front end and back end programming, and top it off with some knowledge of servers, you’ll reach a point where you don’t need to ask where to go next. You’ll have enough information to feel confident about your own choice of what to learn next. However, there are a few additional things I think every designer/developer should at least explore. css preprocessors—to do more with css version control—for tracking and controlling changes in your work performance—for a better running site security—to protect site visitors Another good thing to do is explore 3rd party tools. For example I typically build sites on WordPress. You might choose Drupal or Joomla or something else. You might find a go to shopping cart and ecommerce solution. Base your choice in 3rd party tools on the needs of your projects. You should also work at writing modular code. Learning to program will help you here. Even if you only want to work with html and css, you’ll find it helpful to understand the basic concepts of programming. The concepts are finding their way into the work you’ll do with html and css. Build libraries of common patterns. Collect 3rd party tools that solve different problems. Create your own patterns and tools. Closing Thoughts I hope you’ve enjoyed this brief series about learning web design and development. I also hope I answered the original question that started it all. I want to leave you with a few general thoughts. Always remember that everything starts with real world problems. Your goal in learning graphic design, html, css, etc. isn’t just to learn the technologies. You learn them to solve problems that real people have. Let that knowledge guide your learning. Learn what will help you solve real problems. I know the feeling of getting started in this industry and I know how overwhelming it can feel when you think about all the things you need to learn. Take a deep breath and relax. Accept that it will take time and get started. You aren’t going to learn everything overnight, but the sooner you start learning, the sooner you’ll have learned what you need to know. When you don’t know where to start with a topic, look to a book or online course that covers the basics, the fundamentals. Look for information that helps give you a sense of context. Gaining context is usually a good first step. Try to gain context through multiple sources. Don’t limit yourself to the opinions of a single source. Learn from multiple sources and use your judgement where they differ. The most important aspects of any subject usually aren’t hard to find. You know what they are. That’s where the overwhelming feeling comes from. Jump into any of them and learn a little. Then learn a little of the next and the next. You don’t have to or want master one subject before moving on to another. All these technologies work best when they work together. You’re going to revisit some topics again and again. You learn enough html and css to do what you need or what you’re currently interested in and then you learn a little JavaScript or PHP or how to redirect URLs in your .htaccess file. Then you come back to css and learn a little more. With each major revisit you’ll see a topic in a new way. First with the eyes of a beginner. Then through the eyes of someone with intermediate knowledge and skills. Eventually you’ll come back to the subject as someone who’s achieved advanced success. You improve your skills and experience and get a little better with each iteration; each revisit to the topic. Another thing that will happen with each revisit is your interest in which subtopics to learn will become clearer. It’s hard to see the finish line when you’re still standing at the starting line, but with each step the finish line is closer and clearer. Always be learning and practicing. Try to do something new on each and every project. Experiment and explore where you can. Do so within the boundaries of the project and not just to explore. Keep in mind that the boundaries between web design and web development are getting fuzzier all the time. Which ever side of the boundary you currently sit on, you’ll advance your career much further if you pick up something of what sits on the other side of that same boundary. I can’t emphasize enough that starting with real problems and building context should be your first steps. With so much to learn it can be very easy to get lost in the details of the technology. You can spend too much time solving technical problems that have little real world use. Web design doesn’t begin with the technology. The technologies are tools to solve problems that real people have. Never lose that context. Download a free sample from my book Design Fundamentals. The post What I’d Tell My Younger Self About Learning Development As A Web Designer appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Why People Love And Hate Responsive Design - Vanseo Design

---

Why People Love And Hate Responsive Design Posted: 21 Aug 2014 05:30 AM PDT The phrase responsive design generates a lot of passion. Web designers seem to either love it or hate it. Why is that? Why is the phase so charged with emotion? Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes While much of the industry is moving to responsive design and the larger change it signals, some still talk about responsive design as though it’s a fad. Others only talk about the issues of responsive design in a way that implies the issues are so great you shouldn’t even attempt to design responsively. Again why do people get so charged up and feel so passionate about responsive design? I think it’s ultimately for the same reasons people were passionate about the change from table-based to css based development and why people will be passionate about whatever the next major shift in web design will be. Design is Decision-Making Design involves a lot of decisions. Responsive design changes many of the things you decide about. The changes could be as simple as having to decide percent or em measurements instead of px measurements and it could be as large as having to decide how to reconfigure a layout at key points from small to wide screen. It’s not just change though. Responsive design opens up the potential for many new decision-making areas. At the same time it removes some decisions that people enjoy making. It’s a normal reaction to resist change. Forced change is never easy. When forced to change, people often hang on to the old way of doing things as long as possible. Inevitably they have to give in to the new, but for a time they hold on to the old. I’m in the group of people excited by the new possibilities of responsive design and I’m just as excited for all the possibilities we aren’t even aware of yet. I’ve said before that responsive design isn’t the only change going on. Changes to how we build layouts in css and an ability to break free of the rectangular underpinnings of css are coming. I think it creates the perception that responsive design extends beyond what it is, which means a perception of even more change and more resistance. Again, design is about making decisions and the reason people have been so excited about responsive design is ultimately because it opens up the possibility of making many more decisions than we previously could. It also creates the possibility of deciding old things in new and better ways. Before you never had to concern yourself with rearranging blocks of content. It was easier that way. It’s easier not to have to think about something. But now that you can decide about more things, you have the potential to create better designs. That’s the exciting part. Any decision we consciously make has the potential to improve the design. Of course, it can also detract from the design if the decision is a poor one. Why People Think Responsive Design is Harder Than it is In addition to the passion, I think the reasons people say responsive design is hard is about the same thing. People are really talking about all the extra things we can now do because of responsive design and how difficult some of those things are. It’s only hard if you do those things. You should do more and go beyond the responsive minimum. You should do things like create multiple versions of an image for different devices and conditions, but you don’t have to in order to create a minimal responsive design. A minimal responsive design is still an improvement on what came before. If all you do is follow the three basics of flexible layout, flexible images and media, and media queries you end up with a better site. Even if you do these three things as minimally as possible, say setting images to have a max-width of 100% and a height of auto, your resulting design will be better than if you didn’t. What makes responsive design more difficult is all the new possibilities, all the new decisions you get to make. The thing is many of those decisions aren’t requirements of responsive design. They’re possibilities responsive designs gives us to make any design better. It’s similar when talking about performance. The performance hit that comes from responsive design is mainly to do with these extra things you can now do. It leads to an unfair comparison with the old way, since you wouldn’t have been doing any of those extra things previously. Why People Don’t Like Responsive Design I’m talking more about the new possibilities responsive design gives us, but it does take some decisions away or declares them less than the best decision to make. Some designers enjoyed making the decisions that are going away or they’re good at making those decisions or maybe they’re just comfortable making those decisions. It can be difficult for some to adjust. For example before responsive the standard practice was to deliver static images created in Photoshop, or similar, as design comps. With responsive design we’re realizing a static comp can’t give the complete picture of a web design. We’re pushing deliverables to the browser. If you enjoy working in a graphics editor this probably isn’t great news for you. It’s not that graphic editors are going away, but they’ll be used less when designing websites. If you like designing in Photoshop it’s understandable you’d be resistant to the change, because something you like is being taken away to a degree. It’s normal to hold on to the thing you like and reject the new thing that’s causing change. Change can be scary. It requires you work to adjust to the change. It throws you out of your routine and comfort zones. This can lead to resisting change and holding on to the status quo. Responsive is a Good Solution for a Difficult Problem The love/hate fest with responsive design will likely continue. Some of it is a normal reaction to change. Some of it is taking a contrary point of view for the purpose of link/click bait. Some people are just contrarian to anything. Much of it is the passion that often comes with change. While the passion regarding responsive design isn’t going away, neither is responsive design itself. If you find yourself on the negative side you might want to reevaluate because responsive design isn’t going anywhere anytime soon. It’ll go away when something new comes along to take its place, at which point some will embrace the newer change and some will hold onto their comfort zone, which ironically will be responsive design. In general, I’m a fan of progress. While I don’t always embrace change and sometimes resist changes I don’t care for, I know change and advances in technology are generally good things. I’m embracing responsive design. I didn’t see it immediately, but it didn’t take to long to see responsive design as a solution to one of the very first questions I had about designing websites. I may have talked about this before, so forgive me if I’m repeating myself. Years ago when first learning web design, I tok some continuing education courses. One particular day in one particular class we were learning to work with tables. I started thinking whether it would be better to use pixels or percents to define the width of the table and cells. It seemed like a question that went beyond tables and to layout in general. Fixed seemed like a good option since if gave you a measure of control. At least until you realize you can never know the available space in which your design would display. That made flexible seem like the way to go, until you realize that available space thing still causes problems. When displayed on a very wide screen, your design could potentially end up as a long and wide string of text. Responsive design solves the problem as it lets you adjust your layout over a range of screen sizes. I’m not suggesting responsive design is the best or final solution to the problem we’ll ever see, but it’s the first viable solution I’ve seen since first thinking about the question. Beyond the fixed and flexible question, I embrace responsive design because I like the new possibilities I see. Sure it’ll be more difficult because there’s more to do, but that’s a good thing. It ultimately leads to better designed websites. We’re going to design with proportion as opposed to size. We’re going to create more flexible solutions that work across more devices and conditions. Responsive design raises the minimum standard for a design because now everything will have to work across devices. As responsive grows in acceptance, this minimum will be raised, improving site design in general. Admittedly I can see the problems responsive design creates, but I have confidence the industry will solve those problems and again think it will open even more possibilities. For example the picture element seems to have gained acceptance with browser makers and before too long we’ll all be using it. It’ll give us the ability to change images so the best one for the given conditions is the one used. Yes, it means more work to create additional image versions and it’s more work adding the logic to choose the right image, but ultimately it results in a better design for visitors to the site. That’s a good thing and worth some extra work. In time we’ll be able to sense many more things about the context under which our designs are consumed. More sensors also means more work, but it means the ability to tailor websites to individuals and use cases. Again a good thing. Closing Thoughts To me this is all simply another step forward in our ability to design and develop websites. I have no doubt something will come along to replace responsive design in time. I also have no doubt new layout options in html and css will replace the options we use today. My guess is I’ll initially resist some of the changes and then embrace those that I think point the way forward. Something will replace responsive techniques, but it won’t change the idea of designing flexibly and dynamically. I’m sure we’ll have these debates again when the next major shift comes along. Some will jump in and embrace the new and others will hold on to the status quo for as long as possible. It happens with every major change. Download a free sample from my book Design Fundamentals. The post Why People Love And Hate Responsive Design appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

What I’d Tell My Younger Self About Learning HTML/CSS - Vanseo Design

---

What I’d Tell My Younger Self About Learning HTML/CSS Posted: 18 Aug 2014 05:30 AM PDT It usually doesn’t take long to figure out that html and css are the first things to learn if you want to develop websites, but is there a best way to go about learning them? Do you simply memorize syntax and start developing websites or is there something more you can do to improve your learning? Last week I began a response to a request for guidance in finding a path to learn web design and development. I offered thoughts for learning how to become a better designer where the graphic side of web design is concerned. Today I want to continue with thoughts about the development side. I want to talk about learning html and css, particularly in combination with each other and in relation to compositional design principles. Start with HTML Your path through front end development begins with html. It’s the structural skeleton of every web page. You’ll quickly meet up with css, but html is there waiting for you as you take your first steps. The syntax is relatively easy to learn. There’s a tag that turns markup on and corresponding tag that turns it off. Some tags do both at the same time. Learn the basic html structure of a web page with its html, head, and body tags and start filling it in with different html tags. Together, html and css are used to solve real world problems so learn to see both in the context of real problems to solve. Practice the simplest of things like creating different heading levels. Add tags to make text bold or italic. Work with lists and become familiar with html tables. Much of beginner learning about html is memorizing what tags you can use and what each does and then practice using them. Don’t stress the memorization. It will come with use. The more often you use certain tags, the more you’ll remember the little details about them. The tags you don’t use frequently you’ll look up if and when you need to know the details. Once you feel comfortable working with html tags see how they fit into the big picture. Keep in mind that html is about structure. The main job of html is to structure content and it’s important that understanding frames how you approach your learning. Visit web pages and see how they’re structured visually. Header at top, footer at bottom, and a couple or three columns in between? Think about how you would structure what you see with html. What tags you would choose for different areas of content. Is that text part of a paragraph or is it part of a list? Would you use a generic div as a container for a block of elements or would a section tag or aside tag make more sense? View the source code of web pages you find interesting as often as possible. Observe and note how others structure their html and what tags they use. Do you notice patterns in the work of a single developer? Across many developers? Why do you think those patterns exist? Continue to explore source code. Look deeper and notice how other web developers structure blocks of content within the overall layout. Which blocks of content and elements are independent of each other and which rely on each other? Which are nested inside other structural blocks of code? Memorizing html tags, setting text as bold or red, creating a table to hold some data are easy things that you can learn fluently over a weekend. The difficult part of html is up a level of abstraction and it deals with patterns for structuring real world content and best practices. Try to see the connection as soon as possible. Combine CSS with HTML as Soon as Possible While you need to start with html, it’s best to learn html and css together as soon as possible. They work in combination to solve real problems and you’ll often make decisions about one based on the other. As with html, the basic syntax and use of css is fairly easy to learn. You can learn to how to add a background color to an element or add a border around a block of content in less than an hour. Like html you can be fluent with the syntax of css by the end of a weekend. Different css properties can be grouped together. I’m not sure if this is the only way to organize css, but I’ve always liked the way the folks at HTML Dog group css properties. Text and fonts Colors and backgrounds The box model (dimensions, padding, margins, borders) Positioning and displaying Lists Tables Generated content Paged media Miscellaneous You can click the link above to see which properties belong in each group. Most of the property groups above are fairly easy to learn and mainly amount to similar memorization and practice that will help you with html. The box model and positioning and displaying will take a bit more time to fully grasp. The syntax and basic properties are no more difficult, but their use takes some practice and experience. See the connection between design principles and how you write the code to achieve the principles. Spend more time with text and font properties while you’re learning typography. Do the same for color. Remember you’re learning techniques for a real world problem. Always see what you’re learning within the context of the larger picture. Layouts in CSS The more difficult aspects of css are often about building layouts. Practice building real layouts with html and css. Try developing one with header and footer and multiple columns in between. Try developing two, three, and four column layouts using floats and then try again using positioning? Can you recreate each layout using both? Don’t worry so much about what goes in all the blocks you’re moving around. Focus on the the overall structure of the layout. Continue to move the blocks around and develop different structural systems for layouts. When you feel comfortable working with the box model, floats, and positioned elements, you can explore the some layout modules that are coming to browsers in the near and not so near future. For example: Flexbox CSS grids Multicolumns Regions Exclusions None are in common use today, but some will be and soon. Flexbox can be used today and will probably become the dominant method to develop layouts over the next couple of years. Learn it sooner rather than later. Multicolumns are also supported well enough to use for some production sites now. The Path Forward Runs Through Responsive Design As you work with layouts learn about responsive design. Focus first on the basics. flexible layout flexible images and media media queries These basics are much easier to learn than you might think. They’re simply some new techniques and new properties you might not have used before. The challenge is less in the techniques and more in how you put the technique to use. It’s in rethinking how blocks of content are structured. It’ll be easier for you to learn responsive design than it was for those of us who spent years developing fixed width and centered sites. You won’t have to unlearn some of what we had to unlearn. Think Modular and Layered One thing you’ll want to learn as soon as you can is how to work with classes and ids. Classes are central to working with html and css together and ids are central when Javascript is added to the mix. Think of classes as hooks to style elements and think of ids as hooks to allow you to add behavior and respond to events. Learn about specificity and all the different types of css selectors that are at your disposal. Which selector is best to target a specific element or group of elements. Start thinking about your code modularly. Look into OOCSS, SMACSS, BEM, DRY CSS, and Atomic design. The goal of modularity is to make your html and css more maintainable and efficient to write. Another key is realizing that any site can and will be viewed in devices you don’t expect or know exist. Learn to build web pages and websites in layers. Think progressive enhancement. Build a minimal layer that works everywhere. Then build layers on top that offer a better experience when viewed on more capable devices. Make sure any additional layer doesn’t break the layers below. Your site can deliver a different experience under different conditions, but it needs to work under all conditions. Closing Thoughts You don’t read a book on html or css and then know all there is to know about either. Don’t feel like you have to master one before moving on to the other. It’s better to learn them both together. You’re going to revisit both again and again, each time with a different perspective that will allow you to see and learn more. You need to learn the basic syntax of both html and css before you can work with them to create layouts for example. The more important learning is not the details of a particular html tag or css property value. The more important learning is how to work with html and css to create layouts, work with type and color, and implement design principles. You can always look up the details about how a css property or html attribute works. Remember the problems you’re trying to solve are real world problems of organization and communication and function. I can’t stress that enough. The problem doesn’t start with the technical details of a markup or programming language. Together, html and css are used to solve real world problems so learn to see both in the context of real problems to solve. You can’t learn everything in an instant. Don’t worry, though. No one else can either. Everyone starts learning one thing at a time and slowly builds to the point where they can design and develop websites. Then they learn more to design and develop those websites better. I’ll pick this up again next week and finish this short series with some thoughts about learning JavaScript, Backend development languages, and other things you should probably know if you plan to design and develop websites. Download a free sample from my book Design Fundamentals. The post What I’d Tell My Younger Self About Learning HTML/CSS appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Why Freelance Web Designers Need To Adjust To A Changing Market For Their Services - Vanseo Design

---

Why Freelance Web Designers Need To Adjust To A Changing Market For Their Services Posted: 14 Aug 2014 05:30 AM PDT Will the web design industry become extinct? Will it one day no longer exist? If you’re currently a freelance web designer, will there come a day soon when there’s less work for you, or worse, none at all? Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes It sounds far fetched, but it’s a serious question that should scare many in the web design industry, especially freelancers. The market we serve is a changing market and we need to adjust with it. The last few weeks I’ve talked about the profession of web design. I talked about the overwhelming pace of technological change and I asked if your age determines how successful you can be. I started a short series on what I would tell my younger self when getting started. And I even talked about how people (our clients) hold an incorrect perception of design and consequently don’t see all the value we provide. A recent article by Jason Santa Maria makes a point, I’ve made here before. He was talking about technology and wondering if advances in technology might make designers irrelevant. This might seem like a downer for a topic, but I do have some positive thoughts along the way about what I think this ultimately means. Adjust or Find Yourself Out of Work I do think a significant part of the industry could find itself out of work in the coming years if it doesn’t adjust its current practices. Do-it-Yourself site builders and services like Squarespace have always been good enough for some people. Remember GeoCities? These services have historically been less than what you can get with custom design. They resulted in poor code and offer limited access to site files, but they were good enough for some. That was then. DIY and hosted services have gotten a lot better, certainly good enough for many people I currently call clients. Neither will be as good as a custom design, but within a few years time, I expect the typical person wanting a website, will have more than enough tools to create a good enough site with a few button clicks. The low end of the market is going to replace designers with turnkey and DIY solutions. It doesn’t mean web designers won’t be able to find work, but we’ll likely need to specialize more and add extra services. Instead of offering web design services alone it might be. web design + seo web design + marketing web design + copywriting web design + conversion optimization At the high end are larger organizations. Those that understand the value of design will want custom work, but they’ll likely hire internally. When they hire out it’ll be to larger well known agencies and not freelancers. The Low End of the Market Again, freelancers are mainly serving the low end of the market. We build sites for less than $10k (£4k). I know I’ve built some reasonably sized sites and have built sites with some complex functionality, but most have been relatively simple. I create them for 1–3 person micro-businesses. Perhaps I’m only thinking of my own clients, but I suspect my situation is similar to that of most freelance web designers. We typically work on smaller projects at the low end of the market. The majority of these clients will be able to find alternatives to hiring a designer. They have options beyond hiring you or me. Some will never go for the DIY option, but many more will. Remember that most people don’t see the value of design and the alternatives are already good enough and getting better. The Shrinking Middle Most of the people we consider clients won’t need a custom designed site or even a customized theme. They’ll be more concerned with the overall price than the value of something they don’t always recognize. It’s hard to differentiate yourself when your value isn’t recognized. Many will eventually move on to customizing a generic theme. Some will move on to a fully custom solution. But they’ll do so less and less. Most will be fine with a more generic solution that works well enough and doesn’t cost much. Those that push for more will want to hire designers who offer more than most of us currently do. It’s not that we don’t offer value now. It’s that much of the value we bring isn’t entirely understood by our clients. We’re seen more as a commodity than we should be. We need to bring more to the table to increase the perception of the value we add to a project. Unfortunately our design skills won’t be enough to differentiate us. We’ll need the seo or marketing or copywriting or whatever. We’ll need to specialize and apply in-depth knowledge to specific industries. If You Can’t Beat Them, Serve Them Another option is to continue to serve the low end by building the more generic solutions they’ll be using. It’s a different design problem to solve. How do you design for many instead of one? How do you design more generically and flexibly? It’s moving your design up a level in abstraction. I can easily see a future where freelance custom design isn’t in demand all that much. Clients will have moved either higher in the market requiring additional services or lower in in the market where lower-cost options are the norm. It isn’t hard to see today’s freelance market shrinking in the near future. It may seem crazy. How can we not have web designers with so many websites, after all? Then again content management systems reduced the need for some development work. The price for a shopping cart went from thousands of dollars to free in just a couple of years. On the bright side if you add more value through additional services you move into a higher segment of the market. It’s also a way to differentiate yourself from your competition. Perhaps best of all you can raise your prices significantly because of the extra value you’re bringing. I’d also think designers with more time than clients are in good position to create the themes and DIY tools the low end of the market will look for. I’d suggest anyone working as a freelance web designer or developer think more about side projects and the earning potential some have. One more positive is we’re in a good place to set up other online businesses for ourselves. We know design and development and how the web works. A large part of any online business is the website. We’re actually in pretty good position to compete with people who are currently potential clients. Not that we want to compete with our clients, but in many cases we could. Closing Thoughts I think the web design industry as we currently know it may look different in the not too distant future. We’re an industry filled with freelancers who are designing and developing relatively small sites for micro-businesses. They may not seem small and simple while we’re working on them, but in comparison to what’s out there, they are. I think clients for this part of the market will shrink of not entirely disappear in the years ahead. At the very least we’ll need to adjust to continue serving it. We’re in a good place given our skills and the understanding we have about the web. Even if the clients we serve today shrink in numbers to the point where we can’t build a business around serving them, there will still be many opportunities for our skill set. Download a free sample from my book Design Fundamentals. The post Why Freelance Web Designers Need To Adjust To A Changing Market For Their Services appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

What I’d Tell My Younger Self About Learning Web Design - Vanseo Design

---

What I’d Tell My Younger Self About Learning Web Design Posted: 11 Aug 2014 05:20 AM PDT I can still remember how much there was learn when I first set out to be a web designer and front end developer. I didn’t and don’t mind learning, but there was a lot to learn just to reach the minimum requirements to create a website. The time to learn the necessary skills would be measured in years. It was a discouraging thought. Here I was ready to start out on a journey only to realize how long it would take just to get to the starting line. I looked for anything that would help direct my course of study to reach the necessary minimum as quickly as possible. A recent comment by string1301 was seeking similar guidance and seeking some kind of learning path to follow. Ideally that path would include learning more than web design and development. If your goal is a freelancer’s life you’ll want to learn marketing and copywriting and business in general. Anything that can help your freelance career is something you’ll want to learn to do better. However, the question asked deals specifically with designing and developing websites. I collected some thoughts and here’s what I’d tell my younger self if I could. I’ll focus on three large subjects, with the understanding that I know much more about the first two than the last one. Web design Front end development Back end development We’ll get through web design today and come back to cover front and back end development over the next couple of weeks. General Thoughts About Learning Web Design First things first. If you want to be a web designer, you should step back and understand the big picture of what the job entails. Someone (a client, your boss, yourself) comes to you with a problem and it’s your job to solve that problem. Bringing a critical eye to the designs you come across, and analyzing how the fundamentals are used will set you on your path There’s a business or person behind every site with goals for the site to achieve. It’s your job to figure out how to design the site so it best achieves those goals. That can mean helping visitors complete tasks and it always means communicating a message or story. Keep this big picture in mind. Being a web designer isn’t about making websites pretty, though making them beautiful can be part of the job. Think first about the site’s content. What’s its purpose? What does it hope to accomplish? Think about information architecture and how you’ll organize the content. Once it’s organized, think how you’ll help visitors find particular pieces of content. Most important is to keep at it. Some things won’t make sense until you’ve learned something else first. Some of the confusion you might feel is because you haven’t yet learned the missing part to help something make sense. Keep at it and you’ll pick up those missing parts. Learning Graphic Design Communicating a message or story is the graphic side of being a web designer. Your best place to start is with the fundamentals. Learn about the different elements you can use such as lines and dots and space itself. Learn what their attributes (color, size, texture) communicate. Learn about the principles and guidelines that suggest how to put everything together in a composition. Learning design fundamentals will reinforce the big picture and it’ll begin to teach you the craft of graphic design. Read about the principles of design and practice incorporating them in your work. Start to look critically at your own work and the work of others. If you’re studying how to work with space, pay attention to how designs you like use space. What does it communicate to you? Why do you think the designer chose to shape space the way they did? Apply the same critical thinking to your own work. Did the resulting space in a site you designed communicate what you wanted? If not why? What could you have done better? Don’t ask others why. Think for yourself. Why do you think another designer did what he or she did? Why do you think something does or doesn’t work in one of your designs? In either case how can you improve it? The continued study of fundamentals, bringing a critical eye to the designs you come across, and analyzing how the fundamentals are used will set you on your path, but there’s more to know. After the fundamentals, you’ll want to dig deeper into three major areas of graphic design, typography, layout and grids, and color. I still feel like a beginner with all three, but I’ll do my best to offer some ideas for learning each. Typography Some aspects of typography are easy to understand, while others can’t provide an absolute answer. Spend some time learning the anatomy of type and how typefaces are classified and organized. What part of a letter is the bowl and what part is the counter? What makes one font sans-serif while another is slab serif? What does each category of typefaces communicate? Learn to work with the basic proportions of type. Learn how size (font-size), measure (line length or width), and leading (line-height) work together to create harmonious type. Harder, is trying to figure out what a given typeface communicates and which typefaces will work well with others. Which are more legible, more readable? Which will attract more attention? Which typefaces are better used as body type and which are better used as display type? What are the differences between body and display type? Realize that there are no exact answers here. There isn’t a default font you reach for to communicate warmth or luxury. It’s up to you to choose one you think communicates what you’re looking for. There’s no exact science to deciding which fonts pair with others. There are guidelines and your own judgement, but there is no recipe. The only way to get to the point where you trust your judgement is to practice working with type. You don’t have to spend years analyzing every typeface that exists. Identify a handful of typefaces you feel comfortable using. Find a few more you can pair with them and build a small palette of typefaces you can use on projects. Over time expand your palette. And just as you did with the fundamentals turn a critical eye on how others use type and how you use it in your own work. Layout and Grids Grids (layout in general) help you visually organize content. Layout is where I started. It was a strength for me, at least in comparison to type and color. It seemed to be the easiest and quickest way for me to improve where I was as a designer. An understanding of design fundamentals will improve your layouts, since the fundamentals lead up to principles of composition. Still there’s plenty to learn beyond the basics. Type and layout combine nicely. Grids are formally known as typographic grids after all. The decisions you make about size and measure and leading are intertwined with column widths and perhaps row heights. Think about the content your design will need to display and how to best organize it visually. See the connection between space and grids. Learn the different types of grids (manuscript, column, modular, hierarchical) and understand the pros and cons of each. As with type much of this comes down to your judgement. It’s up to you to decide which grid to use and where to place information and design elements within it. You’ll gain that judgement by once again turning your critical eye to the layouts you see and through practice working with grids. Color As with typography and grids, the basics of color are fairly easy to comprehend. It’s working with all three that’s more difficult. Spend some time learning color systems and color theory basics and the relationships between color. Learn how to create a color wheel and learn why the colors sit on the wheel where they do. Spend some time learning how color schemes and color palettes are built. Always keep in mind that individual colors are less important to a design than the combination of colors used. I still struggle to put together a color palette for a project. I think the only way to get past these struggles is practice. Color relationships and combinations are far more important than the characteristics of any individual color and you have to explore those relationships by seeing the effects of one color against another. Some colors are warmer while others are cooler. Some are bright while others are dull. Place colors in different surroundings and observe the effect. Certain color characteristics like temperature will be universal. The meaning of individual hues tends to be more cultural. Work with color whenever and wherever possible. Observe the colors you see and try different colors in a design. Always train your critical eye on your work and the work of others. A good place to start is to isolate the aspects that make up a color (hue, saturation lightness/brightness). Isolate the value of a color, how light or dark it is. Work monochromatically, even in grayscale, for a time. Build different hues back in once you have the values right. Like type though, your skill with color is ultimately going to come from your experience and judgement. Learn Anew With A More Experienced Perspective As your skills with the fundamentals and with the big three of type, layout, and color improve, you’ll start putting it all together. Here’s where you might once again return to the fundamentals with a better understanding of how to harmonize various components of a design. Perhaps you’ll have a better perspective for understanding how to form a concept based on the information a client gives you, or your practice with line and form has given you a greater appreciate of space. Continue learning more about type and grids and color. There’s a never ending path to learning more about each. As you move from beginner to intermediate you’ll see more and you’ll see deeper. New things to learn will reveal themselves and old things will reveal layers you hadn’t noticed the first time around. By this point you should have a pretty good idea where to go next. You’ll know where you’re strongest and weakest and can let both guide where you go next. The pattern should always be the same and it should always be ongoing. Learn Practice Analyze Let me leave you with one last thought. If you continue to do the three things above you will get better. Remember not to compare yourself to your favorite designers. It’s an unfair comparison. Only compare yourself to your past self. Your goal with all this learning, practice, and analysis is to become a better web designer than you are right now. Next week I’ll pick things up again looking at the development side of crafting a website. I’ll share some thoughts about learning html and css, particularly in combination and in relation to real world problems and design principles. Download a free sample from my book Design Fundamentals. The post What I’d Tell My Younger Self About Learning Web Design appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610