Graphic Design Tutorial: Web Design Review

Come look at this, a brand-new journal. “Don’t finding employment, create a job” Today the authorities concerned will chat with Jamie Van Vart. She is a designer here, Master of Fine Arts from Cal Art College. She designs for our website and is a super strong designer. I believe you will learn a lot of great things through this bout, For example, how do we alter sketches into real blueprints. See you later. Jose: Hey, I’m here again. Now again. Hope everyone listens to me I design sandwiches! My name is Jose Caballer, and I discuss things related to design. My name is Jose Caballer, and I discuss things related to design. I discuss all kinds of things! Chris: My name is Chris Do. I discuss things related to design. Jose: The core of this operating system is about how to understand … Chris: Ahem, Jose, can we just say the name of the show? Jose: I detest you, buddy. Chris: You are watching-The Process. Hey Jamie, I’m ready here. let us begin. We will discuss some layout designings today. Because some projects had still not been been liberated, So I can’t share too many specimen for everyone. I foresee I can show you this, The revise and amend of the Blind website. Our company is currently building business accommodations. Many people know that We are a company be concentrated on gesture design, It has a history of 21 years. But now we have to transform into a customer-oriented company. Have countless purchasers In reality, there is no need for full-time marketing and advertising enterprises. I mull Blind can meet their needs well. For example, OEM, Make video content, Note that I am not talking about commercialized video content. And digital marketing, Email push, and so on. So, Jamie, do you have a site delineate? A representation containing all of these. It is important to have a sketch that can plan the overall situation. Jamie: This is the homepage, Then … the top piloting rail … … And then the submenu under HOME … There should be a “WORK” now … Chris: Well, I determined it, “WORK”, “FEED”, “EVENTS”, “ABOUT” There is also “CONTENT”, OK. If clients want to know us speedily, Then you can click this “WORK”. FEED is a big piece of content, including all news, Something new happened or something. Then, Happenings, I have to add statements below. Because I want to talk more. Some pleasures outside the office, castigates, Seminars, TEDs, teaches, etc. Not only mine, but likewise everyone’s. ABOUT, this is a classic claim. What’s in it? Jamie: Uh, our core values, our service content, Various components, such as brand comparison, Various assistances. And our members, our crew. Yes, these are all placed under ABOUT. Okay, then CONTACTS, our contact information. Well, our homepage is like this. The narrower sheet next to this is the mobile interface. Jamie: Yes, that is the iOS mobile page. On the left is the web version. Chris: OK, let’s take a quick look at the grid organize. This is an overall interface in a default state, If you zoom the screen, the interface will accommodate automatically( responsive motif ). There are four rows here, one, two, three, and four. On the mobile phone, there are only two columns, or even one column. The number of its grids will be reduced appropriately on the mobile terminal. Tells look at the top content. Jamie: Often, very good actions are placed now, Give beings a strong first impression. Speak with a instance, tell everyone, Who we are and what we will do. This is for those customers who dont like to scroll down, They can go immediately to the product page from here. Chris: There are some periods for entanglement design, It is acquired from the layout design of newspapers. We likewise announce this “head”, This is derived from the design of newspapers. It refers to the part above the sheet turning course( you can see it without scrolling the mouse ). Here. So, you will articulated an superb draw, Every element in this part is important, Because when someone clicks on your website, If they dont appreciate what they want to see at first sight, I didnt hear what I wanted to hear, They will not continue to scroll down. Due to copyright topics, this is the only way worked illustrations for placeholders now. So, you have designed an adaptive framework. These constituents will change according to our final material. Well, I think its jolly, Using the bleeding chart, its concise, Eye-catching, It is important to use the right paint now. But more important is the title copy now. To make it attract people’s scrutiny, In order to promote users to continue browsing. If this step fails, then everything else will be meaningless. So it is essential to shape the page have pressure and items, Be eye-catching. Let’s continue to dive into the details. What is this here? Tell me what is this one? Jamie: Uh, this is a thematic expose of WORK content, You can click to expand our activity material from here. Each of the thumbnails in these grids is linked to the corresponding item. Chris: So now we have to tell the programmer to make a sorting system or something, In this space, you can tag the picture( add Tag ), Sort in the way we want, It’s not just sorting by default( for example, by hour ). For example, labeled 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, etc ., The representations will be arranged precise in numerical say. Then, I think there is a link to “View all projects”. I guess this is also used to open the “WORK” page, right? Jamie: Hmm. Chris: So this is another point to improve the user know-how, Some information is best to provide multiple access paths. Specially when the user has learned the initial knowledge, When you want to continue to learn more, exactly provide a link right now, No need to turn pages back and forth. Then, this area, Usually called emblem quilt( motto wall)( Because it is like a cloth patch sewn together, it is called Logo Quilt in English ). Why do you want to introduced a badge wall here? Why does this part start with the emblem wall? Because we need firebrands that we have worked with in the past to prove our reputation. Other business that have the potential to cooperate will hope that you have cooperated with their copies. Or have cooperated with the same volume company. At the same time, if you and Sony, NEL, Microsoft, Audi, Google, Electronic Arts … This kind of big company has worked together, It is a good advertisement in itself. The bigger the symbol, “the worlds largest” the force. And it must be true. Don’t fake it. You know that we will discuss these issues with our patrons in the email. When they asked about the detailed previous contingency, You will be perceived to be lying. Great. Check out this “Recommended Articles” section. Jamie: Now the authorities concerned will kept clauses to be established by ourselves or external relates, Such as articles from the media, Or some more in-depth essays. For example, uh, “youve had” some commodities about typography. You know, they are not just a newsletter, It’s an in-depth discussion on certain topics. OK. very good. I coincided with you. I really like this kind of website pattern, The user who calls the website does nothing except scroll the mouse. The information they receive is arranged in mantles, It is provided through portrait with a sense of story, And only one topic is indicated on one screen. The next important top, here, at the bottom of the page. Guys, what I want to emphasize is, Let patrons taken any steps. For example, we want customers to contact us, Then you have to leave buttons such as “call” and “send email”. The ultimate goal is to leave the customer’s e-mail address. In this direction, customers who visit the website can be converted into potential customers. Add them to the recipient list of the word feed. There are likely to be no shelling, at most one or two letters in a one-fourth, so. This room we can keep in touch and have real communication. What about other sheets? Jamie: Harmonizing to the general pace, I will click WORK on the piloting bar, Then the above page will change accordingly, The contents of the WORK page has been further classified, OK. Click the WORK menu and you will see the secondary navigation bar. Our projects are divided into different types. Selected projects, as we said here, will be presented here, It is the quality content we selected. The second category is instance studies. This is for some relatively large projects. For example , not only make a badge, but likewise designing an internet site, Do APP, peripheral insignium blueprint or something. You know, this kind of issue that needs to be discussed will be more complicated. The last-place one is “All Items”. The material is probably divided in this way. Chris: This is very important. Users come to your website with a certain purpose and purpose. Whether its music, video, or designing an internet site, No matter what you do, you have to organize information in advance according to customer needs. Ever keep the user experience in knowledge, Let useds find what they are looking for with the least clinks and the most wonderful accelerated. Such an internet site satisfies user beliefs. So, if you can do this, it will be of great benefit to you. I would also like to point out one thing, because this page is composed entirely of images. It cant be seen on this etched black and white drawing, But it’s obvious on the screen. If you poise the mouse over the picture, Relevant text information will be displayed. So we don’t need to do additional textbook and portrait typesetting, which will mess up the organization. I guess you also did dynamic special effects, For example, compile the picture darker at this time to facilitate the read of the textbook. This should leave a hint to programmers so that they can achieve these effects. Jamie: It may need to be adjusted on the mobile version. Because there is no corresponding levitate enterprise on the mobile terminal. Chris: What I am most interested in is the case study part. Because in this section, you can explain in detail, About the narrative behind our motif. When you look at these sheets from the customers point of view, You might think, What precisely do these elements do here? You know some of the reasons for our choice, but it is difficult to make it clear. Many parties still have some disagreements about the “case study” section. They will still employ the specific content about the logo and the project now. But we hope that now, a great deal of cases will be used to show How do we choose between components from a tactical point of view. In the development process, we will ponder the copywriting and the position of the elements, Even pondering the direction of calling ingredients, We will figure out what the name authentication arrangement should look like, Try to figure out who is the target customer. We “re going to tell” some such narratives. Because this is the motivation and direction of our incessant progress. Therefore, the case study is very important to me. Now is a page of the actual “case study” interface. Comparing it with the normal project above, You can see that they have some key differences. First, there will be an introduction. Then, the authorities concerned will immediately discuss, “whos doing” our patrons? Which category should this project shall be divided into? What kind of service should we provide for such clients? Next, we will discuss what special challenges this project will face? How should we accomplish it in the most concise way possible? Chris: OK. It reverberates difficult. What is written here? Customers, challenges, mixtures, answers. OK. I like this. When our decorators are typesetting, Can shape the information more condensed, or more divergent. How to procreate the information more condensed? It must be refined on the basis of the original information. The problem with this example is that it has a very long block of text. Jamie extracted the main features of the verse here. Let me emphasize this because I like modular report. The grid organization with simply one column is prone to monotony.I like to break the tedium. There are some changes to the like page. So, we have a good title, a subtitle, There are some text blocks that provide details, with descriptions and signatures. Then you framed a missile now, Put the text block of the text next to it. These things see the whole page full of enjoyable. Jamie: Yes, make the textbook apart, Instead of putting sizable sections of text instantly. Put the matched verse and representation together. In this method, you can know the whole background and context. This will be much easier to understand. Chris: Very good. So, split the article with big pictures and clauses like this, It will make it feel more like reading a newspaper. Improve its readability. I dont know what you think, When I ascertain a large piece of copywriting, Not revised , not handled by a decorator, Because web design is not a list of large-scale blocks of textbook. Unless you work for the Wall Street Journal, Los Angeles Times or something. Be careful of large sections of text. The layout of this page was good, The design consciousness is very in place, However, the feasibility of programming must also be considered. There can be no overly stacked personas and text. This often returns many problems. Good, beautiful. There are a lot precedents shown here, or . . . Jamie: Yes, this is the standard project page. Chris: Is this a “case study”? Jamie: Yes, this is a “case study”. So, I also combined some other typesetting skills. Including the name( CAPTION: a label of HTML language ), Block excerpts( BLOCK QUOTES)( HTML tags will increase boundaries on the left and right of these components) Or operation massive text subjects, It is too possible to adopt a little change in the grid arrangement. In this way, the pictures can be separated and can be more balanced. For ordinary projects( in the page ), there are more illustrates and fewer paroles. You know, it will be a series of depicts, And there won’t be too many alterations. Chris: So it’s an idol carousel? Jamie: Yes. Okay, we will try to make it more methodical, It can be done with one or two templates. That’s right. OK, immense. Continue to discuss “CONTENT”. I have been thinking about what allures people’s scrutiny. Let us brainstorm together. OK. Now the page scheme is done, We have to think about what to say to grab the hearts of users. What I think is, exactly what we we doing? Where is our value proposition? What improvements have we brought to the lives of our clients? How do we make their work easier, To win in life and work? I want to say something rousing, I want to write, for example, “Hello! We are Blind.” Kind words, I want to say, “We will build bridges.” Some beings might question, what does it mean to build a bridge? This is a metaphor. In a certain sense, we build bridges for strategic hypothesis. We know that some people will come up with strategic hypothesis, and there will be some amazing suggestions. But when it comes to the details, There will be a gap between conception and hanging. So, we just want to build a bridge in the middle. I think it directs. A few more of these. Uh, brand, between brand and what? consumer? used. Well, I think it is possible to write “customer”. Okay, then? Strategic concept-execution Brand-Customer anything else? Jamie: Goal. Chris: I like this! You say aims, so you have a goal, and then, Jamie: Solutions. Chris: The makes, I like them. well. So what we have to do, Explain these ideas in the mimic. I consider the whole framework is like this. Jamie: So you will expand the content based on keyword pairs? Chris: I was just thinking. However, it is not bad to use some simple representations to illustrate the key points. Then placed the textbook here. And so on. Like I said, this part can be very flexible. It can be adjusted according to the specific situation. Ok. Therefore, it can be said that we are building a aqueduct between tactical perception and implementation. Because we all know that getting revelation is just the beginning. On this item, many companies have disappointed. Etc ., etc. Therefore, we need to explain that we are building a aqueduct between the brand and “the consumers “. We acquire the symbol stand out. Who are your customers. What do they require? We will focus on goals and decisions. Because we believe that design has more than aesthetic appreciate. But to help customers achieve their goals. Therefore, our aqueduct is not a bridge on acre. Although we have a bridge now( titters) alright, We are talking about a bridge of hypothesis, do not use literal meaning to understand. Not the kind of real thing. It connects projects, connects goals and outcomes, Connect what we believe in, and so on. Okay, a little more at the end. OK. If you want to know how to contact us, here is the information of the boundary person, and so on. Then it can be over. There is something that numerous designers and blueprint companionships do not understand. They believe that they are selling designing drawings. it’s not like that. The blueprint draft is just a by-product of your problem-solving process. In this instance, we want to focus on “what are we doing”. This is a ready-made example. What we have to do is to help the client firm Present their ideas in a visual channel. Now, we go one step further and think from a tactical perspective. Therefore, we will discuss the question of “how to get it on? Why is it important? ” We will begin to make changes. That’s cool. It’s like playing Xbox. I’m really nervous, but this job is really fascinating. Our partners are excellent. But we have noticed that since enrolling the 21 st century, especially after 2016, Change becomes urgent. My personal sentiment is this, you must go further and cater more works. Your theories, your suggestions, will be transformed into the wealth of the company. There are many ways to achieve this, but this is just one of them. Okay people, Hope you will find this special video when you are studying web design. Going a little bit in the direction of in-depth discussion. I know that our discussion today is more general. Because the page design has been completed( no process ), Jamie has been working on this for a long time. Anyway, I hope you find it is helpful. Leave us a sense, Tell us what you want to see. See you next time! Turn off~ off ~.

by-product

As found on YouTube

Share this article

Leave a comment