tonygunning2

[tonygunning2]

UI vs UX

Although I fall into the bracket of a web authoring novice, from the research I have been doing in my own time. Both UI & UX are most certainly two terms that are often confused in terms of web and app design. I'm going to take this time on this post to do my version of a comparison.

User interface (UI) design is the process by which designers create interfaces in software or computerised devices with a focus on aesthetics or style. Designers strive to create interfaces that are both easy to use and enjoyable for users. Graphical user interfaces are referred to as UI design. UI designers create the look and feel of an application's user interface.

Graphic designers are UI designers. They are concerned with appearances. It is their responsibility to ensure that the applications interface is appealing, visually stimulating and appropriately themed to match the app's purpose and or personality.

User experience (UX) design is the process by which design teams create products that provide users with meaningful and relevant experiences. This includes the design of the entire acquisition and integration process, including branding, design, usability and function.

UX designers are also concerned with the user interface of an application, which is why people are confused about the distinction between the two. However, whereas UI designers are in charge of determining how the user interface will look, UX designers are in charge of determining how the user interface will function.

UI and UX design require very different skill sets, but they are both essential to success of the other. A beautiful design can't save an interface that's clunky and difficult to use. A brilliant, perfectly suited user experience can be ruined by a bad visual interface design that makes using the app or website unpleasant.

What I've learned thus far is that both UI & UX designers need to work and research together to get the best out of the project both teams of people work on.

[tonygunning2]

Tips For A More Engaging Website!

When we are designing websites we need to have the users interest in our line of sight the whole way, we must also adhere to the client brief we are working on also. Bearing these two elements in mind, there are a few things that are absolutely key to making a website more engaging.

The first thing is keeping the layout simple. This doesn't mean that it needs to be boring, quite the opposite in fact. Clean functional layouts make a site much easier to load, navigate and use on different platforms or devices. To put it another way, you can provide the best information possible, but your readers will only benefit from it if they read it. If your website if formatted in such a way that it confuses the message y cramming too much information into one small space, your visitors are unlikely to stay for long. 

Another key point to note is that we as designers must not be afraid of white space. It’s like walking into a cluttered room when every inch of a site is covered. Visitors to a cluttered site, like us wouldn’t know where to begin cleaning a cluttered room, wouldn’t know where to begin reading. White space on a page is simply empty space. It doesn’t have to be completely white; it just has to be devoid of any text or images. It can improve readability and remove clutter from your website design if done correctly. 

We also need to be very aware and strategic of how we choose and set out our color palettes and choice of fonts. Choose a foundation color for your entire website design, and then select a contrasting accent color for important buttons and other interface elements. When people see colors, they think of or feel certain things. Colors that clash or overpower the page cant detract from the user experience and prevent visitors from engaging with your website. 

 These few items that I’ve mentioned are some that I found most important, there are many more elements we need to be aware of which can be seen below; 

Making the site responsive

Easy to navigate

Correct implementation of Call To Actions

Making use of social media links or plug-ins. 

The article here was a good read and gave good insights into making a website more engaging. 

[tonygunning2]

Wordpress Isn’t The Only  One!

As I have freshly come off the back of designing my first website using a CMS platform, WordPress in this case. I began to to wonder how many more are out there and the importance for designers to have knowledge in multiple Content Management Systems. 

The main importance in my opinion is the benefit to working with more than one CMS is observing their differences. 

For example if we take Wix, which I’ve used along time ago. This will be a lot more of a front end focused platform where you pick a theme, then start adding content and bits of desired functionality. Taking some open source CMS’ like WordPress or Drupal, we will get a lot more options in what we can achieve. Even the ready made themes within these are great to work with, but we also have more opportunities to explore and add customisations within these platforms. 

The benefit of knowing multiple CMS platforms utilises the systems and teaches us that there is more than one way to accomplish a particular task. Another benefit of multiple CMS’ is it encourages us to learn more about UX, to quickly gain an understanding of what does and doesn’t work. 

To close, there’s, nothing wrong with preferring a particular CMS and specialising in it. Having intricate knowledge of a system means you’ll likely accomplish more with less effort. 

Wix:

WordPress:

Drupal:

[tonygunning2]

Reflecting on an Introductory WordPress project - #Post8

Over the past week I have been spending a lot of my free time using Wordpress and customising the site content for an assignment to understand CMS systems and designs. Below are some brief thoughts on the platform and also some issues I encountered along the way. 

The first great thing about WordPress is that it’s 100% open source from end to end. Another is the online community around WordPress is fantastic. Especially for novice user like myself, the resources out there with tips and pointers gives you great lead into getting around the system. I must be honest, before starting this project I had a misconception that WordPress was solely just for blogs. How wrong I was, the variety and style of website designs that developers or anyone can implement is vast. Another item to note is you must utilise the plugins and widgets available within WordPress as they help you shape your site and your content. All in all I had a very positive experience using WordPress and look forward to using it agin in the future and working on some complex design in the process. 

