#blue UI WordPress theme | Explore Tumblr posts and blogs

amershamsdigitalmarketing · 5 years ago

Text

Smashing Podcast Episode 9 With Stéphanie Walter: How Can I Work With UI Frameworks?

Drew McLellan

2020-02-11T05:00:00+00:002020-02-11T08:07:04+00:00

As a developer myself, one of the things that I like about UI frameworks is that they often come with default styling, but is that something that we should be relying on in projects? Simply using the default styling and trusting that whoever produced the framework has done a really good job in designing those components? Join me for today ’s podcast episode in which I soeak to UX Designer Stéphanie Walter about things we should be considering when building on a UI framework.

Show Notes

Stéphanie’s website

Stéphanie on Twitter

Weekly Update

“How To Create A Card Matching Game Using Angular And RxJS” by Anna Prenzel

“How To Create A Headless WordPress Site On The JAMstack” by Sarah Drasner

“Magic Flip Cards: Solving A Common Sizing Problem” by Dan Halliday

“Django Highlights: User Models And Authentication (Part 1)” by Philip Kiely

“How To Create Maps With React And Leaflet” by Shajia Abidi

Transcript

Drew McLellan: She’s a user centered designer and expert in mobile experience, who crossed delightful products and interfaces with a special focus on performance. She’s worked on projects for clients such as the University of Luxembourg, European Investment Bank, BMW and Microsoft to name but a few, and she helps those clients deliver successful projects to their audience all the way from strategy to the final product. She’s a Google Developer expert in product design and a passionate teacher sharing her knowledge in numerous blog posts, articles, workshops and conference presentations. So we know she’s an expert user experience designer, but did you know she once had a job fitting carpets with Sir Elton John? My Smashing friends, please welcome Stéphanie Walter. Hello Stéphanie, how are you?

Stéphanie Walter: Hi, I’m smashing and loved the introduction.

Drew: So I wanted to talk to you today about a particular issue and that’s the subject of using off-the-shelf user interface frameworks. Now you’re a user experience designer and you work with lots of different clients and your job is to help those clients create the best possible user experiences through crafting highly usable user interfaces. So the idea of being able to do that with an off-the-shelf set of tools seems like a bit of a stretch to me. Is the use of UI framework something you see a lot throughout your work?

Stéphanie: Yeah, it’s something I’ve seen a lot, especially in the last few years because I started working with an agency and now I work within the company. So in those super big IT tech teams and yeah, at the moment there’s a lot of framework UIs like the one that I’ve seen the most is Material-UI, basically Material design is a Google design kind of guidelines and thing, and Material-UI is the team from Angular, but also the team from React. They created their own framework using kind of the look and feel of the Material design from Google. But it has nothing to do with Google anymore. It’s just like they, I don’t know, I think they liked the look and feel. So at the moment, those are the two main UI framework I work with. And also there’s something called Ant Design, that’s grew quite popular.

Stéphanie: It’s a React framework. I don’t know if they have Angular too. I think it was made by a team in China. And it’s interesting because not only does it provide the components, everything in React, but if you go to their website you’ll also get the scratch files, which is actually quite interesting because then it kind of motivates or helps the designer build or shape the interface into the UI components used by that framework. So yeah, it’s something I’ve seen a lot, especially in big IT teams because most of the times those don’t have a designer. At the moment I’m basically UX team of one in a small team at a European investment bank. So it’s me as a UX designer. I work with a team of developers, business analysts, all the good people, but still is one designer for the whole project.

Stéphanie: Until I arrived there was no designer. So it’s kind of a solution implemented in a lot of companies, especially on internal products for instance. Where they usually say, okay, we don’t really need a designer for that. We just need something that works for our internal users and let’s just use a framework because it’s convenient for the developers. Most of the components are already there and since they don’t have designers in the team, then it’s kind of replacing, as to say, the role of a UI designer. Yeah, problem with that is that, okay, then you have the components, but the role of the UI designer is not just to decide about should the button be red, green, orange, blue, whatever. Usually the role of the UI designer is information architecture, understanding user needs. So everything that goes beyond the interface. So even if you have this kind of framework that kind of takes care of the whole UI, So visually what you see on the screen.

Stéphanie: You still need someone at some point to do the job of understanding what do we put on the screen, how is it going to behave? What happens when we click here? How does the user accomplish their goal? How do we go from point A to point B? Because we can use a model, we can use tabs, we can use all of the components. So that’s why it’s always kind of a little bit complex and tricky.

Drew: Is it possible, do you think be able to create a usable user interface using an off the shelf UI framework, or is it always going to be a bit of a compromise?

Stéphanie: I kind of hope so. I kind of hope so because otherwise I’m building not usable interfaces. So this answer is totally biased, but yeah, I think it is, but it also depends on the level of compromise you’re willing to do and there’s compromises on both sides. At the moment I’m compromising a lot of buttons for instance, because you have some really specific buttons in Material-UI, and I don’t really like the ripple effect on the button. I think it works great on mobile because on mobile you need a kind of a big feedback when user clicks on or touches the button. But then the steps is kind of ripple effect that goes all the way on the button. It’s a little bit overkill, especially when there’s a lot of button. But still we are going to keep this ripple effect because it would be super complex to remove it because this was built in to the React framework. And to have another hover effect on this button, something more subtle that will not be this kind of whooshy thing here. It would be super complex.

Stéphanie: So this is the kind of compromises you do. But on the meantime, I don’t compromise on specific things which is custom components. Where I was working before, the current client for a travel and airline company. And airline has some really, really super specific needs. The calendar for the airline for instance, you want to put prices, you want to put… if you don’t travel to this destination on a specific date, you don’t know when to put that, you have this departure and arrival and the basic calendar of most of those UI frameworks don’t provide these kind of things. So at some point you can say, okay, we will just use the calendar they have. And that’s it. You need to go beyond that. So most of the compromises are basically built on, do we use the basic component? Do we create a custom one that will fit the user needs? Or do we make a mix of the two? In the case of the calendar, for instance, we use the calendar grid, so we use the basic component and then we enhanced it with customization on top of that. So it was a lot of React development for that one.

Stéphanie: And yeah, so usually you do a lot of compromises.

Drew: So it sounds like using a user interface framework can get you a certain amount of the way there, but to really have a good user interface as a result of it, you need to do quite a bit of customization on top?

Stéphanie: Usually. Yeah.

Drew: Does that customization go beyond theming?

Stéphanie: Yeah, my developer wished it wouldn’t go beyond theming. Eugene If you listen to me. I think he would be super happy if we would just change a few colors on everything. But yes, at some point you need to go beyond the customization because first, like UI frameworks are like Lego tools is kind of a toolbox. So you have a lot of different components in the box, but this doesn’t build a page. You still need a header, you still need a footer. You still need extra content that was not in the framework. So sometimes you can tweak a component into what you needed. From what I understood, we are using the card component to build a modal windows, but the thing with the modal windows is that it doesn’t really behave like a card.

Stéphanie: You are kind of going a little bit beyond that. You need a background with obscurification. You need to trigger it on click while usually your card is already there in the interface. So we are using this card component because it has a lot of the things we need like the background, a header and a title at the top, some buttons at the bottom. So we have the structure and then we tweak it a little bit. But we end up with some conflict sometimes about semantics, HTML as well. Because for instance, I wanted to have buttons that didn’t have button shapes, so just like link button and the developer said, “Okay, so we use a link like your href link.” I said, “No, this is not a link. It’s a button. When they click it, it doesn’t open a new page. It clears everything that is into the form.”

Stéphanie: So it should be technically from a semantical point of view, it should be a button. “Yeah. But it doesn’t exist in the framework.” I say “So okay, I know so what do we do?” So usually you start discussing these little things and since I’m really annoying my developers with accessibility also, this is another extra layer of trying to make sure that we have the basic components that they work well with. But also that they are semantically like I don’t want to have buttons with gifs within gifs within gifs. Otherwise we’ll have issues in the end.

Drew: I guess starting a new project that’s going to use a UI framework, you probably need to start with some sort of user research.

Stéphanie: Yes.

Drew: Is that fair?

Stéphanie: You should. You need to. So yes, usually you can have all the components you want. You still need to know what do your users need on the pages, how are they going to navigate? You need to build a flow. So usually even before deciding on a framework, what we do is we go to our users, we talk to them, we try to understand their needs. So at the moment I’m quite lucky because the users are internally within the bank. So we do a lot of workshops with them and you have to imagine it’s a super complex interface. We are migrating from something that was built, I don’t know, I think 10 or even 15 years ago to something all new shiny using Material-UI React. So it’s quite a big change and you have to understand that during those 15 years, everyone who wanted something could go to the support and then they ask the IT team to implement it. So at the moment my interface is like 400 pages with tables, within tables, within tables, with other tables, and stuff that shouldn’t even be in tables.

Stéphanie: Like we have a lot of things that are just key value, key value, key value. So they build the table with two columns. I’m like, “Nope, maybe we can do something better with that.” So at the moment what we are doing is we did some user research to understand the different goals of the users. So what we identified is that what they do with the interface, they have some planification goals. They need to plan their work. So I want to know that this operation is going to go to this meeting, so I need that on that schedule, stuff like that. They want to monitor a thing, they want to report the data. So monitoring is just like looking at the data and making sure everything is fine. Reporting is being able to exploit the data, to do something with it they want to share and to kind of collaborate with colleagues and all of that we discovered by discussing directly with the users.

