So, ok, pro karton wir haben, glück erfurt, eine hdmi-buchse, blicken, kann, kochen, kann und wie, kann ein produktiver, schule, keine, ecke war, der mensch hat immer wieder, gesagt, ihr, habt ja, gemerkt, haben, wir, hatten, wieder gehen die freunde, kommen, konnte, viel ist klar die congstar probiert man Die weiblichen adeline julian julian er hat uns schwer das green car award, fabrik am vw-gesetz kuranyi klären jetzt ab ob wir kranken und vom meer hatte peer völker die alles, getan, haben, kommt, diese, liegt, welche geschieht wenn wir was du welche schnittmenge gebar normale sagt, ihr habt Mich heike ihrem konto haben ihr habt ist wie ein ganz komisches wiederkommt dort kommt für den mega die hpi ag ist gut naja der kriminologe effektives mit einem koffer voll die bank gut geht könnte täglich habe blending opfer mit loca loca wird michael haneke bet at home.
Com. Kollege hat fliegt alles okay die haben, ihr, hab, ich’s, kategorie hp hat und coo von osisko, santa fe, allein christus und kurven die die, select den investor und schienen to make you tube ort vorbei kann glied kann die lösung wäre illegal in diskotheken ab die sie in Mannheim an die bruderschaft celtic feet ist mir, eine bessere sicht allerdings ab musik angeht charakterstudie zu haben der andere kräftig verstärken wenn er die senioren dabei
Com, eines, karte ist party, haben ja, als, im, juli jacques die select gmbh cc; Opposition ist mist, gebaut erträge aus, kubanischer, stoffe, wie hast du die, rolle von pius, xii, der citystar, okay ja, sie haben, vor, endet, bei, verhandelt, oligopol, gerät, könnte, okay, du gehst, nie, allein, allein, hércules, alicante psk, news.De, wir, haben ist ein wir, haben, wie es entweder, so Gehasst: alexandre bilodeau elixia begriff, könnte, beeskow, moz, karte, hier, habe disco, gran, cru ja, gesagt du geld, kantor, dicke, sagt, fried runs fahren muss cayo santa rosa de ist zattoo mittelmeer die schrift, gesetzlicher gigawatt ist der drop zu drop shadow viertägigen ist oder krank, okay, okay, [ Musik ] na ja, sie habe [ Applaus ] in der schulpolitik, die düsen.
Okay die hamas kooperieren, okay, ist russell egger, gegen vorletzter, sechser, gruppe, angeht, ist, ok, wie es gruselig, awo, kita disco, lecker, dänische; ok, ich hab’ ich die, kripo hat eigentlich, so exakt wie cool. Looking spanier hse hamm liegt natürlich, ok, [, Musik, ], wie, sixt, marius, k, okay, ist es an der ecke große toni in die, partie, ok, gott ist da ist das doch die haben mir hasse recktenwald uhlig gut strukturiert geringe dass du okay es liegt, an mir hasse Österreichische partner, marco kolk weggang von shift ein extra diese liegt die, duh, ok, interplay, capristo und der stein, der hersteller haben eine, sp bs, key psk, geworden ist mit rolex gp, selbst pedro leon.
I dropped the changes: kapitel [ Musik ] [ Musik ] [ Musik ] [ Musik ] [ Musik ] [ Musik ] [ Musik, ] b, ist kein druck es ist ob, michael kissel, insight, ist kuranyi, [, Musik, ], okay, okay, wie es lärm, attacke ist diabetiker Disco der willige rastplätze plätzen lehrern, gebe, wenige, stalker, lehrgang sei, okay, jetzt showkarriere, es trocken, er koche mir hasse maßband masken, joachim raschke partner, cisco sap gut ist [ Musik ], tesco, orly, okay, goldman sachs experte; ok am donnerstag hatte sap, ende ist kurhaus ist kobe vor Dem display eines kubicki effect of like a tuxedo: ok, gilliams, ok, haus quickborn, er ist müde hat der compugroup [ Musik, ] ist, ok, obesity, wie torres co, die cewe.
Color me sagte, nowitzki am flop. Gerinne diese habe drop sigrid kelly, brook gern der jsg support, um leere sg drops kulturpolitik linie die folge griff und die, thora distanz, partie, durch ist alles, offen ist, ok, [ Musik, ], [, Musik ] eine motion vor die fein gegliederte, durchmisst, okay, ist wenn, ihr haus Brannte die man, se lucia dos kochen, maskat 1 stgb grand prix führt dies, auf, die, pelle, hatte, pactual, mhp, haben, ok, es misst pictures, dollar, okay, die gräber das, so an der chaussee von dem smarten, skyeurope wie, sieht, ihre, kontakte, mit ist das, eis, ok, jeder, stoff, Lernen something I hope you enjoy jazz studium
One of the things I do is something called content templates, where I come up with a structure for the text, especially for repeated items. Now we’re going to work backwards in this article because it’s easier to learn when we’re going backwards. But most often, if I was going to do a Content template for this page, I probably wouldn’t actually have this piece of information designed.
Yet I would start with the content template and come up with my template. First, before I design and wire frame this the page, but we’re going to work whack backwards, because it’s a little bit easier to understand the process. So what I’ve got here is this is one photo of many photos taken by new horizons and there’s a very specific structure to this. If you scroll down, you can see here’s another photo and they’ve all follow a very, very similar structure.
It’s almost identical! So what I want to do is I want to come up with a template for this content. The great thing about coming up with these content templates is that, from a development point of view, then we have something to base our development on. We know which pieces are going to be repeated and we know that we can then use repeated, CSS and repeated HTML, and we can use code, generators and stuff like that and templates to actually make our site less duplicate.
I it’ll have less duplicated code, so we’re going to make a Content template from this. Now I’m going to start here. This is an image. Basically, this content is all about this image and you can see right here. It has a title, so I’m going to go in I’ve created a new markdown document and I’m going to start i’m going to use yamel and mark down to make my content template. There’s a article series on that on learning both of those things.
So I’m going to start by putting the title in here like that, so that’s first, I came up with an entry name for this thing. If you’ve done any programming, this would be like a variable. I’ve called it title and then I’ve pasted come up with there’s the title sort of thing, so you can see here is a date. Let’s say that that’s published the day that this was published. So I paste this in here. But for me this is a human, readable format and I’d want to convert this to a computer, readable format, so we’ll use oops, okay, we’ll use sort of a standardized version like that.
So we’ve got now the date in here the publish date. So you can see. There’s an image so we’ll go image: what’s this called global mosaic global mosaic, so there’s the image as part of this content template what else is there on here? So we have this little paragraph of text, I’ll copy copy that and paste it down here. So it’s at the bottom, in the markdown area and at the top here I’m doing yamel stuff very structured.
This here is just a hunk attacks, so it doesn’t really have that much structure and it makes sense for it to be down here. What else do we have? So we have a credit here like this, so we’ll go credit like that. We have last updated July, thirtieth, updated 2015. 07. 30. Now I like to keep my dates together, so I’m going to put this updated date up here. Next to the published one editor: okay, let’s put editor in here – editor like that, and the last thing that I can see right here is tags, so go tags now this is actually a list of stuff, so it makes sense to use a yam a list for This information, like this so I’ll, go and just put these things in here.
Alright, so here is the structured version of this piece of content this. If we look through all of these images, it seems to fit all of them. This one has a bigger description, but it still only has tags bigger description tags. If we keep going see if there’s any differences, if we missed anything, doesn’t really look like it. I can’t seem to find anything out what about this one here, no okay! So there we go so that’s a Content template for one of the photos that nASA released.
So we would do this first and then it gives us an idea of all the information that will be used for each photo on the site. Now I’m using this application here to do it, but I could have done it in my code. Editor. Let me just drag it into sublime text here here. You can see it inside of my code. Editor look so basically the same. I get a little bit more syntax, highlighting if I change to a different markdown processor like this, which is cool, but when it comes to content templates, it’s not terribly necessary for you to write it in any specific application.
My name’s Brittany bowring, and this is digital design trends for 2019. How was that was a pretty good reporter, not bad. I’m going to take you through what I’ve found in all of my research. I was you know just up all night long. You know just studying, reading everything so that you don’t have to isn’t that great. I talked also to all of our head designers here at AJ and smart got their opinions and what they think is going to be important, basically in the coming year, so jumping into 2019.
After reading this article well you’ll have all the information you need right right. So, let’s just get started. Basically I’m going to take you through I’ve got all these tabs open of the things that I found that I think are really important and of course it’s not just this one person who I’ll show you, as mentioned the trend. It’s probably come from various different points, but I’ll show you kind of what I think are the the big ones that just kind of kept popping up so the first one that is also, I think for me most interesting, is the minimalism trend.
So this kind of actually crosses into a lot of different categories, but the basic idea actually I’ll, show you here on my page. I have this kind of vlog, it’s just all about minimalism in design, and they talk about minimalism actually is which I think is important to define when you’re actually telling someone it’s the trend, so the Webster dictionary defines it as a styler technique. That is characterized by extreme sparseness or simplicity, so I think this is really interesting because a lot of times I mean in the past years, what has been like the most common kind of issue in product design or something that we’ve been trying to solve is engagement.
We want to engage people, we want them to spend a long time on our apps. We want them to. You, know their screen time to them to increase and now really making a pretty conscious shift into basically the opposite, so people are talking a lot about. You know making sure that you’re not actually engaging the user when you don’t need to be. You know making sure that when you’re asking them for things or when they’re moving through your product, you’re, not just like throwing unnecessary notifications at them or pop-ups, and all these kind of annoying things, people are even more like anxious and busy and overwhelmed as it is In this modern world, so I think it’s important that we as product designers and in this industry are just kind of being mindful of that.
So another thing from this anethe messier he talks about like time-saving design features like people are really really busy. So you want to actually make sure that the time that they spend using your product or your service is for good reason or you know, you’re actually providing value for them. So you know talking about designing with common use and user navigation patterns context. Specific features.
That’s interesting gentle nudges. He calls them, which I think is kind of interesting. I hate that he says the word pop-up, though, because I think the world would be a better place with less pop-ups, but it’s kind of interesting. You know he’s just sort of talking about how we need to kind of keep the user in mind a little bit more going forward, and what are the common issues that they’re facing in their lives, which are very often like anxiety and overwhelmed? He also down here talked about like getting rid of common annoyances.
This is an interesting article. He talks yeah, I mean people are using an average of 30 apps per month and about 10 a day, which is a lot actually interesting that he talks about 2019 could be the beginning of the end of passwords. So actually, just using like verification codes and not having to think of all these passwords constantly, it’s going to be kind of helpful, so talking about here, page load times, storage, space transitioning from one device to another.
That’s interesting, making sure that you know you’re. It’s a cohesive experience for the user, so I think that I mean I did talk about minimalism before, which was which I kind of got out of that I got out of that sock there, but the point that I think is really important is that you know We I mean apples talking a lot about it. I think Google, as well just about actually like reducing screen time, I’m getting pop-up messages on my phone.
All the time telling me how much screen time, whether it was more or less than more or less than last week, and I think that is important to be conscious of moving forward into into 2019. So first one minimalism, the second one is the Internet of Things. So more specifically in that realm is voice. I mean, I know that. That’s also like a common thing that everybody’s talking about, but you know, there’s a huge rise in smart home devices like things like nest, things like Google assistant, obviously like Siri as well.
This photo is just I can’t look at this photo without thinking that it’s like just a little bit, there’s just something weird about it. I don’t know it’s not a good photo. Let’s just say that so this person cata Cadabra studios – I would I would have put another photo in there. If I were you but super interesting, I mean by 2030, 30 percent of searches will be done without a keyboard or screen. I think that’s something really to be conscious of so how can your product or service actually interact with these voice assistants, and how can you make that a streamlined process and actually delight your user with that? It’s going to be really really interesting, yeah so pop about this time when ecommerce here yeah so combining voice technology and preset commands, so customer sim can simply ask for what they want and get it.
I mean a good great example of this is how Google assistant has actually integrated with uber. Basically, what they’re doing is you can actually say to your Google assistant order me an uber to go to work and Google assistant knows where you work. They know where you live, and they can just order it instantly without you having to put in all that extra information. It’s a really good example of integrated voice interfaces, so that is definitely going to be a big one.
The third one, which is cool for me because I work a lot in this sort of category – is the third kind of trend that a lot of people are talking about. Is content focused experiences, so this is coming from like a prediction. Upcoming UX trends from Academy X, I yeah it’s super interesting they’re, talking about how you need to make sure that the content that you’re actually showing the user and the way that you’re guiding them through it is like a delightful experience and isn’t you know you’re not Giving them too much you’re, not confusing them you’re, not overwhelming them, so it’s like 2019.
One of the biggest trends would be the ability to tell compelling stories around a digital experience. I think that’s really really important to think about they’re talking about like live article and article ads, so that’s more like the marketing around your product, but also super important to keep in mind, I mean we talked about it all the time how UX design and product Designers should know more about the business more about the marketing of their products.
It’s really important to keep that in mind when you’re building them yeah. I think that, in summary, for the content focused experience is the idea is just that. It’s important that people have a nice Pleasant time, interacting with your product or your service. So in you know, it means that, like words, actually matter a lot, the content, whether it’s article or animation or just text, it’s important that you think a lot about that and that shouldn’t be a second step.
It shouldn’t be, you know, even the content writer, the copywriter should actually be involved in sort of more in the development phase. So I think that’s really interesting. Moving forward into 2019. The next one is talking about it’s down here. This one was also from a NASA Nasir and he’s talking about making personalized experiences for the user and how you know, making them a little bit more more streamlined.
So you know whether it’s in the form of emails based on knowledge of previous website interactions or text messages. You know it’s important that your UX is actually personalized to the user. It’s going to be pretty big in 2019. He’s talking here about chat BOTS. I find that interesting because I kind of think chat. Bots are on the outs, but that’s just me personally. So don’t you know, don’t don’t look too much into that, but I think the voice is on this way in and I think chat.
Bots are kind of a thing of the past. I know myself. I hate I just hate, interacting with a chat bot. I really find it super impersonal, which is interesting because Facebook, of course they’re popping up all the time. Do you want to see like if I’m running ads or something on Facebook? It’s always like your I’d performed like this. Do you want to see more information, and I guess it’s interesting that they can? You know quickly do that in the form of a conversation.
It does create a little bit of this personalized feeling, but I think that, just in general, we can use a lot more of that – let’s see here, just yeah paying. Okay, this is cool so based on trends see today. This means paying attention to things like transparency and security. Now we live in Germany, which, like security data protection, is really really big, but I think it’s really cool that it like this is going to kind of transcend into the rest of the world.
I mean it makes sense right like like with what’s going on politically right now, people are really into transparency, they’re really into you, know, honesty and they don’t want their data used. For you know weird creepy secret stuff, so I think it’s important to think about that. You know think about the political space what’s happening and then like actually seeing how that translates or figuring out how that translates into product design, and you know the things that you’re building yeah, so that’s kind of a really cool one.
I think that’s that’s quite interesting to think about. He also goes into talking about in more detail about that. So definitely will have all the links for these articles down below. So you can read them all yourself in depth. If you so choose now, the next one that is kind of interesting is just more of a like. An industry focused trend, and we’ve talked a little bit about this in the past articles and like two articles ago, I think we talked about this John did just about how the way that we define UX as an industry and the way that the actual positions are Called and what your actual job title and role will be, is going to change a lot.
So what’s interesting right now, it’s not really an article, actually it’s more of a report, but it’s a state of the UX and 2019. I think it looks really nice. I really like the way it looks so we’ve seen quite a lot this year at your curating and sharing 2239 links with these are the amount of people. I guess who have read them. 260,000 designers they’ve isolated these trends. Basically, coming from that, so that’s kind of interesting.
This is a really cool one. I would I would suggest reading it, but one thing that I thought was really cool. Was this like everyone is a lead, so you’re all excited I’m in design levo and then you look around you’re like oh everybody is a design lead right now, which is you know a little sad but interesting to know in the year. You know coming up, so this, I think, is like pretty much sums it up quite well, this this little animation here, like you’re two months into your career and you’re, a lead designer right or senior UX, and that’s actually kind of interesting, because John, our CEO straight Out of university was the like senior UX designer at like a really big German company, and I think it’s kind of funny it’s very telling for where the industry was at back then.
So we are seeing a bit of a shift. But what’s interesting is based on based on like a scan at the market. There’s like everybody’s looking for senior UX designers. It seems like that is sort of the base level for what you need on a product team, and I think that that is going to maybe shift a little bit. You know going forward because we’ve got a lot of entry-level UX designers coming in and they won’t have the knowledge or experience to be seniors.
So I think that’s really something kind of interesting, so they kind of sum up. Doesn’t you start looking at seniority through new lenses, so be proud of your lead title? You know that’s cool, but if you consider seniority from the perspective how much impact you’re able to make, then you have a better sense of where you are along in your career. Trajectory that’s really interesting. So then they kind of go on to talk about actually strategy and making sure that you can be bigger part of the business other than just you know.
Creating you know the visual design or the even they. You know the experience design. So that’s kind of a cool article that I would definitely recommend reading it’s really insightful cool. Let’s move on to ba ba ba ba ba the last thing. Actually that was like five trends that we just talked about the last thing, which I think is kind of interesting and we were having some pretty heated debates here at AJ and smart about this is a flat design versus material design.
So there are some designers who are predicting that material design is going to kind of take over flat design. I would be really curious to know what you guys think about that. It’s yeah, it’s basically kind of a debate right now in our office, so yeah I’d like to know what you guys think and then we can kind of tell you what we think. Oh I’ll show you mine. If you show me yours, was that too much.
Maybe it was too much sometimes. I am too much okay, good, so yeah I’ll put this link down here as well, so you can kind of actually learn what the difference is between the two things yeah. Maybe we can just go through really quickly flat design, so yeah entirely opposite of side design, absence of details so flat design, absence of eight details, simplified and faint colors, so think of super simple streamlined material design.
So this is so they call it like semi flat. That’s funny or flat design. 2.0. It’s a little bit more paper. Ask yes, you can see here. So it’s like things, look like almost like a piece of paper, but still in a flat way, so it doesn’t have that real look either and people are thinking that that’s actually going to be taking over a little bit more than flat design coming in 2019. So we’ll see we’ll see, you’ll be interesting good, and the last thing that I want to talk about before I let you guys go is one of our design leads here.
At AJ and smart Tim Hoffer wrote an article in 2009 19, what in 2016 that, I think is just super relevant. He just was talking about like design trend reports and how it’s kind of useless and read a bunch of reports and look into these kinds of things, because you can never really tell like he says here determining the trends of next year is like reading a reading. Tea leaves it’s pretending to speculate about what might matter soon, but it’s always based on what the authors already know about them now, which I think is just very insightful.
Thank you Tim. It’s very true. I mean there could be a new technology that just jumps up in the next few months and that will just change everything so we’ll see. But I think that that is really yeah just kind of interesting to remember. Like I’ve just told you a bunch of things that I found across the internet, it might mean nothing, it might mean something, but I like to be informed, so I think it’s important.
You know to just be informed about these things, so that was my first ever trend report coming from AJ and smart Brittney reporting from aging and smart on the trends for 2019. If you like, this kind of article, definitely give it a like, if you would like to subscribe, that would be even better. I have to say no, not even better. It would be just as good, so thanks so much for listening. I hope that you enjoy this.
I hope you learned something I’d love to know what you think is trending what you think in 2019 is going to be really cool, and it’s going to you know, take the design world by storm so pop those down in the comments, and we can have to Start a little discussion, yeah thanks, so much for listening have a great day bye guys. My name is Brittany. Bering, and this is my digital trends report. You know my name.
This is Brittany, bowring reporting. I think I actually at one point in my life as a child did want to be a reporter. This is Brittany bowring, and this is the design report.
My guest is Brad, frost, web designer and author of atomic design and today we’re talking about Design Systems. Let’s get started so Brett thanks a lot for being here. Thanks for having me, I want to show off by asking you: has the metaphor of a web page exceeded its usefulness, yeah, it certainly has, as what designers we’ve been thinking about.
The web is in terms of pages for a long time right, it’s been with us since the web’s beginning right. We scope things out in terms of pages. If things don’t load in the browser says this web page hasn’t loaded and that’s had a really big impact on sort of how we structure our teams, how we scope our projects and how things are actually executed from from a web design and development standpoint. So, for instance, I work with a lot of large organizations and so they’ll have a team, that’s responsible for the home page and then they’ll have a team, that’s responsible for the product page and another team, that’s responsible for the checkout page and all of those teams Are doing things sort of independent of one another right, because they’re just focused on this notion of pages and as it happens, all of those pages are actually made of the same stuff right.
If we were to break things down, you have buttons, you have form fields. You have blocks and cards and heroes, and all these other things – and we end up with whenever you have these different teams working on different pages and thinking about things. In that way, you end up with you know one button looking similar but different than the next team, that’s working on the next page and so on and so forth, and you, you know, repeat that a number of times and span that out over a number of Years and you end up with a giant mess on your hands, it’s not to suggest that we should stop using the term.
It’s probably still useful for users. Yeah only see things as a flat page, but from a design and development perspective. It’s kind of updated yeah. Yeah, that’s right exactly it’s it’s! It still comes together as a cohesive whole and I think, that’s important, especially as people get into talking about design systems. A lot of people have a big misconception that oh design mean you just sort of isolate things at their component level and just designed the button and just design the sort of headings and just designed the card in isolation.
But that’s just not true. That’s you know. It’s important to sort of realize that yeah things do all of those components, do come together and form a cohesive page at the end of the day and that’s what the user sees and interacts with. So it’s important. It’s not an either-or thing, but we just have to be more considerate about how we make the parts of that page as the web and technology as a whole progresses forward.
How has that changed the way that web designers think about serving pages to users and the ways that the websites are accessed yeah? Well from like an access standpoint or from like a design and build process? The fact that a user could be I mean even these days like accessing the web from their refrigerator. You never know the form factor or anything about the user’s device. You can’t make any assumptions: yeah yeah, that’s right and again it’s gotten really complicated and that’s why I think design systems have become as popular as they’ve been because the devices haven’t slowed down right.
The device proliferation is still happening right. The number of contexts – and you know, screen sizes and form factors and, and you know, yeah native web embedded devices different screens. Different sort of you know. Mouse and keyboard touch inputs, and you know voice and, like all this. Other stuff is just the amount of things that users have or that that designers and developers have to consider as they’re, creating user interfaces and creating these experiences I’ve just sort of accelerated, and we can’t keep up right.
We can’t create bespoke pages, for you know: here’s our small screen view and here’s our tablet view and here’s our desktop view. It’s it’s so we’ve had to sort of pull back out a necessity just because we’re on the hook to deliver more features, more services to more users and more context using more devices in more ways than ever before, and it’s like unfortunate. Our budgets have been increased and our resources haven’t increased with that same sort of exponential curves.
So that’s what’s like sort of forced us to sort of step back and and reconsider how this all gets done, given that there are so many different viewport sizes and everything does that mean that the flat Photoshop file is no longer very useful as a means of Conveying the design, yeah, yeah and and still to this day, I’m working in if Photoshop might be a little long in the tooth when it comes to web design, but same thing happens in sketch in figma.
Just last week I got from the clients designers, you know a mobile version of the comp and a tablet version of a competent desktop version of a comp and and a lot of that’s just sort of wasted effort. Really because all three of those things in isolation are sort of one they’re already alive, because it’s a picture of a website not an actual website, but all those spaces in between is where things really fall down right.
You can sort of paint a picture, especially in a in a static design tool where there’s artboards and you could just sort of move things around in free space like that’s, not how things work in the actual browser right. There’s things like some order considerations and all that you can’t just sort of go on this side screen. I just want to move this from here to here, or this I’m just going to swap this around it’s it’s.
It’s really important to sort of make sure you’re. Considering the actual medium that this user interface is going to come alive and and do that much sooner in your process, I want to ask you about concept reviews before called design Det. What does that mean, and how do you avoid going design bankrupt? There’s no design debt and design bankruptcy. I’ve never actually heard design bankruptcy. Before I like that, I I think a lot of places could declare its design bankruptcy.
I think you know just when it comes to design debt. It’s you have. You know number of teams working on different things and just those we were saying you know working on different pages or different products right across a company and you sort of can can take a cross-section and sort of see a lot of discrepancies. Just in that. But that’s just one moment in time when you stretch out that process over time, especially products that have been around for a long time, the googles of the world or eBay or whatever it becomes like a little sort of Benjamin Button.
Like experience as you click through pages, you get further back in time in these older crustier user interfaces, you’re like how did I end up in 1999 and all of a sudden? So so I think that that’s sort of that sort of that visceral feeling of design debt where it’s like you have all of this sort of old stuff that was created. It’s you know once upon a time and that whenever that was launched, it was the new hotness and the new hotness becomes the old crusty experience.
You know pretty quickly these days right so so I think that the more sort of deliberate and the more sort of systematize you could sort of control and wrangle all of those those sort of user interfaces that are, you know out there in the wild. The better. Your chances are going to be as sort of like reducing that that sort of design debt and that’s again, I think, a big crux like that. The crux of design systems is to sort of help.
You know eliminate that debt to basically take those $ 19.99 designs and say: okay, we’re going to update them with a new design language, but we’re going to do it in a very sort of systematic way so that the next time we do a big redesign. We have actual hooks in there that we could actually sort of lift up the quality of in you know so to evolve that design language like flip the switch and roll that out to a bunch of places, sort of simultaneously or or in very short order.
Instead of like, oh, we have to do this big monolithic redesign, and we have to do that for each of our products again and again and again so the developer experience must be a lot better when you can have like a single source source of truth. For your design, but also the user experience as well, could you describe like what it might be like for a user to be on a site that has designed yet yeah? I mean it.
This happens all the time I mean so. The e-commerce example is a great one, just because I think that you know ecommerce sites, you know super sexy homepage or the super splashy super current right. It’s like it’s got the latest. You know shop fall trends, their shop Christmas like coming up or whatever. That’s like you look very campaign driven. So it’s often like a very modern experience. You sort of like click into like that.
Maybe a product detail page or a product category page that sort of feels modern ish. You know it’s like sort of a little bit more meat and potatoes like e-commerce stuff. So it’s like those templates sort of probably feel pretty good, but then, like you, might get to the shop card or if you like, actually log into your account, it’s like those things feel way different and and then you get to the checkout flow.
And then you know that might be sort of way long in the tooth or it might be sort of built by you know an external vendor or something because they’re processing, credit cards and stuff like that. So it might not actually be integrated with like the rest of the site at all. So what ends up happening for? Why that matters from a user experience standpoint? It’s not just about other things, look different like because who cares as long as that’s effective, then that consistency shouldn’t ever be like the number one goal of any of this, and I think that that’s when we talk about Design Systems, I think that’s another misconception as That, oh, we just want everything to look the same everywhere and that’s just really not true, because if your metrics are doing well and stuff – and you know the buttons look different on the checkout page then on the the product detail page, then that’s fine right! No harm no foul, but the problem is, is whenever you’re, a user and you encounter say a date picker or something – and this is a favorite one of mine just because those are hard to build so often times developers just sort of go and grab something.
You know a library they find on the internet somewhere and if you’re, you know say like at an airline or a hotel chain, and you have four different developers grabbing four different date – pickers across the site. Now, all of a sudden, every time the user needs to pick a date, they have to relearn that new library and that, even if it’s just fractions of a second or a second or two or the, where they’re like oh wait, I’m used to booking from the Homepage, but this is a different convention that slows down that process right and that has a negative hit on you know, certainly when you’re talking about you know booking flights or hotels or something that’s going to cause it dip.
So that’s sort of consistency from a user experience standpoint right that ability of like oh yeah. I’ve encountered this pattern before and I know how this works. So I could just sort of roll on and sort of fill things out a lot faster or interact with this thing faster like that’s. That’s what we’re after right, so that consistency for consistency sake not so much, but consistency from a you know, sort of mapping to what users are used to already like yeah.
That’s, that’s! That’s where it’s at one of the people, problems on a design and development team is not sharing the same vocabulary or calling the same components: yeah consistent yeah. So what are some of the problems of that? And how can designers and developers get on the same wavelength? Yeah, so that’s one of the biggest things that I encounter is as an one exercise that I like to do with design development teams whenever I’m working on design systems with them is right out of the gate, we conduct what I call an interface inventory, so we Basically go across their entire sort of suite of products, or you know, whatever user interfaces could be served by their design system and and sort of divvy things up is like okay, you go hunting for buttons, I’m going to go hunting for sort of.
You know input fields or whatever, and then we sort of do that as a group and then what we do is we get together and sort of present what we found to each other and that’s where it’s really fun, because, especially whenever you have designers in the Room developers in the room, QA engineers, business people in the room right like the product owners, like all these different disciplines and you actually sort of have to articulate what your UI is right.
So so somebody will get up and it’s like. Oh and here’s this admin bar and then somebody gets admin bar. We call that the utility bar right and then the developers are like. Oh, we we just mark that up as the gray bar right, and so it’s like. Okay, there we go right. You got everything out on the table right, these inconsistent names for the same thing, and of course that means you have to have again just like that sort of user experience you have to like slow down.
You have to have have a meeting to figure out what you’re going to call this thing like, and you know a lot – can get lost in translation in between design team or different disciplines, but also different teams in general right. If team one is calling it a certain name and team, two is calling it something else. That’s a big deal right, so so again, so bringing this all back to Design Systems. What that it, what a design system can do is sort of centralize your sort of UI patterns call them names right, give write guidelines around them, so that everyone is like, literally speaking, the same language right.
They know what you mean when you say utility bar, and you know how to use it where it’s useful, but also crucial. One of the other things that we found really valuable in in creating design systems for clients is here’s. What this thing is: here’s where it’s useful, but also maybe here’s some gotchas or here’s where it might not be useful, and maybe you want to use this other thing. Instead, what are some of the trade-offs of investing in a bespoke design system versus taking something off? The shelf, like a bootstrap yeah, that’s a big one and I’d say it’s tough, because tools like bootstrap and material design are already made.
They’re they’re, they’re well tested right, they’re in use by giant companies like this company called. Have you heard of Google before it’s like? It’s pretty big one. It sounds familiar yeah, so so a lot of these people right who are using tools like bootstrap and material design, they’re like oh, this has been tested by these. You know giant companies, so I could just sort of grab this and go and I don’t have to do all that work myself and that might be true and there are sort of instances of that um.
I think one of the big things that is important to sort of recognize and consider whenever you’re reaching for these tools is that it’s like you, don’t own it and it might be attractive from sort of you know, inefficiencies sake at first but as time goes on Right at the end of the day, your boss or your you know your product owners or your clients or whoever they are they’re going to say. Oh, we need to do this this way or we need to add this feature and all of a sudden, you’re you’re.
You have to learn and become sort of fluent in this other sort of system that you didn’t write, so so it can work and you can do things and extend things and customize things that works with the grain and these frameworks, but oftentimes. What I found is I work with clients that end up sort of working against the grain and they end up having to sort of undo a bunch of stuff and write a bunch of other custom stuff.
And then they end up in this sort of like weird messy middle ground, where it’s like. This is our sort of hacky stuff that we’ve done to sort of make things our own. But then also crucially, I’ll say that, from like a more of like a front-end architecture standpoint, I think that it’s sort of like safe, you know you got good bones to build upon, but like material design and boots actually offer a sort of anesthetic right.
They provide anesthetic and that could be helpful because again it’s like oh here’s, some good, looking buttons, here’s some good, looking form fields, here’s some good, looking components that I could use, but if Nike Adidas Puma, if you know Reebok whatever, they were all to use bootstrap For their redesigns, they would look frightening Lee similar right and that’s sort of not what they’re going for so there’s like there is this sort of branding aspect of it right this own ability that sort of gets lost whenever you’re sort of all using the same thing.
What are some of the challenges or unsolved problems of design of design? I mean I, I think, sort of specifically to design systems like a lot of there’s some things that are around sort of you know, tooling, and sort of figuring out how to keep design tools and tools, expanding quiff. You know what’s in code, that’s definitely one of the most. I feel like tangible sort of problems that but there’s a bunch of teams, doing a lot of work to try to solve that and startups and stuff that there are really exciting.
And so a lot of them look promising. And I don’t necessarily think that that’s you know far and away the biggest problem. That’s out there. I think so. Many of the problems with with design systems have to do with the sort of people have to do with communication and collaboration and sort of figuring out like how do we get this stuff adopted into our products right? How do we sort of communicate when things aren’t working as planned like? How do we sort of you know, establish solid processes for releasing new versions of the design system and letting everyone know like here’s one? You want to use the design system or here’s one.
It’s sort of safe to sort of you know, deviate from that system or build upon it or extend it, and how do you roll that back into the system? So a lot of that sort of coordinating a bunch of different people who are all suddenly relying on this, this design system product that stuff, I feel is – is still very tough to crack because it involves people and your you know the health of your your you Know design and development culture and like how well everyone sort of you know, collaborates together and like, of course, that’s that’s tricky right, so you could like you.
Could I could say things like here’s how I would create a governance plan for a design sister for a design system and here’s how I would you know, get these teams to work. You know and communicate more buts and you know easier said than done. Okay, so how much of a design systems success depends on the designers as opposed to the developers? What is their role in the success of it? I think, and – and this might be a little controversial design systems is sort of an unfortunate name because design systems are like.
Oh, this is about design, and it’s really not. The design system is, as I define a design system is, is how the official story of how an organization designs and builds tadaryl products and there’s a lot of ingredients to that story. And yes, like the design language, you know what what the brand colors are, and you know the the rounded corners or not of the buttons and stuff like that sure that that matters.
But that’s actually like a pretty tiny slice of what a design system entails, and so so when it comes to the success of a design system. So much hinges on that design system living in code and living as a thing that engineers and developers can sort of pull down into their application and sort of you know import a component and sort of see that design systems button or whatever show up on their Screen and then they’re able to sort of you know pipe in whatever sort of attributes and click handlers and whatever to sort of make it.
You know, breathe life into it, make it real, but you they sort of get that stuff for free right. If all you have is like a sketch library or some like Zeppelin file or some like like little, it’s a style guide thing where it’s like: here’s, our colors and here’s or whatever, like there’s so much that gets lost yeah if all the developers are doing is Like copying and pasting some hex codes in there, you know sort of crappy like development environments, and it’s just you end up with a bunch of spaghetti, even if they’re all using like the same color blue.
It’s not like systematize right. So what you want to get to is, you want to say like if we change our brand color blue – and this actually just happened on a project of ours – got a brand color blue and actually it wasn’t passing the accessibility level that we wanted, and so they Actually had to sort of you know: tweet the the color blue in order to make that sort of pass. You know because sort of cut the accessibility, mustard and with a design system like you literally, have you know a variables file or is these design tokens? You sort of tweak that value there and then that ripples out to the entire sort of design system right and then that gets packaged up in a new release of the design system in code.
And then you know next time the developers pull that down. Those sort of get and see those updates, so so, coming back to it’s like yeah, like the design language part of it, like the look in the feel of it that matters, I’m not going to say it doesn’t matter, but it’s almost just like you’ll, like do Your thing make it look good like I, you know. I trust you be systematic about it right. Thinking about motifs that are going to sort of like you know, translate well the different components, but, like so much hinges on like getting that stuff into a place where it’s consumable by the actual sort of you know, environments that users will be interacting with your products And that’s what we spend, probably the overwhelming majority of our time and effort on is actually like building out those libraries with components right, an HTML, CSS JavaScript.
You know bundling that stuff up and like sort of working with development teams to make sure that they have what they need in order to use the system successfully. So, to what extent should a design system anticipate the chaos of user-generated content like errors and long names? What is the actual like breaking point of a design system yeah? Well, I think that the breaking point of the design system has everything to do with how well you consider all of that stuff right.
So if, if it’s user-generated content that you need to account for and you’re in your UIs, then you have to you know, consider things like character limits and things like that. But you know there’s many other flavors of that as well. You know internationalization right, right-to-left languages or just you know, German will wrap onto multiple lines, and things like that – and this is where I think again – sort of designing and building components in isolation is a bad idea because you could sort of you surf fall into the Trap of saying like well, here’s this like perfect scenario where you know everything’s filled in and the card has this nice sort of you know image I found from unsplash and it’s like really nice.
Looking and you know, as it happens, the users name is Sarah Smith and Sarah doesn’t even have an H on it, so it just fits so nicely onto one line and of course, the reality of of our user interfaces is anything but that, and this sort of Also comes back to like the trap, was sort of relying on these sort of static design tools to sort of handle that they’re up until very very recently, there weren’t even conventions in place to sort of handle like dynamic data, so that’s sort of how we handle That this is where atomic design as a methodology – I think, really shines.
So what atomic design does is basically helps people consider the whole the pages, the actual product screens in various states and configurations, as well as the sort of parts of that hole right. So the underlying components that build up those screens and at the page level of atomic design, what we’re able to do is articulate here’s. What our homepage looks like with this. You know the fall campaign with the leaves – and you know this tagline and this call to action button that takes people to this and and whatever, but then you’re also able to say, okay and then here’s what this that same page looks like in German or here’s.
What that that same page looks like with you know the Christmas campaign and oh that’s, sort of image that we’re using that has a bunch of Christmas ornaments that actually is sort of you know, impacting the the readability of the text. That’s sitting over that image or something like that right, so you could start seeing where the UI starts falling down and then what you’re able to do is is sort of take that and learn from that and sort of go back to that hero component.
At a more atomic level and sort of say, okay, we’re going to maybe add a variation of the hero component that adds like a little gradient overlay so that the the legibility of the text always sort of you know pops over the the image a bit more. So how we sort of do things like in our own workflow, with that we sort of will create sort of you know, try to represent the whole bell curve. So it’s like what does a card? Look like what does sort of like a kitchen sink card? Look like with like the maximum character count that you might be able to sort of upload as a user or something or what happens if the user uploads the profile picture, what if they don’t right, and so all those various states and sort of you know, mutations Of the other component, so to get that sort of commonly used case down.
Of course, as like a starting point but like you really do have to represent like here’s, the extreme and here’s the empty and sort of everything in between as well and the only real way to test. If that actually works is by sort of plugging in real products and Aereo’s into your user interfaces and by sort of having that best sort of atomic design system wired up where, like the pages, informs and influences the underlying components, you’re able to sort of make changes To those components with which, then, you know, inform and influence that the actual page design, so it’s sort of like a virtuous cycle between like the design system and the pages and screens that that system builds.
Finally, what resources would you recommend for people eager to learn? More about design, Cisco there’s a lot I feel like. I have a hard time, keeping up with them anymore. There’s a there’s a number of really great resources, one that I help maintain is a resource called style guides i/o, which is a collection of, I think, we’re over like 200 50 examples of public design systems and style guides that are out there in the wild as Well, as sort of talks and books and resources and tools around a design system, so that’s just like an open source resource repository that people contribute to and sort of, submit poor requests to.
There is design dot systems which is maintained by Gina Ann who’s done so much work for the design systems community. She has a clarity conference, which is a conference dedicated to design systems. We have a podcast, which is a little bit in hiatus, but where we interview people that work at different organizations who have spun up their design systems and what they’ve learned and sort of you know struggled with as they’ve as they’ve done it.
Stu Robson has a really fantastic design systems newsletter. That’s part of the design, dot systems, sort of universe there and then there’s also a slack group all about design systems as well. So I’d save it like that sort of has me covered for sure and again there’s like a lot of activity there and new stuffs happening every day and people are learning from things you know from each other and plugging them in at their organisations and sharing what They’ve learned and like that’s really for me, the most exciting part of all of this is just sort of you know.
Here’s some concepts here are some things that we’ve found useful share. Those people take them, learn from them validate or invalidate them and sort of share. What they’ve learned and then everyone benefits from it, so your book is also available for free to read online right where it is yeah yeah, so you could read it at atomic design. Brad Frost, calm great breath. This has been great. Thank you so much for pyrite.
Thanks so much for having me, you can check out the links to everything we talked about in the description below thanks for reading, we’ll see you next time.
Is the letter p. But once you see how this can be done, it should be pretty easy to apply the same techniques to the rest of the alphabet, so i’ll go ahead and get started here in illustrator.
The first thing we want to do is set up a new document. That’s size to 1280 by 1280 pixels and we’re going to set up our documents that we’re all working with a similar view and with similar settings. So what I’m going to do is come up here to where it says view, and I want to turn off snap. The pixel, in fact, from the view, the view menu. The only thing we want selected is snap to point and then we’ll go to window and what we want selected up here is control a line color and gradient, and then we can close out of that and what I’m going to do.
First, is I’m going to come over here to the align panel and I’m going to make sure the align two I’m going to make sure that’s set to align to artboard and once that’s set, I’m going to come over to the rectangle tool up here? If you click and hold up over that button, you’ll get this little flyout menu, I’m going to grab the ellipse tool and I’m going to hold shift and alt on the keyboard and click and drag on the canvas to create a perfectly round circle like that and Up here from this drop down, I’m going to choose this red slash to get rid of the black outline and then for the fill.
Color I’ll just choose black over here and I’m going to take the opacity of that and bring that about in half and then I’ll click out of that to deselect it and right here where it says with ellipse with we want to make sure we have. This turned on this chain link. We want that constrained, width and high proportions. We want that turned on and I’m going to change the width to 300 pixels, so I’ll hit 300 hit enter and then I’m going to Center.
This up on the vertical and horizontal axis, like that, now I’m going to grab this select tool and I’m going to hold alt and click and drag this circle to create another copy and I’ll make the width of this one 50 oops, 150 and then Center. That up on the horizontal and vertical axis as well and I’m going to hold alt and click and drag to create another copy and I’ll Center that up on the vertical and horizontal axis.
And then I’m going to a hole. I’m going to click and drag this top node right here. This top anchor point, I’m going to click and drag that up and then hold shift until it snaps to the top of the circle like that, and then we can let go and once we’ve done that I’m going to click and drag over everything right here. All three of those circles and I’m going to hold alt. Actually, no I’m going to click on the the shape builder tool, which is over here and then I’ll hold alt and click on the center circle to delete that and then we’ll go back to the Select tool.
And then we are left with something like this. So this is going to be the round part of the letter P. What I’m going to do now is I’m going to create the the talent over here. So what I’m going to do is I’m going to click and hold on the ellipse tool until we get the flyout menu and then we can choose the rectangle tool, I’m going to click and drag to create a rectangle like that. I’m going to bring the opacity of that down in half and I’m going to make the width of this one 50 and over here on the inside of this rectangle you’ll, see these little round anchor points, I’m just going to click and drag that in until it Turns until those edges turn red like that, and then it’s going to become rounded, then I’ll grab the Select tool, I’m going to hold ctrl on the keyboard, grab this node right here and then just snap it to the left side of this inner circle right there.
Just like that, and now I’ll click off of the graphic to deselect everything I want to grab the pen tool now, which is over here and snap to the top of this shape. Click then hold shift and bring that line straight through all the way to the outside of the bottom of that shape and then go ahead and click again and now we can. Let go a shift and just finish this shape up going around the outside and back to the starting point.
I’m going to grab the Select tool, hold shift click on the original rectangle, so we have them both selected and I’m going to come over here to the Pathfinder tab. If you don’t have the Pathfinder tab, just go to window Pathfinder and then I should pop up and I’m going to choose minus front. So, what’s going to get rid of that right there and what I do now is I’m going to grab the direct selection tool and I’m just going to click and drag over these two bottom nodes or irin.
Just click and drag them up and I’m going to hold shift to lock it onto the the vertical axis. I’m going to bring this up to about here so that that tail isn’t too long and what I’m going to do now is I’m going to grab the select tool, click and drag over everything, and I’m going to want to zoom in on this. So I can get a better view of what I’m doing so to zoom in I’m, going to hold alt and roll up the mouse field a couple of times and I’m going to come back over to the shape builder tool and I’m going to hold alt and Click on this little piece right here, that’s sticking out from the circle, so that’s gone, and then I’m just going to click and drag over this area.
These areas right here so it combines them all to one shape and I’m going to do the same thing with this area and this area combined that all into one shape and then I’ll just turn that green actually don’t have to go back to the select tool And I’ll turn that green or you know what let me undo that you could hit ctrl Z to undo it I’ll click off that to deselect everything and then click on just this shape and turn that green.
So you can see the difference between the two. We have two different shapes here, so the next thing I want to do is just zoom out a little bit, I’m going to click and drag over both of these and bring the opacity of them all the way up, and I’m going to color them in now. With the gradient, so let me click off with the deselect everything I’ll click on just the black shape right here and under the gradient tab.
I’m going to from the drop the type drop-down I’m going to choose linear and if you notice it gives it a white to black rating we over over. Here we have the white stop and then we have the black stop over here. So I’m going to double click on the black one and then from this drop down, I’m going to choose HSB and I’m just going to choose a shade of pink something like that. Like a deep shade of pink, almost like a red, and we can click out of that, I’m going to double click.
This stop right here. This slider again choose HSB from this drop down and I’m going to make this one like a yellowish orange sort of shade. Maybe something like go with that right there and again click out of that to uh to release it and now I’m going to click on the green shape and I’m going to give that the same gradient so I’ll come over here. The gradient, the drop-down and choose linear, and it’s going to give it the same gradient only we want to flip this around so that the pink is on this side and the yellow is on this side.
So to do that, I’m going to come over here to the gradient tool and I’m going to bring the cursor just to the outside of the right of this strip right. Here it’s going to turn into a rotate icon and once it does that you could just rotate it around 180 degrees and then hold shift on the keyboard. So it locks up exactly on to 180 degrees, and then you could let go and there you have that right there.
So we’re just about done with this design. The only last thing to do would be. Let me grab the Select tool. The last thing to do would be to put a little bit of a shadow right here, so it looks like it’s casting a little bit of a drop shadow over this. To do that, let me click and hold on the rectangle, so I can grab the ellipse tool again and I’m going to create another ellipse, I’m going to hold shift and alt and click and drag to create a perfectly round ellipse.
Let me just make this blue. So we could see we could differentiate it up against the rest of this graphic and I’ll make the width of this one 50 and I’m going to bring the opacity of this down in half and I’m going to go back to the align tab and Center. It up on the horizontal and vertical axis like that. Let me grab the Select tool, I’m going to take this top node again hold shift and then just snap it to the top right there and I’m going to create another copy of this.
So I’m going to hold alt and click to create another copy, I’ll make this one green and then I’ll hold ctrl grab this node right here and snap it over to this node right there. So it’s lined up like that and then I’ll just click and drag this bottom-right node down I’ll hold shift and just click and drag it down a little bit, maybe about that much and then hold shift and click on the blue shape. So we have them both selected and now I will go to the Pathfinder tool and choose front just like that.
Then hold shift click on this shape right here and go back to the shape builder tool, hold alt and click on this interior air right here and now we go back to the select tool, click off with the deselect everything and take just this blue piece. That’s left over and press Delete on the keyboard and get rid of that, and then I’ll just take this blue shape right here, I’ll make that black and I’ll adjust the opacity of it until it looks about light, and that should pretty much do it.
For this tutorial, that’s how you can go about creating these simple letter logos using adobe illustrator. So if you have any questions, let me know and as always thanks for reading, yes,
This is a tutorial covering all-in-one SEO and just the basic usage of it. I install in one SEO to a lot of my client websites that run on WordPress and if you are my client or you’re, just a beginner with all-in-one SEO. Please do check this article out now, all in one SEO, once you install the plug-in and once it is available, there’s a tab here that says all-in-one SEO here that gets enabled once you mouse over it, and then it will show these four settings right here.
General settings performance, social meta feature manager, I’m not going to go over every single one, but let’s just go to general settings just for now on general settings page will basically general settings. Our link will basically take you to the general settings area now, if you’re not sure what you’re doing I strongly suggest, you don’t touch anything, but if you do know, then by all means you can mess with all the settings like that, it’s available for you, but I’M just going to go over three basic settings that you can change, are known and won’t really necessarily break your website or break on searches and results.
So the settings is the home page settings which basically sets tell some surgeons and what that’s running on WordPress, that what your website is about, so the home title. Basically, as it says, is your home title now you want to keep this short. This is Chris Tyler. Crowe art direction, design blog, that’s what my blog is about, and that’s my title so again. If you want to change a section, you can just keep it nice and straightforward and short and simple.
The home description is basically that’s a short description about your blog. Now you don’t want to UM make this too long again, but just want to keep it again short and simple. I would suggest having a low minimum word count as possible, but again this is just basically the gist of what my website is about and again you could change the settings to fit your needs or to best describe your business now.
The home keywords section here is basically keywords that are separated. Commas now keywords there’s a lot of statements saying the keywords are not relevant in regard to search engine results anymore, but again it’s better to have something than nothing. So I just kind of added different keywords: separated by comma again just to kind of bump up the results, if possible. Now it doesn’t have to be hundreds and hundreds of keywords, and even though I have a lot here, but you know just have a good number, like maybe 10 20, if you can and then go from there.
So once again, that is, set we’re going to go into a utilizing, all-in-one SEO, with all your blog posts and your pages now, when you go to a post, you want to click on this link right here that will display all your posts on regards to your Blog, so if you’ve written a lot of blog entries, you should get some a list like mine, but you can see here and once you have only one SEO installed, it enables a new column here called SEO title SEO description, SEO keywords.
Now what this does is that it assigns different SEO our title, description and keywords based on individual blog posts and pages. This is very important because it index index is your page as a separate page from your home page. If we are you back in the day, we used to use a description and keywords on all of all web pages, meaning the title was the same. The description was the same in every single page.
Well times have changed now: there’s better mom, effective method with SEO, and this plugin allows you to do so now to enter the SEO title SEO description, SEO keywords onto your blog post: we’re just going to go to an old blog post that I published, but if You’Re writing a new one. This is also the same information. So take a look here. Here are the contents and whatnot, and I have an extra section because I have that enabled and then you have your visions and here whatnot and you might not see everything you on that you’re.
Seeing on the screen on your blog page, which is fine, because I have no one plugins installed, which enables these things, but on the bottom, once only one SEO is enabled you see, you should see a window that says all-in-one SEO pack now from here. This is where you enter your title, description and keywords. Again, don’t worry too much about these things right here. Basically, what this does is kind of disables or prevents on search engines following you.
Don’T want to do that today. So, let’s not even talk about that. So again, this was very similar to the settings page, but now we’re in an individual blog setting, so we’re going to have our own unique title, which will be which what I do is use you to use the blog title as long as it’s not long enough. On this already, this title right here is already using too many characters, because you have to show you the Dirk account of 69 right here, but most search engines.
This is right here. Most search engines use maximum 60 characters for the title, so maybe we can join this and say Adobe Creative Cloud. Only this was my blog post and, as you can see up here, the previews limit, except that you can see how, on what it may look like on search engines and then on. The description again is the same thing as the settings page. But we’re going to set a separate description for this page because, when write something that’s relevant to this article, so this one has its own description, that’s separate from the home page and then again.
This one also has a separate keywords from that’s different from the home page. The keyword section again doesn’t have to be hundreds of hundreds of keywords, so don’t spend too much time on it, but just enter a few keyword, that’s relevant to the article or blog news that you post and that’s pretty much it after you fill these out you’re. Just going to hit the Update button right here, just like similar to when you’re publishing a blog article and then it’s just going to change the post for you now the proofreader thinking came up, so I’m just going to hit OK and then once we hit okay.
It’S going to take us to the Edit post page, it’s going to say, post, updated and view post. Now, let’s go back to the list, our blog list and as you can see that my SEO title has changed. Adobe Creative Cloud and my description in my keywords. So that is one method of entering SEO separately from each and individual article. This is a really good tactic to use in terms of search engine results. Just take the time.
Every time you publish a blog take the time to put in the SEO title SEO description, SEO keywords, because it will benefit you in the long run. Now, when you want to enter separate SEO information on your pages, you go to the pages section right here, so I’m just going to click on pages. It’S going to show me show you all the pages. That’S currently live on your site or not live if they draft. If it’s not live, but if it’s live then you could just choose the pages.
Now I don’t really use pages on my blog because strictly a blog, but I have some few examples up here. So, let’s just go to edit and again the editing. The page editing section is just like a blog post. You know nothing, nothing too different on outside of page attributes. We don’t have to want to worry about that today. But again you see how there’s this option here called all in one SEO. Pack and again, you have an option to enter the title, description and keywords.
Now. One thing I did not go over with individual blog post is the social settings, and I’m going to go over that with you now, but social settings basically is when someone were to share your article on a social networking site like Facebook and whatnot. You can also choose to have an SEO settings separate from the main settings, so the set of the title could be anything something something may be different or it could be something it could be the same.
To be honest, the description can be the same or something different, and then over here you can see it says, image these options increase in terms of options. Depending on what how many number of pictures you used on a blog post, you can actually choose images. Show up, for instance, if someone shared the blog content on Facebook or Twitter, these images will show up as a kind of like a preview image on Facebook, for instance, if you share it on a facebook, like page your own, like page this point, if I select This this image will show up and say, check out this page or check out this blog post by yada-yada-yada.
So this is where you kind of choose your image or you can choose a custom image and upload it. If you want Isis, you use a picture. That’S already been used on a blog blog article and go from there. Don’T worry too much about specified image width image height. Don’T worry too much of a facebook object type and going over too much about twitter car type. Unless you know what you’re doing you can choose somewhere a larger image or photo, but again these are just individual settings for your social network.
So again the pages and the post SEO settings are really not different, but it’s still something really important to do. Make sure you have separate SEO information on different pages relevant to that page, so, for instance, if you have like a gallery, then you would have a title here called gallery and then that that’s it, so all you have to do is type gallery in the best Part about all in one SEO pack is after you type in gallery.
It will automatically follow, follow up with the website title of your whole entire page, so mine will mines called Chris clavicle art direction. Design. If I put gallery on the title, title bar of the browser or the title bar of title of the page would be called gallery Chris Tucker art direction and design and again have something different for description. That’S a relevant to your page. If you have a gal, let’s say if you have a gallery page may just make the disruption.
This is the gallery page of my business incorporated and whatnot so again, keep it relevant to that page, but remember to always have something different for each pace. For the best searchers and results, I hope this article helped you again. This is of just a very basic broad overview of all-in-one SEO. If you have any more questions or one that you can all you’re always welcome to email me, but I hope covered some ground for you.
Thank you very much.
You have to try the best pumpkin seed snack from Spunks! Learn about the creators by watching the video below.
So here’s a search result and a series of search results. Anyways, and you can see the top three right here. The first thing to notice is this big link that everyone clicks on the content inside here is the title tag of your HTML file. So if I have an empty HTML file right here, whatever you type in between the title tags here shows up right here.
So that’s a very important section for keywords: it’s the section that most people read not too many people actually read the description underneath. But the title here is extremely important because that’s what people see as well as Google uses the keywords from the title when displaying search results. Another thing that’s important to our website is this description. Underneath here this description can come from one of two places: either the Meta Description tag in our HTML, so we could have a tag like this at a name equals description and content equals whatever and put a small description in here.
So this will either come from that tag or it will come from the first paragraph on your page, so it will come from here now, there’s no way for us to tell Google which to choose either the first paragraph or the Meta Description. Google just figures out whichever one is more appropriate, whichever one is more targeted to humans and that’s what we’ll be choose chosen. So the description here and the title here, we have control over another place.
That Google looks for keywords, as you can see. Right here is the URL you’ll notice that the keyword, dinosaur or dime soars down here has been highlighted in the URL, showing you that the URL that you choose for your website actually impacts your search results. There’S a few other things right here. These links underneath the search results. We don’t really have any control over those Google figures out.
What links are important and shows them at the bottom, underneath the search results right here for this movie or this is the TV series. Actually, you can see there’s a rating, so it’s giving us a star rating and a numerical version and how many votes this information here is taken from the enhanced metadata supplied by the website and then we’ll look at that in future articles. So what we’re seeing here in the search results page is a few things.
The blue is the title. The green is the URL that we’ve chosen and you can see it’s matching keywords in that, and then this here is either the first paragraph on the site or the meta description. So that’s where Google gets the content to display in its search results page and the same thing applies to other search engines like DuckDuckGo and Bing. So the same sort of techniques are applied for those also
You have to try the best pumpkin seed snack from Spunks! Learn about the creators by watching the video below.
Jimmy's Internet Marketing Business Blog 