With this particular project I had only two main challenges or problems throughout the process. 

The first was not spending enough time understanding the changes made in the back end with filezilla, I struggled through a few errors here but made through. Going forward learning more about server side interests me a lot; I hope to take server side web development next semester to gain a wider knowledge base in this aspect. The other main area that caused some issues was at the beginning of customising with my own CSS. At first certain things wouldn’t work correctly or change’s wouldn’t appear, it was clear I didn’t have the right classes or groups of classes and things where classing etc. To get over this I changed browsers to Mozilla Developer Edition and began to utilise the inspector, which, honestly helped with all the problems. The inspector tool within that browser is far superior to other browsers and is absolutely essential when working on web development projects. Going forward it’ll be my go to for projects like these. 

Here is a gallery of screen shots of the finished web page. 

[tonygunning2]

Why we wordpress...

This week’s post will look at WordPress and Content Management Systems (CMS) platforms are so popular these days. Any business with a website wants the website to be easy to us...no matter what. While it’s important for the users at the front end to have an easy life navigating the site, it’s just as important for the staff at the back end to have an easy life managing the system. 

This makes me think why are CMS sites important? It’s good to note they are open source for all to use and the network has a large community built around it which makes it super easy to new users to get acquainted with, and in time run wild with their imagination. 

Another point worth noting is that WordPress is still displaying the webpage using the HMTL and CSS structure that we know and have been learning over the last number of weeks. But both these components are managed by the CMS and we want to make simple changes we simply edit the post or the page, or alter the appearance with one simple click and hit....Publish. 

This past week I have been introduced to WordPress and have been working on another college assignment to design using using their CMS package. 

Below is a quick screen shot of the webpage I’m working on at the moment within the WordPress environment. It doesn’t look like much now but the it’s only been a week, getting set-up on the college server proved quite the task but sis so important for it work in the right way for us. 

See you for next week’s addition.

[tonygunning2]

Responsive Is Key!

Using a responsive website design is no longer an option when building websites. From what we’ve learned so far a responsive website design makes your site look good no matter which device your visitors are using to view and interact with the content.

Now a days as most of the adult population own a smart phone, ensuring your website is responsive is a must. That’s where we hear the phrase “Design for mobile first”. I know from personal experience if I’m looking for a particular business or service and I go looking online and come across a site that’s poorly designed, I’m guaranteed to leave and probably not recommend it to a friend or colleague.

When you take the above into consideration, it’s easy to understand why your websites’s content needs to be accessible across all variety of devices and systems.

I spent a few days this week browsing around the web and here are a few of my favourite sites that do responsive design perfectly.

Wired:

CSS-Tricks:

Dropbox:

[tonygunning2]

Moving With The Grid!!

As mentioned in last week’s blog post, this week’s addition will be the CSS Grid.

The CSS Grid is another CSS tool that attaches to the web developers tool belt. Where the use of a grid to design more complex layouts will help us, is when thinking of responsive web design. Unlike times before, nowadays we design for mobile first, as when we scale up to larger devices the web page scales appropriately.

The image below gives a good representation of responsive vs. adaptive design. (Screenshot courtesy of Kinsta)

Key to responsive web design is our CSS grid and the use of the rows and column system to specify element locations. But most importantly it’ll be the columns that will allow us to stack our content as we move from a single column layout on the likes of smartphone, to a two column layout on a tablet and finally a 3 column layout on a desktop or laptop browser. These layouts are not the only ones typically used but the most common that we are likely to encounter. 

A great resource that i’ve already mentioned but I’ll mention again is CSS Tricks, this place has so much information to help us out with things like CSS grids. As we move forward and look toward a final project at the end of the month I know I’ll be hitting up CSS Tricks for plenty of help. 

For the next post I’m going to be looking into Wordpress and what we can do there. 

[tonygunning2]

What about Flexbox? #Post 5

Now that we have finished our first project I was able to take some time and see what would make it easier I had to do it again. The whole time I was coding and doing the project I was stressed about how I was going to move different aspects of text and image etc. I shortly realised things like tables and floats will only get us so far. I also realised after doing some searching and reading that these structure tools weren’t designed for the complex webpages and web apps we have today. 

Then we were introduced to the world of Flexbox and CSS grids and why we should be using both of these when we are designing layout for our webpages apps. I thought this image below is a good representation of what both elements do within the page layout and which system you would choose to implement depending of what sort of webpage or app. 

Although when it comes to styling with flexbox, it’s not as easy just throwing in this piece of code. (Screenshot courtesy of CSS Tricks) 

To successfully use Flexbox there is basic information and terminology as well as plenty of Flexbox properties which the user/designer will need to understand and implement. Here is a brilliant walk through of everything you need to know. 