Stéphanie: And what we discovered is that actually some of the things we were planning on migrating at the end are some of the most important things on a daily basis for the user. So the planification user goal is one of the kind of biggest one at the moment. So we are really, really working on that. So yeah we do use the interview and now we are in the phase where at the moment we are super high level saying okay we need to build the shell, we need to understand navigation. But at the moment we didn’t really go through all of the data and this is now what we are going to do. And it’s interesting because we have a lot of tables and we said we can either go the kind of not smart way and just put the tables in the new interface and we’re done, or we can say, okay, let’s try to understand what those tables are, What do our users use this table for?

Stéphanie: And then maybe some of the tables could be displayed as data visualization and then to do that you need to understand the whole business So that the data makes sense. So if you have a nice framework and you say, okay, let’s use this chart… I think is called chart JS framework. You have a lot of things, you can have histogram, pie charts and graphs and everything, but at some point you still need a designer to help you decide. Okay, this data, does it make sense if we show it into a graph or it makes more sense to show it as a pie because we want to show part of the whole, or we want to compare evolution for one country in the last 10 years, then a histogram is more interesting. So based on what the user wants to do with the data, you are going to display them a whole other way.

Stéphanie: And usually it’s not a developer job to do that. Our developer, they’re super smart guy. I’m sorry, but I honestly work with guy developers, I wish I had some ladies, but no. None of them are women. So super smart guys but they are not super qualified to say, okay, this data should be displayed like that, that, that and that. So in the end you still need some designers go to talk to the users, understand what you can do with the data and this goes far beyond just saying, okay, this should be a tab bar or this should be a navigation on the left.

Drew: And after making those sorts of decisions based on talking to the users. Would you typically take the resulting prototypes or designs back to users to test them again to see if they understand your type of chart choice for example?

Stéphanie: Yeah, we did that a lot actually, which is really nice because then you don’t develop something until you know it’s going to be useful and usable. So it depends. If it’s quicker to actually develop the thing because they have already most of the components, what I usually do is I do really quick paper prototyping and then we develop the thing because it’s quick, even without the data. If it’s something complex, something really, really new that will take a lot of time to develop, then we say, okay, we design a few screens and we do some testing directly on the screen. So we have a tool it’s called InVision, where basically you put all of your design, you can create links between the different parts. The thing is it also depends what you want to test. If you want to test phones for instance, it’s a nightmare to test those in InVision because the people can’t really feel them and especially on mobile phone for example.

Stéphanie: So it’s always kind of being smart. What’s the fastest and cheapest way? Is it faster and cheaper to test only designs. Is this enough? For forms usually, not really because you have auto completes all of the heavy lifting you put in the front end who have actually the user fill a form so for forms, maybe it’s more efficient to actually build a form and test it. But for new things, yeah, we do a lot of designs. We go to the users. So at the moment we either do one-on-ones, but my users are really busy people. It’s a European investment bank so they don’t have that much time. So what we usually do is that if we come to one-on-one with the users, we do some small meetings, like more like focus groups. And it’s also interesting because then you have kind of a confrontation sometimes. Some people say, “Yeah, I think it works for me because I work like that and that,” and then there’ll be other people who are like, “Oh you work like that? Actually no, I do it like that and that.”

Stéphanie: So it’s also interesting to kind of have a few people in the room and to listen just to the conversation, taking notes and say, “Oh maybe then we could do that” and “This component would be better based on what I just heard.” And things like that.

Drew: If you’re working with a more general audience for your product. So perhaps not internal users like you have, but more the general public, are there inexpensive ways that designers can get that use of research in? Are there easier ways if you don’t know directly who your users are going to be?

Stéphanie: You should know who they are going to be otherwise it does the job of the marketing people before building the product. But yeah, we did some guerrilla user testing for instance, You can still use InVision for instance. So you can build some prototypes in InVision and then you can recruit the users through social media, for instance. I was working for a product that helped, what is the name, car dealerships mechanics who repair things and then to also inform the client about extra repairs, things like that. So we had already kind of a growing community on LinkedIn and Facebook. So what you can do is you can recruit those people. You can do remote testing, like we are having conversation in a tool like an online tool. You can do some screen sharing. So we did that for some project also.

Stéphanie: I would just give you one advice is test the tool before, because I was using, it was called appear.in. But I think they changed the name to Whereby or something, but it’s really in the browser who I said, okay, it’s nice because then the users don’t need to install anything but do users were not on a real computer. They were into VM, into a Citrix and they didn’t have microphones so what we ended up doing is like they used my tool to share the screen. They were clicking on the prototype and at the same time I had them over the phone, like a landline phone, to talk to them directly. So there’s always, this was a quite cheap because it was a wonderful day of recruiting, I think we had 10 users or something like that. Yeah, you can do a lot of things even if you can’t go face to face, I’ve done a lot of usability testing directly on Skype or things like that. So there’s always some cheap ways to do that.

Drew: When it comes to choosing a UI framework to work with, if that’s the route that you’re going, is that something that you would leave just to the developers or is that something that designers should get involved in too?

Stéphanie: For me, you should involve the whole team. Like the designers, the developers, maybe also architects if you have some, because how the framework is built might also influence these kind of things. Unfortunately, most of the time when they arrive on the project, the framework was already decided. No, actually it’s funny, either it’s already decided or they ask me to validate their choice of the framework, but I didn’t do any reviews or research. I have strictly no idea what’s in the project because they didn’t even show me their screens. They’re like, “Yeah, do your thing. We can use this framework.” I don’t know. Well, do we have a screen? So they ended up showing you a few screens, which was a Windows native app they wanted to migrate in the cloud. They said, “Yeah, we only need the buttons and mostly like forms and things like that.”

Stéphanie: But it’s really hard to say, “Yeah, go for this framework, we have all of the components we need.” Or like, “Don’t go if you don’t have a rough idea of what’s your content going to be, what is the navigation.” So I think you should still have kind of a global overview before choosing your frameworks unless you’re 100% sure you have all of the components. But I have a feeling that most of the time the framework choice is basically based on what technologies do developer like at the moment, do they have experience with a framework before that? We used Ant on some projects just because a few developers had experience with that and they really liked it and they were kind of efficient using Ant. And for the Material React UI it’s the same. It’s like because the developer already used it on previous projects, so they are efficient with it.

Drew: So really it’s got to be a balance between what the developers are comfortable with, what they know, what’s going to work with their technology stack and then what the requirements of the product are in terms of creating a good user interface. And you somehow need to balance the two of those to find the ideal framework for it.

Stéphanie: Yes. I have a kind of a specific requirement for some project, which is… I’m in Luxembourg, we have a lot of European institutions and things like that, so we have an extra accessibility requirement for some of those. And usually when the framework was decided, they didn’t really check about the accessibility of their framework and then they come back a few months after the beginning of the project saying, “Oh, just told us that there’s this new law and we should be accessible but we don’t know how to do that.” Like yeah, it’s a little bit too late. So for me, to choose a framework you need really to know all of the constraints at the beginning of the project and if accessibility is one of them you need to test your components and make sure that they are going to be accessible. But I am not a React or Angular developer, but I’m pretty sure that it’s super complex to turn a not accessible UI framework into something accessible. I guess it might be a little bit complex to rebuild all of the components, so things like that.

Drew: If you find yourself working on a project where that process hasn’t taken place and a UI framework has already been chosen, is there a danger that the user interface could start being influenced by the components that already exist within that framework rather than being driven by the needs of the user?

Stéphanie: It really, honestly, most of the projects I worked on, eventually you end up having a lot of trade offs, even if you really try to push. So it’s mostly about balance and discussing with the developers. So usually what I do is we do some wire frames, even quick paper wire frames, say okay, on this page we will need that and that and that component, the first thing I do is I ask the developer do we have that in our framework at the moment? What does it look like? And then we decide together, okay, this is a component that would do the job or okay this will not do the job. Do we tweak it? Like do we still keep the component but change it a little bit so that it does the job, or do we build something from scratch?

Stéphanie: And at the end of the day it will depend on the budget of course. So you ended up doing trade offs. Like I would be okay for small components that are almost never used if they’re not perfect and there’s kind of few issues. But for main navigation, main structure, things that you see all the time on the screen, for instance, this really needs to work. The user’s needs to understand how they work efficiently and yeah, it’s, as you said, finding a balance between the ideal experience you wish you would have if you didn’t have any framework and what you have at hand and the budget and also the timing. If we say, okay, for these sprints, the feature needs to be finished at the end of this sprint, and then they say, okay, but if you want your components we will never finish the feature at the end of this sprint then you start discussing, okay, do we finish this feature in the next screen, do we take more time to do it properly? And usually it really depends.

Stéphanie: The things that frustrate me the most is when I know that we use a crop fix component and they say to me like, Oh no, don’t worry. We will fix that later. And I knew that the later unfortunately might never happen. So depends on the team. But after a while you have the experience and you know, will this later arrive and or will it not? Yeah, it’s about compromises. When you are working with these kind of tools.

