Prototype Changes & Problem Solving

Small Updates – From the Part 2 logo I created, I added splashes however as time has went on, the more I look at them the more their design starts to decline the target audience. I have decided to change the last minute splashes in the logo by taking them out. I also noticed a small error in which the icons for the titles were the wrong way round, the pattern of the icons were off. This is something which I have also changed, these changes were not hard to change but have benefited the target audience and overall design for Rapidz.

Prototype Design

The design process for Rapidz is quite complex compared to designing for web. Although the process is still fun – it also comes with a lot of attention to detail and making sure that all pages work in order and function properly. This is the design process so far for the XD work in which I have done for the Rapidz app. I really enjoy the colours that have been used as I think they work great in response to the Rapidz identity and colours, keeping the design minimal is also working well for the app.

Problem Solving #HEXCODE Web Issues

Finding an ease through designing Rapidz came quickly after installing the elementor plug in. However, although this allows a lot of control over your website, they are some set backs. Depending on the website template you choose to use, (Astra) templates will come with hard coded colours and pre-written code which are are hard to find and change. Although it is possible to change the colours and coding of the initial template from Astra in my circumstance, this would take a thorough search to find the CSS and index files through for the colour code which is attached to the menu. This is why web coders are so important to web design and optimisation as they could fix an issue like this in a flash.The colour would have been a green colour, although I wont be changing the colour for educational purposes, this was a great problem learning curve which I would know how to fix but would take a while.

Occurring issues like these do in-fact certify why HTML websites could be a great option to build a website with, you could change all coding easy as what ever the website is built with would have been hand coded by yourself.

Poster Marketing Strategies

Sourced from:

From this article, it is found that the best sources for marketing a business in general are predominantly billboards. Although this seems to be ranked the highest as a lot of people would see this no matter the target audience, it is very expensive. The large scope of people who would see this is a great impact for any company although this means that not everyone who is targeted towards may see this.

For Rapidz to become noticed and gain clicks and interest, this is where the digital assets for marketing are important. This is so that platforms like Facebook and Instagram can target the posters and assets towards the appropriate people that would be associated with Rapidz. Using cookies and common interests, this makes the advertising for a specific target market much easier. Using a digital format would also be a lot less costly, perfect for any company including Rapidz.

Example: Billboard viewer – large scope of viewers but not specific.
Digital – Smaller scope of people (or larger depending on money spent), more specific audience.

Setting up the Site – Rapidz

Setting up the website for Rapidz should be an exciting process, allowing me bring to life the wire frames that have been worked on for a while now. To set it up, it was necessary to have an install of word press on the domain. This was installed a few weeks prior for research towards the HTML static sites, N-DBS and DBS.

Problem Solving
Straight away, they’re were issues within the template used and installed to set up the website and start off with. When installing this, there were no drag and drop options to find out how to change the background colour or image gallery. This is where the inspection of CSS is important in coding, as mentioned previously – having some idea of coding could benefit you greatly in times like this. Through inspection of the website, it was found where the style was to change the colour of the background and site. Already, problems have occurred but knowing code can really ease to the problem.

Adobe XD – Hints & Tips

Sourced from lecturer – In session
Graham Mitchell

Auto Animate – This is a simple interaction which animates the shape you have used – i.e. you could zoom and scale up something which includes a bit of type. 

Prototype Preview – To see how your component works in responsive time click on the arrow key in the top right corner.

Responsive Resize – Turn this on, and test this out on different size models if applicable. This would let you see how the app will allow you to see it on different screens and scales.

Artboards – Click on the name to change the length, position and duplicate the artboard. 

Nodes –  The blue lines with arrows will be used and displayed throughout Adobe XD to allow the interface and transitions to connect to each other i.e. blue circle to large blue circle. Anything can connect to each other.

Zoom in – Shift + Ctrl key

Part 4 Final Logo Development

From the designs I had created, I had many ideas in mind which may or may not work. For example, the first Rapidz logo was too sketchy and looked very child like, then the modern and futuristic logo which suited the brand well but it was too complicated to understand along with the missing rafting paddles. Finally, after more attempts at perfecting the logo, it is at a place which the logo works well and suits the target acquired due to the simple logo which is scaleable at any size. It works well with the bright green and blues which correct each other and do not clash.
I think the paddles work well to the right of the boat too, adding to the idea and clearance of white water rafting.

This process look a lot longer than usual, having more of an idea of the target audience and drafting logos before trying to perfect each one would be more more efficient towards a timed brief when it comes to designing the identity, this may be why wireframes are very effective.

See image for the development of the logos.