Meet Jay – Junior Web Developer

Another new face at Mosaic Digital Media! We welcomed Jay this week as our new Junior Web Developer.

So without further delay, we’d like to welcome Jay to the Mosaic team!

Hi Jay, welcome to Mosaic Digital Media! How did the role come about, and what would you say the definition of your role is?

“After graduating from University, I was looking for my first role within the industry. Still, I wasn’t sure which path I would like to take. After making sure my coding skills were good enough, I realised I enjoyed Web Development.

After this, I spent some time looking for roles that would suit my skills and match what I was looking for in a workplace. When I came across Mosaic, it stood out as the perfect role to learn and develop my skills whilst also growing within the company.”

How have you found life at Mosaic so far?

“As it is my first day today, I haven’t had much time within Mosaic. But so far, it has already been amazing, with the team being incredibly welcoming and friendly. I can’t wait to spend more time here!”

What would you say your most significant strengths are, and why did you want to take up the position with Mosaic Digital Media?

“My greatest strength is my problem-solving skills, as they are a vital part of any developer role. Having gained a lot of experience and skills throughout University, I spent time strengthening these skills. I cannot wait to learn even more from the great team at Mosaic.”

 

To speak to Jay about his growing Web Developer skills, call 01925 563 960 or use our contact form here.

CSS Gradient Tool Build

Here at Mosaic Digital Media, we get time allotted for independent training each week to develop our skills relevant to our roles. This can be in the form of subject reading and research or in creating little projects that utilise specific technologies and skills that we would like to improve our knowledge of.

In the web team, we regularly use HTML, CSS, PHP and JavaScript (amongst others) to create all of our websites. Out of these skills, I have the slightest practical knowledge with JavaScript – a programming language that uses scripts – or little pieces of code – to do a wide array of things on a website when you view it. This could include animations, changing colours or showing/hiding information.

So, to improve my skills, some of my training time has been dedicated to JavaScript. I find programming languages to learn by doing something practical, as such I decided to create something that uses JavaScript.

As well as building websites, my role also involves designing websites, as such, I work with a lot of colours and gradients. Therefore, I decided to build something that bridges the gap between design and development and create a tool that could automatically generate a random gradient at the touch of a button.

The end product was a tool that will generate a random gradient with two colours and a random angle of direction. To make it more user friendly, I also included a button that will copy the CSS code needed to replicate the gradient to the clipboard for use elsewhere.

The generator was built with HTML, SCSS and JavaScript, using the online development environment CodePen. The HTML and CSS code is nothing exceptional, but it’s the JavaScript that does all of the magic.

Each time the button is pressed, it will generate two random colours via their hex value and choose a number between 0 and 360 (for the angle of direction).

It then uses a function to add the various pieces together in a string, in the same way, that CSS code will display a gradient – this then allows the gradient to be used within the project, such as where the gradient is displayed

See the Pen
CSS Random Gradient Generator
by James Brewer (@MDMJames)
on CodePen.

Or take a closer look here: https://codepen.io/MDMJames/full/GRmqLer

A Guide to Website Flat Designs with Adobe XD

When we start a project, we always like to create a website flat design before developing and coding the site.

Below we have included a flat design for one of our clients;. However, the template isn’t a finished build, it is easy to understand how the final website will look.

A Guide to Adobe XD Flat Designs | Better Bed Company | Mosaic Digital Media | Web Design Warrington

Each flat design comes with its own “live link” that will update as changes are made to the design, so new revisions don’t have to be sent across whenever an element is adjusted. This saves hassle for all parties involved. The latest revision will always be present on the link, so there is no concern about having an outdated flat design.

This link can be viewed at any time, and though it isn’t the actual live site, it may have some interactive elements that will replicate how the site will function when it is developed. Interactive features will give you a better idea of how each aspect of the website will work with one another to provide you with a better idea of the User Experience and User Interactions.

As stated above, this is not a live and developed site, so elements such as links and forms will not be interactive. The whole website will not be designed, just the key pages.

What is a Flat Design Used For?

The reason why we create a flat design first is to allow you, the client, to see what the finished result of your website will look like before it has even started to be developed. This allows for changes and revamps to be made quickly and easily without deleting or modifying code.

With a flat design, the structure of the website is visually accessible without a significant time investment. This means the design can quickly be approved without waiting for something to be coded first, decreasing development time as a whole.

It also allows us to visualise what we are building as we code the site, saving us time from going back and forth between elements to adapt them per new section we create. We have found that when we create a flat design before coding, the final result flows more fluidly and gives a better User Experience.

The flat design also dictates the flow of the website. It effectively highlights what pages should link with one another and how to direct the user to the website goal in the fewest clicks (be it product checkouts, information pages or otherwise).

Mobile Layouts

Over 50% of website traffic has been reported to come from mobile devices; as such, it is as important to design for mobile as it is for desktop. This is why we do just that!

In our designs, we will include the desktop layouts for the key pages of your website (usually the home, inner, shop and product pages) and the mobile variations that come with it. This will make it easy to visualise how the website will look when shrunk down to mobile device size and how each element will fold into one another to remain responsive.

A mobile layout can be easily identified by the thinner nature of the page, with each element being stacked one above another rather than on the same row as per the desktop designs. An example of this has been included below.

A Guide to Adobe XD Flat Designs | Better Bed Company | Mosaic Digital Media | Web Design Warrington

How to Comment

A feature of the software we use to create flat designs is a helpful tool that allows for pinpointing an exact location on the design and adding a comment on it. This is especially useful for features that require modification or removal that you, as the client, can easily highlight and request.

It is a simple process to comment on the flat designs; all you need to do is in the top right section where the “make a comment” text box lies, click the pin icon, then select the element on the page in which you wish you need to make a comment.

Once the pin has been placed, type the comment into the comment box and press submit, this will add the comment to the list on the right sidebar of the design. Clicking any of the comments on the sidebar will take you to the exact pin for easy navigation.

A Guide to Adobe XD Flat Designs | How to Comment | Mosaic Digital Media | Web Design Warrington

 

If you’re looking for a new site, you’ve come to the right place! Call our Web Design team on 01925 563 960 or use our contact form here.