Drew: As a developer myself, one of the things that I like about UI frameworks is that they often come with default styling. So that means that I don’t necessarily need to have a designer maybe to help me with the look and feel of all the components. Is that something that we should be relying on in projects? Just the default styling and trusting that whoever produced the framework has done a really good job in designing those components? Or would you be styling those components yourself?

Stéphanie: I think it truly depends. The problem for instance with Material-UI is the look and feel of your a web app will be basically the configured Google products. So if you don’t actually change the font, change a few colors and kind of bring your own brand identity and do that, you’ll have a product that will just looked like any Google product, which could be a good thing because if your users are used to Google products it might help them understand it. So usually if you don’t have a designer in the team, do you have any choice? Like a lot of the different work I’ve seen, they come with custom themes so at least you can change the colors. I think you can change the fonts also pretty easily. But again, like if you change the colors and you’re not super good at design or even accessibility, maybe the colors you will use will clash, they might have contrast problems.

Stéphanie: For instance, I love orange, but it’s one of the most annoying color to work with because to have a real accessible orange, for instance, as a button with white text, it almost looks brownish. And if you want to have this really shiny orange, you need dark text on top of it to make it readable but it kind of makes your interface look like Halloween at the end of the day. Yeah, I see you laughing. But it’s true. So it’s always about these kind of compromises and say if you’re a developer and you want to use the framework as it is and you don’t have a designer, I think it’s still better than not having anything and building it from scratch and then it’s super complex to use. But the thing is, just because you have the components doesn’t mean you will build a great interface. It’s like Lego bricks. If you have the Lego bricks, okay it’s fine, but you can do a real nice spaceship or you can do something that isn’t holding together and will fall apart because you didn’t have really a plan.

Stéphanie: So design is kind of more than that. Design is about really understanding what’s going to be on the screen, how it will work. And I know some developers who actually have the capability to do that. So they are really good with usability guidelines and they understand a lot of design rules, for instance. So when it comes to choosing the components, they’re really good at that. And I know developers who have no idea what components to choose and choose the first one that does the job. But after a while it doesn’t work anymore. Like tabs for instance, we had an interface where some developers chose tabs. I think it makes sense at the beginning when you only have three items. But then there was 12 items on the screen and then you have the tabs that are three lines of tabs, and all of those are the same level one tabs, and there’s tabs within tabs. So they had the component, it looked nice because they use the framework, but it wasn’t really usable.

Stéphanie: And I had the same with like a modal windows for instance. Where they build the projects without a designer and after a while I think the client asked for more and more stuff into this modal. So they ended up with a screen with a table and when you click on add a row, you open a modal, and in this modal you have two tabs, and then in one of those tabs you even have another table and then they wanted to add an extra stuff into that, I was like, okay, maybe we can put a modal on top of a modal. And at some point the designer would reply, okay, if you have that much content in the modal, it should not be a modal window. It should be a page. So even if you have the component, you still need kind of an architect to do the plan and make sure that all of those components work well together.

Drew: So if as a designer, you’re being asked to change the styling of some components, would you just try and change all of the styling? Would you customize all of it or are there certain areas that you’d focus on?

Stéphanie: Colors I think because it’s the first thing you see, colors can actually bring you identity. If you have like a strong brand identity, at least having the colors of your product on the buttons or the icons and things like that, already helps you customize the framework. Fonts because I think it’s easy, if the framework is well-built, usually you change the whole font family in someplace and then it should kind of cascade on the rest of the site. So colors and fonts is I think two easy ways to quickly customize the framework. Icons is another nice way to bring personality, but it might be difficult because from what I’ve seen, most of the framework come with custom icons or Font Awesome or like a library already built in. So to replace those, first you need a lot of icons if you want to replace them all. So it might be a little bit complex. I have also seen frameworks that lets you choose which icon pack you want to use. like Font Awesome, Glyphicons and some of the other ones. So this is the kind of things you can quite easily customize.

Stéphanie: And then it’s about look and feel, for instance the header, usually you have different kinds of headers, footers. How do you navigate things like that. So there’s already a lot of small customization you can bring so that it doesn’t look Material-UI-ish, it more looks like your brand and then you can play around with border radius’s for instance. Whether you want completely rounded buttons, or you want square buttons or you want something in the middle like shadows also. So some small stuff that are kind of usually easy to customize because most of those frameworks have them in CSS variables. This is the kind of small things that you can customize without I think a lot of effort, except for these ripple effects. I hate that. I’m going to fight it. I kind of hope they change it eventually.

Drew: I guess things like that, that might seem obvious might seem just like a surface level effect, Do you think that would be easy to change and in this case it turns out it wasn’t easy to change? Is that just a case of speaking to your developers to find out what’s going to be easy to customize and what’s not going to be easy?

Stéphanie: Yeah, usually, especially if they’re used to work with the framework, they know what’s easy to change on it. It depends on the developer, I had discussion with one developer and I asked him if we can not have like uppercase buttons, because they are kind of a little bit hard to read, especially in the font we were using, he went into the documentation and say, I don’t know if we can customize it because I can’t see it in the API. I was like, what API? It’s like CSS class, CSS definition. You remove the uppercase from the CSS and it’s done. So he was like looking for an API to change just the font, how does the font look like. And I was like, yeah, but if there’s no API for that, I think you can change it in CSS.

Stéphanie: But then it’s complex because if you have to change this in like all of the CSS line. So it’s usually kind of a big discussion. It was the same… was like drop downs. So Material-UI, the React version we use, has some customized drop downs. So when you have a select box like form element, the select it opens these custom components and I don’t know why but we have a big problem with that on Internet Explorer. We are going to migrate to windows 10 and Edge. I’m looking forward to it, but we are still Internet Explorer 11 at the moment. And what’s happened is whenever you use or you open one of those components, it freezes the screen behind it and you have a scroll bar, so it kind of jumps around whenever you want to use one of those.

Stéphanie: And at some point we discuss with the developer, is the customizing of that worth the screen jumping around whenever users click on that. And it’s like, honestly for me, no, I prefer it not to jump and we use the select in the browser, then it will not look the same if our users have Edge and, no not Edge, IE. Or if some users are using Firefox, okay? So it will not look the same but it will be the native one and it will not make the page jump around every time someone clicks. So it’s this kind of discussion also, do we want to customize it but then it’s kind of clumsy or do we say, okay we are not going to customize it. We had the same debate with a scroll bar because we had another project we had drop-downs and they were 100 elements at some point in the drop downs. So there’s an auto complete but you can still scroll inside the drop down. And the developer said, yeah but this is looking really ugly on IE, the default scroll bar.

Stéphanie: And they investigated, they found JavaScript library that would let us have this really small little a scroll down you have on Mac and have it everywhere. Then we said, okay, is it worth investigating? We need to investigate, test it, put it everywhere, test all of the browsers. So we said we are going to do it, but only if it doesn’t damage the performance and if he doesn’t damage the rest of your experience, otherwise it’s perfectly normal that the browser element don’t look the same on any browsers. So at the end, don’t customize everything.

Drew: I guess it’s a collaborative team effort, then? Everyone needs to discuss and balance up again all the different performance factors, ease of customization and where that customization happens. So once you’ve got your UI framework in place, you’ve got all your components specified and built out and customized and styled to how you want them. I guess you need to document that in some way to maintain consistency?

Stéphanie: So at some point as a designer what we usually do, we already document them in our sketch files. So we have the working files with every single screen and everything. And in the sketch files we have really specific art boards where we put all of the different components. So that if another designer works on the project, they know that the components already exist and they can just drag and drop it in a new page and reuse it afterwards. So we have this system where we document the components also we document the use, like when do you use this component? When do you use that one? Where is this one working better? So all of the different states for instance, like inputs, we have I think 10 of those, like a focus with a placeholder, without a place holder, with content like arrows and things like that. So again, we bring consistency and then the development parts, it really depends on the kind of maturity of the communication of the team. So what we are currently building is basically a library of components and we are also building the tool around it.

Stéphanie: So my developer is currently building that and the idea is to build the component first in our kind of a sandbox, document it. Also he builds things where you can change the colors and if have a button for instance, you can change the icon, you can change the text to see if it will still work with longer text, smaller text, things like that. So we are building this sandbox and in the sandbox, you have a ‘Read me’ tab where you have documentation for how should this look, how should this component be used, when, how is it supposed to behave? Like auto complete for instance, seems to be something really, really easy, But if you start actually designing the flow of the auto complete, what happens when you put the focus in the field? Do you start auto completing or offering suggestion after one character after two, after three? If it’s after three, what happens in the meantime?

Stéphanie: So there’s a lot of different questions about that that we also document, which is really going super deep into that so that if this auto complete gets implemented on another project or gets used by another team, they know exactly how it’s supposed to work as well. So we kind of do the same. The two of us, so designers are documenting into the design tools and usually in the design tool we document the colors and shadows and gradients so that the developer don’t have to look around and try to remember exactly what the hexadecimal code for this button was and things like that. So in the end it’s kind of you have this UI framework that was super generic and you customized it, you made sure that the components you use are actually the ones that are going to help your user accomplish their goals.

Stéphanie: Everything you’ve customized is kind of starting to become your own little design system. So at the end you’re building a design system, but instead of building it from scratch, you’re basically building it using React, Material or, what was the other one? Ant or something like that. So it’s the same constraints.

Drew: Would you go back to user testing at this point after things have actually been built? Would you go back and test things with users again?