On a side note the CSStricks website is a fantastic resource for any aspect of CSS and the content available here is great and super helpful for entry level coders like myself. 

In my next post I’m going to look more into CSS grid layouts and the benefits of using them.  

[tonygunning2]

Another Post - #Post 4

Following on from my last post I have been busy working on the first project and getting into the CSS and styling aspects of our learning’s in class. 

Below are some screen shots of the final assignment and the working code.

I have to say when I initially started getting into CSS; it was difficult to wrap my head around. Although it’s so obvious how important CSS is to making our websites look aesthetically pleasing and professional, it’s also just as important to have it laid side by side with good semantic HTML.

Here is a very good article  a classmate had posted in a forum which I found super easy to follow and very helpful while working on the project. 

Another thing I found while working on the project and many of the labs in class is that the only way to get better with web development is to put pieces of code in and if it works great! If not its purely a matter of keep trying and learn by doing.....THERE IS NO OTHER WAY

There are just many free and open source materials that are out there and so helpful... One that I found myself looking at more and more is the Mozilla Developer Network and I can see myself jumping in here many times in the future. 

[tonygunning2]

Moving Along Nicely - #Post 3

As we begin to pick up speed in class we’ve been given our first code-based assignment, which is to build a simple personal profile site in HTML with a simple style sheet. You can see the basic elements that I’ve gotten to do so far, aprat from the style sheet...so don’t judge it just yet :)

Over the last few weeks we’ve been learning about semantic vs. non-semantic HTML, there are two things that have resonated with me on the importance of good semantic HTML which were introduced here while doing some reading.

1- Accessibility: 

Initially I was unsure of what was meant by accessibility but as I continued to read up, it became very clear. It was obvious that using semantic coding structure made sense for both humans and machines alike. With machines however I would be lying if I said I understood at first why such coding structure was needed for users of screen readers and other accessible technologies, but now I can, and now understand why we implement code in such a way. 

I came across this video and found parts of it super interesting, although parts of it were past my depth of knowledge. 

The below image painted a great picture of the simple semantic layout, which I found here.

2- Search Engine Optimisation:

Honestly I had never really heard of SEO so this concept was almost completely new to me. But after reading a few lines from the article I began to understand how important it is. 

If we think about how many times a minute people are searching the web its so important that any page we code or design is optimised to the best possible way to give us the chances of getting the position in the search results we want. 

Also it was interesting to learn how semantic HTML can help us future proof our websites, which benefits us in trying to stay on top of the trend. 

[tonygunning2]

A week On - #Post2

Another week done and dusted which means more new topics where introduced and discussed. This week we dove into table, links and images. On a general note I love images and imagery and below are some thoughts on such.

1- Over the weekend I had a thought about images and the web, images are absolutely EVERYWHERE for us to see and enjoy. All types of websites and web based technologies. A simple popular example Instagram, who's sole function is for people to upload image and other visual content for others to see.

2- From a personal perspective I think when we're on a website we take for granted how images are displayed and organised and also that we take for granted how much time and effort in regards to the coding goes into websites for us to enjoy. Since starting the course I find myself inspecting the web pages more to see how much code is really there and every time I'm amazed. Here's some example screenshots;

3- When I think of images in a web based context my first initial thought brought me back to early teen years spending time uploading vast amounts of mundane photos to Facebook and await for friends to like and comment. Of course the web isn’t just for uploading images to Facebook or Instagram. Many different types of industry’s make use of web based technologies for products and services. The use of images and imagery can form a hierarchy for the text based information and in many cases the imagery reaffirms what the text is saying, as the saying goes “A picture speaks a thousand words”. 

4- Finally while looking and searching through information about images and the web I came across this breakdown of Image Concepts which I thought was good for beginners like myself introduction themselves to HTML. 

[tonygunning2]

Hello there blog world - #Post1

As I’m a newcomer to blogging don’t be upset or horrified with the layout or format of the blog posts. The general topic and subject matter of this particular blog will mainly be chitchat and reference to a web development/web authoring class that I’m taking in college, but also anything web based that I stumble across and find interesting or cool :) . 

For me its been around 5 year’s since I finished my undergrad, and there-for a while since I’ve HTML. But! In saying that to my surprise once we started covering the basic elements and theory, things started flowing back to me. So far I’m enjoying getting back into Web Dev and HTML and I’m looking forward to getting into the course deeper. But for now I’ve been hanging out with the CatApp tutorial in freecodecamp to get back up to speed with the basics.

There is a website that has stayed in my mind ever since I left college previously and I always circle back for a browse from time to time. From a web design perspective the layout is simple and each info graphic media is set in side a box type element and creates a big scrollable feed for the user to explore to their hearts content. The end results in some of these visualisations are amazing, and on a side note it seems that this site offers training in data visualisation (quite handy).