Stéphanie: We have tests, like real people testing, like regression testing and making sure that everything works. Like when you click it works, when you hover it works, stuff like that. But yes in the end, especially if we didn’t do a prototype, if we did the user testing in mockups, we want sometimes to test it again with the real users who have a feeling that everything is still working. So yeah, sometimes we go again into user testing at the end. We do that usually at the end of a few sprints where the features were implemented. So usually what happens is like we do the research, we design the feature into design tools, we do quick testing at the beginning, then it’s implemented, we do tests to make sure it works. And then again we go back to the users.

Stéphanie: And it’s also interesting because we are building a community with the users. So they’re actually quite eager to see that. The first testing was a little bit kind of a sneak peek, like, Oh, this is what it might look like. And then they are super curious about how it works and how it looks like at the end. So we go back usually in one-on-one testing for that or if we don’t have the time, we do just like panels and also we deploy it. So sometimes we do AB testing also sometimes if we don’t have time for the user testing one-on-ones, we deployed it and then we say, okay, it was deployed. If you have any feedback, please come back to us. Also if you see bugs, because sometimes we compete, the team missed a bug or something, so if we don’t have time for re testing it, we still try to find and manage to find some ways to gather feedback even after it’s deployed.

Drew: And over time, one of the things that might be a concern probably from a technical point of view is that you’ve built on top of a UI framework and then a new version of that framework comes out and things have changed. Is that a situation that you’ve experienced where a new version has come, your developers want to update but it might have implications on the design?

Stéphanie: Yeah. The thing is we have test environments, so they’re really quick and easy thing to do is like, okay, let’s put in your version in one of those secure environment and see what is broken. So from when designers most of the time when they do a new version they tell developers, is it going to break? Like is this new version something completely new and it’s not compatible with the old version? Or is this new version something that is just an announcement and you might not break that many things. So yeah, obviously sometimes when you put a new version it completely breaks, but this is again, then you have like testing stories and like technical investigation stories to decide if we are going to migrate or not. Also like from what I understand in some of the environment I worked on, they kind of encapsulated those in web components.

Stéphanie: So they’re already has kind of two different version of Angulars on some components, it was using one version on the other ones it was using the other one and from what I understood it works because then you only encapsulate what you need. So this apparently is also a solution is then you can use whatever version you want, but I’m not a developer but I feel at some point you’ll be like, okay, this component is using that version of Angular and this one, this and this maybe kind of becomes super hard to maintain. Do you know?

Drew: Yup.

Stéphanie: It does. Okay. So yeah, you make sure it still works, but I don’t have the feeling that Material-UI are like those frameworks, even bootstrap for instance, they don’t have any new version every year or something. It’s a long lifecycle and in the case of my tool, I think this tool will be here for the next year, so we have eventually to update. But if you’re building kind of a online tool, more like a B to B product. Most of the time you revise every three years or something. And usually there is a new technology. I was talking to a friend and they’re currently working on a project where they’re rebuilding and riffing on React. The first version was built three years ago with another technology. I really don’t remember the technology, but they say, okay, we are three years later, they’re already rebuilding it. And I think in like three years, they will re-rebuild it. So at some points if you’re in like in B to C products, I even wonder if you update your framework or if you are going to change the design and rebuild it anyway in a few years from scratch.

Drew: Is there anything else that we should be considering when building on a UI framework?

Stéphanie: I feel we covered a lot of things. Well, the thing is like, there’s always a way to do it quick, user research, talk to users or at least do usability testing. Make sure you don’t design or build in a silo and try to have other people at least look at what you’ve created to make sure that the components as a developer, that you used as a developer I really do wonder are going to do the job. And don’t ask the designer to put paint on top of the framework at the end of the project because it’s kind of already too late to do big infrastructure on changes. It might not work.

Drew: So at Smashing, we have books, we have conferences, and of course, we have Smashing Magazine, a website with loads of articles. We’re all about learning. So what is it that you’ve been learning lately?

Stéphanie: I’ve been taking online introduction to psychology class.

Drew: Tell us a bit about that.

Stéphanie: Last lesson was actually super interesting. We were talking about visual illusions and how they work with your brain. So it’s really super complex and there’s… Apparently not everyone agrees on the explanation of most of those illusions, but it’s interesting because I had a small psychology lesson, like I read books on cognitive sciences and things like that. So I already knew kind of the basics, but it’s interesting to see like all the different aspects of psychology. So the interesting part of this course is it’s an introduction but it explains to you kind have all the branches from say child development psychology to trauma psychology to intercultural psychology. So and then illusions and I think this week it’s actually about cognitive psychology and how to apply psychology to interfaces. So all of those really, really interesting topics. And it’s nice because it’s an online class, so I’m basically learning stuff on my couch with some tea, and yeah, that’s really, really cool.

Drew: Oh, that’s super interesting. If you, dear listener, would like to hear more from Stéphanie. You can follow her on Twitter where she’s @WalterStephanie, or find her on the web at stephaniewalter.design. Thanks for joining us today, Stéphanie. Do you have any parting words for us?

Stéphanie: Thanks for having me. It was a smashing experience.

(dm, ra, il)

#digitalmarketingwarrington #onlinemarketingwarringtion #warringtonseocompany #searchengineoptimisat

0 notes

yourgamecheats · 5 years ago

Text

Brawlhalla Valhallentine’s Day Event Spreads the Love

I’m a Lover, Not a Brawler

Love is in the air, and so are your opponents, if you’re fighting properly. A few days ago, developer Blue Mammoth Games began the Brawlhalla Valhallentine’s Day event for Valentine’s Day. For the foreseeable future, you can brawl in the name of love with special themed UI changes, character skins, weapon skins, and avatars. Brawlhalla is a free-to-play game, so we…

View On WordPress

#COGconnected

0 notes

kreativproject · 6 years ago

Text

Isometric illustrations set

Isometric infographics and illustrations on various topics on a unlit blue background. Conceptual isometric vector illustration for web, graphic design and presentation. Landing page template.

**MAIN THEMES:**

– Startup business – SEO analysis – Data analysis – Recruiting – Social media – Digital marketing – Online shopping – Cloud technologies – UI/UX design – Planning shedule – Blockchain…

View On WordPress

#illustrations #isometric #Set

0 notes

webhubsecrets-blog · 6 years ago

Text

WordPress UI Evolution from (2003 to 2018)

The Beginnings of WordPress WordPress started out in 2003. Mainly because the development of an already popular blogging software b2/cafelog was discontinued by their main developers. Two passionate users of b2/cafelog, Matt Mullenweg and Mike Little, decided to build a new platform on top of b2/cafelog. This is how WordPress was first released on 27th May 2003. Learn more about the origin story of WordPress in our article on the history of WordPress. Since then, there has been a total of 276 WordPress releases so far (November 2017). In this article, we will highlight the ones that introduced a big change in admin panel user interface. WordPress 0.71 – (June 2003)

The landing page of WordPress 0.71 admin panel was directly the write post page. As you can see there was no dashboard. Features were very limited, and it was kept simple. You could only assign one category to each post. This version of WordPress had a tedious installation method where you would have to change a lot of information manually. WordPress 1.0.1 (Miles – 2004)

Starting this version, WordPress started naming its major releases after Jazz musicians. As you can see this release was named after a famous musician, Miles Davis. In this version, WordPress stopped using the b2 file structure and moved toward its own style of filing structure. New features included multiple category selections, SEO friendly URL structure, comment moderation, new installer, and several other improvements. WordPress 1.2 – Mingus (May 2004)

Named after Charles Mingus, WordPress 1.2 was a monumental release. One of the most important upgrades in this version was the introduction of “Plugins”. Other notable changes were Subcategories, custom fields, thumbnail creation, post preview, encrypted passwords, and the ability to ping more than one service at a time. WordPress 1.5 – (Feb 2005)

This version of WordPress was named after Billy Strayhorn. It showed the first glimpse of a new dashboard style. It didn’t use Ajax and was way slower than the WordPress we use today. Another significant feature was the introduction of pages alongside posts, allowing users to create static pages that were not part of their blog. This release also added support for installing multiple themes in a single WordPress installation.1qw3 WordPress 2.0 – (Dec 2005)

WordPress 2.0 brought a major uphaul to the WordPress admin interface. It had a large blue header on top a complete overhaul of the admin area. It was way faster than previous releases as it utilized Ajax to perform certain tasks. This release also included a full WYSIWIG editor. Akismet was introduced as a plugin to combat with the growing comment spam problem. Some other notable features were image/file uploading, theme preview via thumbnail (screenshot.png), improved posting speed, new hooks for developers, and more. WordPress 2.1 – (Jan 2007)

WordPress 2.1 Ella was the first release to introduce a new admin screen to manage comments. The comment management process was significantly improved as users were able to delete or approve comments without reloading admin screens. WordPress 2.3 – (Sep 2007)

This release didn’t drastically change WordPress user interface but added several significant improvements. For the first time, WordPress improved native support to add tags to your posts. It also introduced update notifications allowing WordPress core and plugins to show notifications when there is a new version available. This release also started auto-redirecting users to correct WordPress URL as defined in the settings. WordPress 2.5 – (Mar 2008)

For WordPress 2.5, the WordPress team collaborated with Happy Cog, a leading web design consultancy firm, to overhaul the WordPress user interface. It was a major re-design or rather reimagining of WordPress how we use it today.

The dashboard got much better as they added more useful information there. This was the first version where we saw one-click upgrade for plugins which were in WordPress plugin directory. Much better visual editor and a built-in gallery were also included in this release. Many of the core components of this redesign are still a major part of the software. However, its appearance quickly changed just 10 months later. WordPress 2.7 – (Dec 2008)

WordPress 2.7 brought another major upgrade to the WordPress admin user interface. Users were now able to readjust WordPress dashboard elements. Screen options were introduced so that users can show and hide elements to meet their requirements. Other notable features included automated installation for plugins through the WordPress admin panel. Reply to comments from the admin panel, threaded comments, sticky posts, keyboard shortcuts, comment paging, and more. WordPress 2.9 – (Dec 2009)

WordPress 2.9 didn’t change user interface but added several new features that integrated beautifully in the WordPress interface. One of these changes was a plugin update system, that allowed users to update their plugins to the newer version with a single click. Another major change in the release was image editing features, which allowed users to crop, resize, rotate, scale, and flip images in WordPress. WordPress 3.0 – (2010)

WordPress 3.0 Thelonious was a major WordPress upgrade which truly transformed WordPress from a blogging platform to a full-fledged CMS. It introduced post types, taxonomies, custom backgrounds, headers, shortlink, and navigation menus. It also started the tradition of introducing a new default theme each year, this new default theme was called Twenty Ten. This release merged a WordPress sister project called WordPress MU into core WordPress itself. This feature is now known as WordPress multisite. The basic style of the admin interface was capable of adapting all these major changes without a significant overhaul of the admin area. WordPress 3.1 – (2011)

WordPress 3.1 continued adding the feature to the robust WordPress user interface. With this new release, WordPress introduced the admin bar, post formats, and a better internal linking feature. WordPress 3.3 – (2011)

Released in December of 2011, WordPress 3.3 came packed with features and improvements to existing WordPress UI. It added flyout menus for better navigation in the admin area, a revamped admin bar, drag and drop to upload media, and tooltips. See more features and screenshots of WordPress 3.3. WordPress 3.5 – (2012)

Mobile and high resolution devices were already becoming accessible to all users. WordPress 3.5 streamlined the user interface for modern retina display devices. This included upgraded icons and adaptive styles that looked great on any screen resolution. See more features and screenshots of WordPress 3.5. WordPress 3.8 – (2013)

The appearance and basic style of WordPress UI weren’t changed since 2008 and were way overdue for a major upgrade. The goal for this upgrade was to handle mobile devices more elegantly and make WordPress more accessible. After a ton of work, the new WordPress user interface was released with WordPress 3.8. The new user interface which is still used (with minor enhancements) was mobile responsive, had more color schemes, used icon fonts, and Open Sans for typography.

WordPress 3.9 – (2014)

WordPress kept improving the UI to handle new features. WordPress 3.9 made several enhancements it started using flat buttons in the post editor, drag and drop image uploads, gallery previews, and more. It also added live previews when adding widgets in theme customizer. See more features and screenshots of WordPress 3.9. WordPress 4.0 – (2014)

The same year WordPress 4.0 was released. There was no major change in the UI. However, there were some cool changes that fit right into the existing WordPress admin look. A new grid view for Media gallery was introduced with infinite scroll and smooth editing. See screenshots and features of WordPress 4.0. WordPress 4.2 – (2015)

WordPress 4.2 came with a tiny but significant improvement in the admin area color scheme. The grays were given a slight blue hue and the blues were changed to pure blue with no red channel. See more features and screenshots of WordPress 4.2. WordPress 4.5 – (2016)

WordPress 4.5 brought some improvements in the default WordPress visual post editor. A new inline link editing feature was introduced along with some new inline text shortcuts. Responsive previews were added in theme customizer which allowed users to preview their theme desktop, tablet, and mobile without changing devices. For more features see our article on the release of WordPress 4.5 with screenshots. WordPress 4.6 – (2016) In WordPress 4.6, the core team decided to start using native fonts instead of loading Open Sans from Google servers. This release also streamlined updates, which allowed users to install, update, and delete plugins/themes without leaving a page. WordPress 4.8 – (2017)

WordPress 4.8 introduced a new set of widgets to add media like images, audio, video, and rich text. It also added a new dashboard widget that displayed WordPress news and events. For more features and screenshots, see our overview of WordPress 4.8. WordPress 4.9 – (2017)

The last major release of WordPress for 2017 added more features to Theme Customizer. It added a new theme browsing and preview experience in the customizer. It also made code editing in custom CSS and theme/plugin editors much easier by adding syntax highlighting and auto-completion features. The Future of WordPress User Interface As you may have noticed that WordPress user interface hasn’t changed much since 2013. However, WordPress itself has improved a lot since then with tons of new features, better performance, and improved security. Today, the user interface feels a bit out-dated compared to the many other top website builders in the market. Read the full article

#BlogDesignTool #BlogTips #blogwebsites #Blogger #bloggertemplate #wordpress #wordpressresource #WordPresstheme #wordpressUI

0 notes

creativdigital · 5 years ago

Text

Web Design Trends To Expect For 2020

Web design trends come and go. Now that there are only a couple of weeks left in the year, it’s time once again to look to the future and examine what next year will look like in terms of web design trends.

Dark Mode

2020 will be the year of dark mode. Web designers in Sydney will be focusing more on UI and give users option to use dark mode.

Many users like dark mode because it makes design elements stand out and has a higher contrast ratio compared to other colors. Best of all, dark mode looks modern, is easy on the eyes and makes design elements pop.

Dark modes are also better for OLED users. They don’t only extend power of your mobile device, it also extends screen lifespan. Dark mode also goes well with other 2020 prevalent design trends like moody colors combined with neon typography. Steampunky trends along with futuristic dystopian styles are also en vogue.

Imperfections

Another cute design trend that’s taking over web design is imperfect hand drawn elements. This type of style injects humanity and emotions to websites. These imperfect but personal graphics have been around for years and are becoming more popular as 2020 approaches.

Many visitors find these hand drawn elements to be appealing becauase they give websites personality. They give websites a sense of “realness” and positiveness which users like because they can brighten a gloomy day.

Whether its hand drawn elements or handmade illustrations, expect to see messier looking websites in 2020.

3D Elements

Expect to see more 3D technology in graphic design next year. 3D visuals have always delighted users but never really gained a lot of popularity due to the high cost of production.

The good news is that technology is now at a place where you can design 3D components without high technology requirements.

3D along with VR is probably the best way to create an immersive experience for your website. This is an advantage not only for visuals but for UX as well. As 2020 unfolds expect to see more 3D design elements that will break down space and digital reality.

Solid White Spaces

Many web designers are embracing minimalism, which leads to cleaner looking websites. Expect to see more. Solid frames of white space are a good alternative to overwhelming colors, typography and blending of different design styles.

Nowadays designers are gravitating towards solid structures and are looking for ways to use a lot of white space to give their designs more organization. Many designers are turning to white spaces to frame designs and to make other colors pop. This framing gives their design stability and makes it standout.

Luminous Color Schemes

If you don’t like a lot of white spaces, they will be happy about the luminous color scheme trend. Web design is becoming more bold and daring. The use of bold colors, neon and glow in the dark theme is becoming more popular.

Expect to see more vivid blues, purples and hot pinks for 2020. Using bright colors with darker tones give web pages a more luminous feel.

Minimalist Navigation

This year expect design content to contain more video with less text. This will make websites more simplistic and easier to navigate. This trend is mainly due to the rise in wearable technology which means web design need to think smaller.

The area most affected by this change is devices with very small screens. This has forced web designers to simplify navigation even more. Extremely minimalist navigation takes away the difficulty in usability. Additionally, imagery is becoming more important. Large high quality images are the only way you can impress users when you are only using the bare minimum in text.

Wrap-up

With the decade closing, 2020 attention grabbing visuals and 3D effects belong in the last decade. With the new decade starting, web designers are looking to the future but also finding the past as an inspiration for designs.

With the decade beginning expect to see more user-friendly experiences with minimalistic navigation with less straining dark designs.

A Sydney custom web designer can help make your website look modern and ready for the new decade. Avail of services ranging from web design to app development.

The post Web Design Trends To Expect For 2020 appeared first on .

from https://ift.tt/2R1Fdwt

from WordPress https://ift.tt/2uwnuFP

#IFTTT #WordPress

0 notes

batvish-blog · 6 years ago

Text

8 Workflow And Content Publishing Tools You Must Try

“Expectation is the root of all heartache” – William Shakespeare

And that’s exactly where content creators suffer. They expect the very best of their work every single time. Which means, every new piece of content has to be better than the previous one. Now we know a lot goes into creating even a single piece of content, from ideation to tonality to the ease of reading as well. So how does one conquer the granular hitches that come with regular writing?

There are a plethora of tools available today, aimed to make the job of a content publisher easier. That’s why we’ve put together a list of tools that will help you with maximum accuracy, strategizing your content, and prepare your workflow; making it nothing but simpler for you. These tools have distinct properties and can be a part of your publishing automation.

Here are our top picks:

Grammarly

One of the most widely used spelling and grammar correction tools, Grammarly has proven to be a great writing companion to all. Aside from correcting your spelling and grammar, it also helps to find the best words, check your style and tone, and keep your writing as concise as possible. Best of all, it’s free and can be added to your browser to work in the background and check your content on social media, e-mail, or any other online project!

Hemingway App

Another popular editing tool is the Hemingway App. It’s a desktop app that gives suggestions to make your writing as clear as possible. After putting your content on Hemingway App, look at the color-coded highlights for improvements: a yellow highlight indicates common errors or a long and complex sentence; a red highlight indicates a dense and complicated sentence; a purple highlight indicates a complex word or phrase; a blue highlight indicates adverbs; a green highlight indicates the use of passive voice. Furthermore, the app also has a counter that shows the total number of characters, words, sentences, and paragraphs in your content as well as gives you the overall readability index of your piece of work – ideally, any piece of online content should be understood by a seventh-grader. Again, this app is completely free and provides a more detailed analysis to improve your writing. Possibly, a good practice would be to edit longer pieces of work through the Hemingway App while smaller copies written online can be edited directly through the browser via Grammarly.

StackEdit

Isn’t it ironic, that as a writer, a monumental struggle you face is with Language?

Wait, we’re talking about a programming language. Thus, Stack Edit.

StackEdit is an in-browser editor (link it to a definition). Now, why StackEdit?

Let’s first understand this. The one great tragedy of content creation is HTML. If you’re a web writer or a content creator, you always run into the problems of trying to get that blog post live or trying to get that page live, and you end up with the following possible outcomes. The HTML code you’ve written is bad because you’re trying to write it yourself and you don’t know how. Your article is simply pasted into your word processor with no HTML tags at all because you can’t do it, and there’s no one else to do it, The entire process of taking the article live on your blog slows down because it takes you a long time to punch in all of those tags.

So the question is: How do you create HTML, without having it interfere with your writing process? That’s when StackEdit comes in picture. It allows you to convert text from Google Docs or Word into HTML without changing the format. It’s great for those who don’t know how to code in HTML and still want their content looking great online. If you have a website or a personal blog then StackEdit should be on your must-install list. You can also save your files on StackEdit and can even create folders for multiple files. StackEdit also allows you to synchronize your files with other files on your Google Drive, Dropbox or GitHub and publish your files to different hosting platforms such as WordPress, Blogger, Zendesk, and many more. There are also a variety of templates, themes, and layouts available to publish your content and an in-built spell-checker that supports many languages. Finally, this tool is also available for free and even functions offline – works well for the days your internet is being absolutely unreliable!

Ilys

Ilys has been designed to let the creative juices flow by allowing you to train your mind to ideate and continuously write your content, without worrying about the editing. To start the writing session, just tell Ilys how many words you want to write. Then, start writing! You can’t go back to edit or delete anything until you have completed your word count goal. Furthermore, the tool only displays the last letter you have typed, allowing you to stay in ‘the zone’ until you finish your word count, after which, you can edit your text as you want. Ilys allows you to reach peak experience by letting your creative genius run wild, and not have a writer’s block.

Scrivener

Scrivener is one of the best tools for writers of all types – from students to screenwriters. Ideal for long writing projects, Scrivener allows you to create chapters and easily compose the content in each chapter or jump from chapter to chapter in order to write when inspiration strikes, and worry about the placement of the idea later. The easy-to-use project outline also allows you to see the overview of your manuscript and change the order of your chapters easily. Furthermore, you can add your research in the tool so you can view it next to your content whenever you want. Scrivener also has other cool features such as templates for various book types, corkboard, setting and managing your progress, snapshots, auto-saving, and so on. Although this is a paid tool, it is well worth the investment.

MindNode

An idea can evolve from the smallest form of inspiration. There are several thoughts running through your mind all at the same time. Let’s say you have a basic outline or a story about a character in your mind, but need to create a timeline of sorts so that you don’t get lost within the milestones of the story. How do you contain it? That’s when you turn to notes, post its, charts, pinboards, etc. You end up making a graphical representation of your concept and ideas. That’s called mind mapping! The point of creating a mind map is to see how your ideas work together. But there’s a reason we have the technology, right?

Presenting MindNode: just the right app for these tricky situations. The UI of MindNode is simple and intuitive, even if you’re not an experienced mind mapper. In fact, you could probably start using MindNode without even fully understanding the concept of mind mapping because the user interface will actually teach you how to do it. MindNode allows you to build and manage connections between nodes in your own way. Connect, detach, or reorganize – you can make any changes, without your mind map falling apart. There are many very good options for mind mapping software to help you capture and organize your ideas, but the reason MindNode is the best for most people because it has an amazing design, it is easy to use, supports very reliable iCloud sync, and there are just enough import/export options to be a really useful tool in almost any workflow. If you’re an Android user, there are several other options in GooglePlay Store such as Mindly, MindLine, miMind (Hyperlink) and many more. Always look for the rating and the reviews before installing the app.

Canva

Canva is an amazing and simple graphic design tool that has made design accessible to everyone. Beyond being able to design book covers as per your preference, Canva offers a variety of design dimensions – from social media posts to invitations, infographics, presentations, and more. You can also provide your own dimensions to design something. Next, a variety of templates are ready for you to tweak to your requirements or you can design from scratch. As an author or a content creator, there’s a lot you can do with Canva. There’s a range of templates that allow you to create social media creatives, newsletters, posters, emailers, YouTube banners, thumbnails and a lot more for several other promotional activities. There are lots of images, icons, fonts, and colors available to truly match your style and you can download your creation in various file types. Best of all, this mammoth design app is free for everyone to use.

Monday

Monday is a great visual management tool that allows you to plan, organize, and track your work. It is a simple, but intuitive tool, which enables people to manage their work, meet deadlines and build a culture of transparency. The beauty of this platform is the fact that it is so customizable and can be used for every use case! For each board, you can add columns according to your workflow. Think of the columns as building a process or a way to include all aspects needed to complete the tasks. Monday.com offers multiple column types to fit your needs, from a people column to a Status column. It also gives you an option for you to mark your project’s priority and you can update your status varying from “Stuck, working on it, or Done”. It’s a proven project management tool that’s used by teams across industries all over the world.

Source: monday.com

These brilliant tools make great assistants that make your life a little bit simpler, so you can focus your energy on writing quality content first. There are so many other tools and software available that make the challenging job of creating content a little bit easier. Go ahead and make use of these powerful and easy-to-use digital publishing tools!

Once you start using these tools in your activities, you begin to realize how simpler things are for you.

Happy writing!

0 notes

pinnacle-cart · 4 years ago

Text

Ionic 3 UI Theme/Template App - Material Design - Blue Light - Ecommerce Bests

Ionic 3 UI Theme/Template App – Material Design – Blue Light – Ecommerce Bests

<a href="https://codecanyon.net/item/ionic-3-angular-6-ui-theme-template-app-multipurpose-starter-app-neon-blue-dark/22551182?s_rank=1"> <img src="https://csform.com/envato/banners/ionic-3-neon-blue-dark.png" /> </a> <a href="https://codecanyon.net/item/ionic-3-angular-6-ui-theme-template-app-multipurpose-starter-app-gradien-blue-light/22467123?s_rank=2"> <img…

View On WordPress

0 notes

robertbryantblog · 6 years ago

Text

When Control Panels Near Me

Will WordPress Administrator Name

Will WordPress Administrator Name Resources shared over distinct virtual deepest server hosting. You can’t choose your operating system and big asp purposes. The better of added aspects and buyer facilities center that’s available due to outage.ONce you opt which form of hosting you are going to need your own tld domain names using the domain supervisor. To ease this task, the user for managing or managing their internet sites. Smaller and midsized enterprise and the complications they are no longer needed by the site internet hosting agency who might be useful you in creating a full css site jammed with commercials is certain every thing is OK. This is being provided on screen.THe system to a provider company, getting a web host is the quest field, add a space, and the cpu. Read the hosting agency will deliver the website it is akin to make the proper resolution while putting the table, a department procedures could be tested ahead of any use of your shared, committed, cloud or vps and dedicated internet hosting. The large.

What Vps Server Support

Not written here. If you will have is already put in in gd shared hosting is for access every thing may be done totally in the securexl device, regardless of the specs on netgear’s site, basically has 2 memory with other sites. Over the undeniable fact that it provides additional info about web internet hosting reseller purchases the host in the advised extension is .MDf. The optimal goal with the presearch during the ui that they’re removed from copies of every page, and then click the greenest web internet hosting solutions on linux and administrator privileges with a dash of lime juice today with wordpress! When web hosting cloud web internet hosting utilizes unwarranted intake of bandwidth resulting in poor functionality to your site commonly, free.

Can Cpanel Login Not Working

Scale that can immediately log in for your google or object . Ora-13604 the precise amount of bandwidth that you are about to use albeit ahead.SAve these credentials for a web host agency as simple chats in its place of full-blown web meetings, and will then go out and begin short span of time, googlebot assumed additional product to be bought.ABc has decided that every one customers happy in addition to to do the same for .NEt developer on web and mobile transcoder displayed the positioning’s feeds your feed reader checks. If you’re drawn to making your company and need to increase their own malicious search engines and users alike love video online page the amount of data is basically decentralized. Managed vps providers that run their techniques or distinctive situations of the blue whale of cloud computing. Check out my lens, i do not work for them, but lovely, and if there have been.

Who Xmlrpc Php Drupal 8

A co-observed or committed server. A vps digital deepest server and linux workloads with minimal web internet hosting technical talents?AFter developing a considerable amount of knowing about reasonably priced vps internet hosting with a free online page and domain. Enable vt and the atmosphere we added in the above for 2 reasons.| that’s staggering computing device software that still uses group policy. If your organization the song is registered to. When you select free plug-ins and themes. Well, actually, their free product holds against the law comedy film that follows are seven websites that have a restricted budget, but are looking to write about games for the agencies who must store and hold a range of web internet hosting plans as they are dishing out to you. 14.95/month. With committed ssl, you can protect your data, data backups, hardware and refined generation. Q. How do i know which web blog in fact, vps could be a web internet hosting firm.

The post When Control Panels Near Me appeared first on Quick Click Hosting.

from Quick Click Hosting https://quickclickhosting.com/when-control-panels-near-me/

#Quick Click Hosting

0 notes

redballpointpen2-blog · 6 years ago

Text

Sterling - Responsive Wordpress Theme

New Post has been published on https://babesgobananas.com/sterling-responsive-wordpress-theme/

Sterling - Responsive Wordpress Theme

Latest Version: 2.6.9 | Changelog

Premium Plugins:

Free – LayerSlider included

Free – Revolution Slider included

Unlimited Sliders – Add a Slider to any Page Template

Custom Sterling jQuery Slider:

Toggle Randomize Slides

Toggle Pause on Hover

Toggle Animation Effect – Slide/Fade

Toggle Next/Previous Arrows

Header Options:

Sticky header menu + small-height variation

9 Header Transparent Overlay Patterns

Adjust Header Height

Disable Top Toolbar

Disable Menu Dropdowns

Footer Options:

9 Footer Transparent Overlay Images

Up to 5 Footer Columns

Footer Menu

Footer Copyright

Site wide Footer Callout

Custom “scroll to top” link

Toggle “scroll to top” link

Logo Options:

Logo Alignment: Left, Right, Center

Normal Website Logo

Retina Website Logo

Custom Logo Builder (with 9 preset logos)

Custom WordPress Login Logo

Favicon Logo

Color Options:

18 Pre-set Color Schemes

Mix-and-match color schemes

Unique Primary Color

Unique Secondary Color (mix and match)

Mobile Options:

Responsive Design

Retina-ready

Built for all Mobile Devices

Blog Options:

Add Shortcodes to Blog Posts

Easily Hide Categories

Choose between Gravatar.com or Default WordPress Avatars

Toggle Post Comments

Toggle “Posted by” Information

Customize “read more” Button (text, color, size)

Display Related Posts

Social Media Sharing (Twitter, Facebook, Pinterest)

Page Editing Options:

Custom Sub-menu

Custom Sidebar

Custom Page Linking

Page Settings (toggle breadcrumbs, search box + more)

Slider Settings (choose slider, color picker + more)

Gallery Settings (choose layout, image frame style + more)

Styling Options (custom primary color scheme, custom secondary color scheme + more)

Top-Notch Theme Support:

High Definition Tutorial Videos

Access to our (SSL) Secure Online Help Center: TrueThemes Help Center

Knowledgeable Support Team

Advanced Support Ticket System

Knowledgebase and FAQ

Extensive Written User Manual

True one-click demo importer for blazing fast setup

Over 100+ Gorgeously-styled Shortcodes:

All shortcodes easily inserted via point-and-click shortcode manager:

Accordions and Tabs

Buttons and Columns

Content and Alert Boxes

Dropcaps and Text

Icons

Image Frames

Pricing Boxes

Vector Icon Boxes

Vector Icons

Extensive Software and Plugin Compatibility:

All-in-One SEO

Better WordPress Minify

Constant Contact Newsletter Signup

Contact Forms 7

Gravity Forms

MailChimp Newsletter Signup

Post Type Order

WooCommerce

WordPress

WPML

Yoast SEO

…and many more

Industry-leading SEO Optimization:

Clean Valid HTML5 and CSS3 code

Content and Presentation Coding Separation Techniques

Schema.org and Microformats data

Additional Awesomeness:

One-click demo impoprter

100% WPML Multilingual Plugin and Translation Ready.

Seamless Dashboard styling

Artwork Files in Fireworks PNG and Photoshop PSD formats

35 Free PNG button images

Cleaned up WordPress Interface (feels like a proper CMS)

Contact Form Builder (with reCaptcha)

Custom Post Type – Slider Posts

Custom Post Type – Gallery Posts

Custom Widgets

Custom 404 Error Page

Custom Search Results Page

Developer-friendly: Action Hooks, Well-Commented Code, WordPress Codex Compliant

Extensive Written Documentation

Fast Loading Pages

Gorgeous Design – Perfect for every Business

High Ranking Page Speed Tests

Inline Page Editing Tool

Proper usage of wp_enqueue_script() and wp_enqueue_style()

Secure and Optimized PHP Code

Supports Various Media Types (swf, quicktime, iframes, images, vimeo, youtube)

Third level drop-down menus

Threaded Comments

Unlimited Contact Forms

Unlimited Google Fonts

Unlimited Sidebars

Unlimited Sliders

Special Thanks

A special thanks to the Apollo team for providing a super-awesome product screenshot. Thanks guys! http://www.applicomhq.com/

Changelog:

February 16, 2018 – Version 2.6.8

Fixed: displaying video in lightbox

April 19, 2017 – Version 2.6.5

Added: full compatibility for WooCommerce 3.x ----- Updated: Removed branding notice from one-click-demo-importer page. ----- Fixed: is_array() error now fixed when Jetpack enabled. Fixed: nested blog comments on mobile. Fixed: "black line bug" in Safari 10.x

January 26, 2017 – Version 2.6.3

New: Option added to site options panel to change background color of main content area (Appearance > Site Options > Theme Designer) New: Option added to site options panel for color background on main menu and gallery hover states (Appearance > Site Options > Styling and CSS) New: Option added to site options panel to include top-toolbar in "small height sticky header" (Appearance > Site Options > Header) New: Sterling is now fully compatible with PHP7 New: 10 new color schemes added to theme: New: Color scheme (blue-ice) New: Color scheme (blush) New: Color scheme (clear-sky) New: Color scheme (dark-green) New: Color scheme (dark-knight) New: Color scheme (leafy) New: Color scheme (ocean) New: Color scheme (ruby) New: Color scheme (sunset) New: Color scheme (turquoise) ----- Update: Arranged header options into their own section of the site options panel Update: Sticky sidebar script updated to latest version ----- Bug fix: Re-built outdated functions that are no longer valid in PHP7 Bug fix: Sticky sidebar on blog page now works correctly

Version 2.6.2

New: Added tab interface to page metaboxes New: Welcome screen for new users upon theme activation New: One-click demo data importer New: 'Small height' sticky header now available via Site Options > Interface Options New: Included a 'smarter' Child Theme. Current Child Theme users it's recommended to 'hybrid' your current version with this version (see functions.php) ----- Update: removed the SEO Module - simply install All-in-One SEO Plugin via Appearance > Install Plugins instead (no data will be lost) Update: font-awesome updated to latest version 4.7.0 Update: TGM-Plugin-Activation updated to latest version 2.6.1 Update: Function added to remove emoji javascript added by WordPress Update: Added schema.org and microformats for better SEO Update: Child pages now indented in responsive view (mobile menu) Update: Updated screenshot.png Update: Cleaned up code. deleted _theme_specific_init.php.....moved functions to framework_init.php Update: Rewrote various code for better performance ----- Bug fix: Site Options bug resolved on PHP7 server Bug fix: WooCommerce pages updated and now displaying correctly Bug Fix: Security update for sidebar generator script

Version 2.6.1

Update: font-awesome updated to latest version 4.6.3 ----- Bug fix: 10px top-margin on full-width rev-slider on mobile Bug fix: Google Fonts Open Sans for proper function on HTTPS server Bug fix: header-shadow fix - links on revslider and layerslider now clickable

Version 2.6.0

New: Ability to add page content above gallery items New: Ability to display related posts on single.php (Appearance > Site Options > Blog) ----- Update: automatic updates hosted on new server ----- Bug fix: lightbox size on mobile devices Bug fix: [hr] shortcode clearing in sidebars Bug fix: removed forced logo height Bug fix: category name now displayed in banner area on archive.php

Version 2.5

New: Option to enable a "sticky sidebar" (Site Options > Interface Options) New: Automatic Theme Updates (Site Options > General) New: Animated "scroll to top" button ----- Update: Improved WooCommerce styling Update: Removed "Activate Sterling 2.2" option from site options (no longer required) Update: FontAwesome to latest version (4.4.0) ----- Bug fix: Searchbox not stacking on mobile view Bug fix: Sticky-header showing on under construction page Bug fix: Miscellaneous Bug Fixes

Version 2.4

Update: prettyPhoto to version 3.1.6 (XSS Security Fix)

Version 2.3

Update: Sterling has been swept clean of all code affected by recent WordPress XSS Vulnerability. Update: TGM-Plugin-Activation Script updated to 2.4.1

Version 2.2.2

Fixed Slider script for RTL website Fixed sticky menu when "top-toolbar" is active Disabled "gallery count" site option when Sterling 2.2 is activated Removed (faulty) metabox taxonomy on gallery posts, now using default WordPress UI Updated timthumb.php to latest version Minor bug fixes.

Version 2.2.1

New: Revolution Slider (now freely included with the theme) New: Add Site Option checkbox to easily enable sticky mobile menu. New: Custom child theme for use within BuddyPress Environment ----- Update: Metabox script updated to newly released version (1.0.0) Update: timthumb-config.php reverted back to more stable setting, caching images in system temporary directory Miscellaneous bug fixes.

Version 2.2

New: Sticky Header / Menu Bar. (Site Options > Interface Options) New: Site Options Panel re-designed to match WordPress 3.8 UI. New: Ability to add a jQuery Slider to any page unlimited sliders. New: Ability to create unlimited (custom) Gallery Pages. New: Selectable Logo positions (left, right and center) New: (369) Font-Awesome Vector Icons Shortcode. New: Font-Awesome Vector Icon Boxes Shortcode. ----- Improved: Better rendering of drop-down menu in IE9 and IE10 Improved: Greater compatibility with Google WebMaster Tools. Improved: CSS3 PIE script added to provide more CSS3 support in IE8. ----- Update: Sterling's Shortcode Manager updated to be ready for WordPress 3.9 / TinyMCE 4.0. Update: TGM-Plugin-Activation script updated to newly released version (2.4.0) ----- Optimized: Alphabetically oragnized all CSS properties for quicker parsing. Optimized: Reduced filesizes and number of files used in Site Options Panel. Miscellaneous bug fixes.

Version 2.1.5

Fixed team member photo frame bug. Fixed 'calculate shipping' button bug. Added the ability to use WordPress default avatar. Added fix for missing left and right slider buttons. Fixed success message notification css class name. Updated prettyPhoto to version 3.1.5

Version 2.1.4

Visual improvements to shortcode manager. Added Pricing Boxes to shortcodes. Added 'Jumbo' button size to shortcodes. Added Linkedin to team members shortcode Added 'Email Label' to team members shortcode Added new Footer and Blog options to Site Options Panel ----- Optimized CSS. Removed @import and combined images into single image sprite. Optimized top-toolbar dropdown menus. ----- Updated jQuery Isotope to version 1.5.25 Updated custom-meta-box to version 0.9.2 Fixed "un-even rows" bug in Gallery sections.

Version 2.1.2

Update with woocommerce products width and remove bullets css fix. Update with class_exists check for Jetpack grunion contact form. Updated with checks for Jetpack plugin, show global notification in Theme activation view if detected. Update with checks for allow_url_fopen and cURL, and error message fallback. Fixed error in slide.js init code, removed quotes to boolean true. Fixed error in wp_lists_comments() callback. Callback function should be truethemes_page_comments Added function to allow HTML in copyright notice. Added new site option strings, st_woocommerce_title and st_woocommerce_description.

Version 2.1.1

New file added for CSS3 Media Queries in web browsers > IE8. Added reference to respond.js for Internet Explorer. Removed [raw] tags for proper paragraph formatting. Updated file to latest version. Fixed Google Chrome rendering bug on FAQ template. Fixed "wrapping checkout button" bug.

Version 2.1

New: Compatibility with WordPress 3.5 New: Theme now packaged with WP CU3ER and Layer Slider Plugins New: Ability for Sliders on every page New: Completely re-vamped Core Theme Files for speed security and optimization Replaced banner code with page slider code. All pages now have ability for custom slider. Added new metaboxes to post and page editing screens for custom slider input. Modified button styling to match WordPress 3.5 styling. Modified screenshot dimensions as per WordPress 3.5 retina display requirements (600x450px) New functionality for page sliders. New script that enables you to easily install recommended plugins for this theme.

Version 2.0.3

Speed optimizations and bug fixes. Added code to further clean up wp_head output. Added code to further optimize TrueThemes 'comments on pages' functionality. Further optimized CSS for woocommerce. Added CSS3 Media Queries to IE8 and below. Speed Optimization for 'save settings' functionality. Added check for WooCommerce page and applied custom CSS Class accordingly. Image used on main navigation. Image used on main navigation. Added new code to add arrow indicators on main nav items that contain child pages. Added CSS for arrow indicators on main nav items that contain child pages.

Version 2.0.2

Added new shortcodes: content boxes, email encoder, drop caps, highlight text, mono icons. Added new class name to Footer Callout Button.

Version 2.0.1

Updated with checkbox to allow comments on page. Updated Twitter widget to work with new Twitter API. Boxed Layout, Body Backgrounds, Per-Page Styling, Comments on Pages, Theme Designer Options Improved responsive-ness of Under Construction Page Template. Modified Shortcode for Notification Boxes. Added 'closeable' option to Notification Boxes.

Version 2.0

Site Options: Added new option for Slider Navigation Arrows. Site Options: Added new option for Boxed Layout. Site Options: Added new option for Body Background Color. Site Options: Added new option for Body Background Image. Site Options: Added new option for Body Background Image Position. Site Options: Added new option for Body Background Image repeat. ----- Shortcodes: Added Facebook and Google+ to Team Members Shortcode. Shortcodes: Added Team Members to Visual Shortcode Editor. Shortcodes: Added Testimonials to Visual Shortcode Editor. ----- Added styles for Slider Navigation Arrows. Added styles for Slider Navigation Arrows. Added styles for Boxed Layout. Modified JavaScript and PHP for Slider Navigation Arrows. Added closing div tag for boxed layout. Added opening div tag for boxed layout. Added conditionals for custom per-page color scheme. Added PHP check for Slider Navigation Arrows. Added PHP check for Slider Navigation Arrows. Optimized XML strings for WPML Translation Plugin. Modified CSS for color-picker descriptive text. Added new page option for custom per-page color schemes. Added Google+ to Social Media Widget. Added Google+ Icon. Added Icon for WooCommerce Page. Added Google+ Icon. Updated Metabox script to latest version (0.9).

Version 1.0.9

Added CSS fixes for product review functionality. Added optimizations for WooCommerce shopping cart widget. Added fix for Child Theme update notification.

Version 1.0.8

Improved Theme Compatibility with WooCommerce Site Options: Added new section for WooCommerce Settings Added WooCommerce conditionals. Added jQuery superfish function. (for top toolbar nav) Added WooCommerce conditionals. Enqueue jQuery superfish script. Added 2 new sidebars for WooCommerce pages. Added ability for custom Left Nav Menu. Added Metabox to WordPress Page Editing screen which allows for custom Left Nav Menu.

Version 1.0.7

Fixed all templates and site option to allow text with apostrophe Fixed fatal error in category, archive, tags..etc caused by undefined function in template-part-small-banner.php

Version 1.0.6

Fixed if conditional loop in comments.php to prevent sidebar from dropping off page. Loading of jQuery in html head for plugin compatibility. Minor bug fixes in search template Optimized PHP Error Reporting Optimized Timthumb URL for multi-site Improved Theme Compatibility with WPML Multilingual Plugin.

Version 1.0.5

Improved Theme Compatibility with WordPress 3.4. Fixed SEO Module bug in Utility Page Templates.

Version 1.0.4

Improved Responsive function of Homepage Lightbox page template. Improved JavaScript page-specific loading. Site Options Panel: Added ability to disable Responsive Design. Site Options Panel: Added ability to disable Searchbar on a global level. Site Options Panel: Added ability to rename breadcrumbs "Home" link. Site Options Panel: Added ability to add a Banner Description to 404 and Search Results pages. ----- Added Localization Strings to Google Maps Widget. Added JavaScript fix for top-link on FAQ page template. Added PHP/Wordpress fix for Video Transparency bug. Added HTML/PHP fix for Video Homepage Left Align. Added CSS fix for single-line divider. Added CSS fix for WordPress "nextpage" functionality. Added CSS fix for #12 display bug on FAQ Page Template. Added CSS fix for Theme Designer Banner Settings. Added CSS fix for Tag Cloud background image. Added CSS fix for Active Main Menu Link showing on Search Results page. Removed File: "template-part-under-construction-footer.php": Functions have been added to "footer.php".

Version 1.0.3

Improved speed within in Admin Dashboard. Fixed JavaScript Slider bugs. Clickable links and Featured Image ALT text. Improved Footer Menu functionality. Menu will not display if nothing is set. Fixed Business Hours Widget bug. Removed background color when placed in footer. Improved jQuery Tab Shortcodes. Fixed CSS bug with 3rd-level menu highlighting.

Version 1.0.2

Added new section to Site Options Panel (JavaScript Slider). Fixed bug on "Under Construction" page template. Updated Gallery Posts to allow for multiple categories. Updated Gallery Posts to allow for page linking. Improved Child Theme / Theme Designer compatibility. Fixed column shortcode bug. Updated TimThumb to latest version.

Version 1.0.1

Fixed PHP fopen error. Fixed SEO module settings saving. Fixed javascript error in drop menu, viewable only in error console. Fixed saving of default settings in site options. Added suppressing of e_warning and e_notice etc when WP_DEBUG is set to true, does not suppress PHP error reporting. Minor CSS adjustments for better "responsive-ness".

Version 1.0

Initial Theme release

Source

#Anna Rawson

0 notes