-
This page is a condenced version of development displaying key elements. To see the full development and research which lead to the creation of Lucid please click here!
what is lucid?
Lucid is a decentralised digital currency network.
Lucidcoins are digital coins you can send through the internet.
Compared to alternative digital currencies, Lucid has a number of advantages.
The lucidity of our service is crystal clear making digital banking simpler for everybody willing to transition to the future of banking.
The currency is exchanged person to person via the internet.
Cutting out the middle man means there are no fees in every transaction.
You can use Lucid in every country stimulating a global market place.
Your account cannot be frozen.
There are no hidden fees and it is 100% free to set up.
Using a Lucid takes the power and billion pound bonuses away from bankers.
To see the full development and research which lead to the creation of Lucid please click here!
How does it work?
Several currency exchanges exsist where you can buy and sell Lucidcoins for pounds, dollars, euros and more.
Your Lucidcoins are kept in your digital wallet on your computer or mobile device.
Sending currency is as simple as sending an email & you can purchase anything with Lucid.
The Lucid network is secured by individuals called minors, who are awarded currency for verifying transactions.
To verify a transaction a minor simply needs to have their computer or mobile device running.
Once the transactions are verified they are recorded in a public ledger, completely visable to anyone on the network.
To see the full development and research which lead to the creation of Lucid please click here!
The Name
Lucid means; clear and easy to understand (In the marketing this is what I hope to achieve.)
A Lucid Dream - Is a dream during which the dreamer is aware of dreaming, consequently the dreamer may be able to exert some degree of control over the dreams characteristics. (We are making the public aware of the dream the banks and the governments have forced them to believe, in doing so we give them back the control.)
To see the other names I considered please click here!
The Tag Line
Change & Exchange: The word "Change" as a verb is too make or become different or to take or use another instead of the current. As a noun "Change" means an act or process through which something becomes different. It can also be interpreted as coins as opposed to banknotes.
The word change has a vast amount of meanings allowing word play to take place. To link change which exchange, not only dose exchange contain the word change, they rhyme making this tagline catching and memorable.
What this phase is saying, is that anybody who encounters Lucid can change too our currency and begin to exchange our currency opposed to the current financial system.
(Previous Tagline) Liberate & Accumulate is a play on the phrase; Speculate To Accumulate. This proverb says little to help people in search of a sensible long-term investment strategy, but it does suggest something important about one of the basic principles of investing; the relationship between risk and reward. Changing Speculate to Liberate is in implication of freedom that Lucid offers our clients. This freedom from the current banking system.
To see the other ideas I considered please click here!
The Colour Pallet
The Color Purple In Feng Shui, purple is the best color to stimulate and increase your abundance. Historically-speaking, purple was the hardest color to make, so only royalty wore purple to show that they were wealthy. Hang purple curtains on your windows or have a purple throw blanket on furniture that you may have in this corner. Alternatively, you can use a purple vase that can work as your Prosperity Vase, where you can put money in everyday as you are imagining this money growing like magic beans into a huge money tree that will take you to that giant in the sky.
The Midas Touch Gold is another wealth color in Feng Shui. Do I really need to explain why? In your Prosperity corner you could have gold coins, gold jewelry, or gold frames with photos of people or family members whose wisdom and financial success you admire. If you admire a wealthy figure, such as Bill Gates or Warren Buffet, you could place a picture of such a person in the corner of your home or office. Alternatively, you could have figurines of golden-laced guardian angels or saints.
To see the other colours I considered please click here!
The Audience
Lucid is for people who would are interested in cryptocurrency but are confused by the lack of clear information of exactly what it is.
The typical user is somebody who would like to use money without it passing through the hands of the financial elite.
The Website & Software
The website created for Lucid is written in HTML, CSS & Javascript. The page is simplistic and minimal informing the viewer directly what they came to the site to see.
On this page you can download the software to Windows or Linex enabling any one to download the wallet to begin trading digital coins.
The pages main creative features are the fixed header and the parallax scrolling throughout.
To view the website or download the software to install Lucid please click here!
Shorthand Logo
The shorthand logo was inspired by a dreamcatcher - a small hoop containing a horsehair mesh decorated with feathers and beads, believed by American Indians to give its owner good dreams.
This idea was due to the birth of the name Lucid, deriving from the context of Lucid dreams, stated above.
Bellow is a selection of designs which lead to the end result, but to see the full development of the logo please click here!
Longhand Logo
The longhand logo was also inspired by a dreamcatcher - but I considered a selection of fonts to accompany this image This came before the Shorthand in my development. After I picked which font i used (Neon-80's) I then began to manipulate it to fit the brand.
Bellow is a selection of designs ands fonts which lead to the end result, but to see the full development of the logo please click here!
The Icon
Like all currencies Lucid needed a icon to symbolize the currency in a few simple pen strokes like the $, £ € ect...
Bellow is a selection of designs which lead to the end result, but to see the full development please click here!
The Chosen Ones
While choosing, developing and designing each element of the branding I felt it was essential to experiment how the worked together.
Bellow are the final decisions for each element of the branding but to see all the others which did not make the cut please click here!
Experimental Branding
Bellow are the final decisions for each element of the branding but to see all the others which did not make the cut please click here!
Experimental Posters
These posters are suppose to talk to the audience. The people in the imagery symbolize bewilderment and desolation in a world of finance which they do not understand. Lucid branding in varied opacity levels is layered to imply light at the end of the tunnel. The transparency is lucidity. These posters were printed on clear acetate. To see other designs which have not made this small selection please click here!
Film Explaining Lucid
The first film explains exactly what a crypto currency is. The music accompanying the video is happy and upbeat to show positivity within the brand. The script is supposed to be clear and concise. However I feel I speak a bit too fast making it very hard for the viewer to follow if they do not know what I am talking about. The visual content is supposed to display the feelings of people who use Lucid throughout.
The second is a propaganda film explaining what the current banking system is and how it works. To explain how this system currently works is a way to sell the new system which is Lucid. The footage in this video fits the script particularly well, detailing the current banking system in a direct exposes the non liner world presented to us. The darker sound track imply importance and seriousness.
Direct Marketing Approach
Quotes taken from the script of the film above directly outlining the problems of the current banking system, offering the audience a solution.
This works so well because the quote is a negative spin on the downfall of todays society effecting everyone within it, then within 3 words (Change & Exchange) offering a solution.
These posters contain all the elements of design which make up Lucid.
Through designing for Lucid, I noticed the gold colour works best minimally. Like an earing opposed to Mr T's neckwear.
The goal of Lucid is to be clear and concise, and this marketing approach is as live and direct as you can get.
The font used in the body text is; Futura Condensed ExtraBold. I took this inspiration from the film; They Live & Shepard Fairy. As I am offering the viewers the sunglasses which reveal what is really happening in our financial world.
Designed By www.MaverickMedia.org.uk
While completing Ba3 I continued running my company, this page displays all the work I completed for clients since the beginning of this module. To see the new 2017 website launched 05/02/2017 and my Full Web Design Portfolio and to read the history of Maverick media please click here!
Mama Olga Belly Blessing
Bellow is a body of work created for my first customers of this year.
Mama Olga's is a family run restaurant and caterer.
Their food being based on traditional caribbean recipes.
Mama Olga (my clients mother) inspired their family to open a resturant dedicated to her memory.
For this company I have completed an array of branding, design and printing services.
Possibly The Most Beautiful Website You Will Ever See!
Please click here!
The Logo
Inspired by Jamaica's national animal the doctor bird.
Using Jamaica's colour scheme of Green, Yellow & Black.
The thin long tail is the most iconic feature of the bird.
The Title Text
This font is modern, however the corners are slightly rounded with a border radius of around 2.5px which displays an essence of smoothness.
The Menu
A lot of customers I work with already have menus which are cluttered, over crowed and tacky.
I feel I have created a stylish beautiful piece of design which displays the information efficiently.
The high quality pictures should tantalize the readers desires.
The colour palette is bright and exciting.
The front page certifies what style of food is for sale. Making the leaflet standout in your collection of chinese, indian and kebab menus in your draw.
A1 Window Posters
8ft Menu Banner For Instore
TeeShirts
Designed By www.MaverickMedia.org.uk
This page is a condensed version of development displaying key elements. To see the full development and research which lead to the creation of Beathoven please click here!
what is Beathoven?
Beathoven is an audio visualisation app powered by d3 javascript, rendering various sound metrics onto an svg.
Beathoven is an audio translator, to show what sound looks like.
It is a device which transfers sound into visuals.
This is an audio equalizer.
The idea is to show what music visually looks like.
Beathoven allows people to connect their instruments to see how their music looks.
Cutting edge D3 technology using Javascript to animate SVG.
It can allow people who cannot hear instruments play them by seeing how the music looks.
It is like painting with sound.
To see the full development and research which lead to the creation of Lucid please click here!
How does it work?
The audio is periodically sampled giving volumes at different frequencies, all the way from low (bass) to high (treble). This volume info is then used to scale the SVG.
Sound data is collected through a microphone which can be external or built into a device.
There are three types of data collected; volume, hertz & tempo.
This information allows me to define actions for specific elements.
Using Javascript I can manipulate SVGs to correspond to this data.
There is an option which allows the user to select which visualizations they would like to see.
To see the full development and research which lead to the creation of Lucid please click here!
The Name
Beathoven is named after; Ludwig van Beethoven a German composer and pianist. A crucial figure in the transition between the Classical and Romantic eras in Western art music, he remains one of the most famous and influential of all composers.
Notoriously Beethoven is reported to have suffered from hearing loss from a fit he suffered in 1798 induced by a rage at the interruption of his work having fallen over, he got up to find himself deaf.
The word "beat" has replaced with "beet". This is to cement that this is a device which is connected with music.
The Javascript
$(document).ready(function () { var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var audioElement = document.getElementById('audioElement'); var audioSrc = audioCtx.createMediaElementSource(audioElement); var analyser = audioCtx.createAnalyser(); // Bind our analyser to the media element source. audioSrc.connect(analyser); audioSrc.connect(audioCtx.destination); //var frequencyData = new Uint8Array(analyser.frequencyBinCount); var frequencyData = new Uint8Array(300); var svgHeight = '400'; var svgWidth = '500'; var barPadding = '1'; var time = 0; function createSvg(parent, height, width) { return d3.select('#svg-container').append('svg').attr('height', height).attr('width', width); } var svg = createSvg('body', svgHeight, svgWidth); // Create our initial D3 chart. svg.selectAll('rect') .data(frequencyData) .enter() .append('rect') .attr('x', function (d, i) { return i * (svgWidth / frequencyData.length); }) .attr('width', svgWidth / frequencyData.length - barPadding); // Continuously loop and update chart with frequency data. function renderChart() { requestAnimationFrame(renderChart); // Copy frequency data to frequencyData array. analyser.getByteFrequencyData(frequencyData); // Update d3 chart with new data. svg.selectAll('rect') .data(frequencyData) .attr('y', function(d) { return svgHeight - d; }) .attr('height', function(d) { return d; }) .attr('fill', function(d) { return '#ef5229'; }); svg.selectAll('ellipse') .attr('rx', (frequencyData[4]) / 12) .attr('ry', (frequencyData[4]/2) / 12); updateData(800 - (frequencyData[4] * 3), 800 - (frequencyData[170] * 3)); if ($("#rings-checkbox").is(':checked')) { drawCircle((Math.cos(toRadians(time)) * 400) + 600, 800 - (frequencyData[170] * 5)); } time++; } // Run the loop renderChart(); var i = 0; function particle() { var m = d3.mouse(this); drawCircle(m[0], m[1]); d3.event.preventDefault(); } function drawCircle(x, y) { svg.insert("circle", "rect") .attr("cx", x) .attr("cy", y) .attr("r", 1e-6) .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5)) .style("stroke-opacity", 1) .transition() .duration(2000) .ease(Math.sqrt) .attr("r", 100) .style("stroke-opacity", 1e-6) .remove(); } function toRadians(angle) { return angle * (Math.PI / 180); } /* LINE CHART */ // Set the dimensions of the canvas / graph var margin = {top: 30, right: 20, bottom: 30, left: 50}, width = 600 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%d-%b-%y").parse; // Set the ranges var x = d3.time.scale().range([width, 0]); var y = d3.scale.linear().range([0, height]); // Define the axes var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); // Define the line var valueline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); // Adds the svg canvas var linesvg = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var bassData = []; var trebleData = []; var today = moment(); for(var i = 0; i < 50; i++) { bassData.push({date: parseDate(today.subtract(1, 'days').format('DD-MMM-YY')), close: 800}); trebleData.push({date: parseDate(today.format('DD-MMM-YY')), close: 800}); } console.log('new bassData', bassData); // Scale the range of the data x.domain(d3.extent(bassData, function(d) { return d.date; })); y.domain([0, 800]); // Add the valueline path. linesvg.append("path") .attr("class", "line bassline") .attr("d", valueline(bassData)); linesvg.append("path") .attr("class", "line trebleline") .attr("d", valueline(trebleData)); function updateData(bassVal, trebleVal) { if (!bassData || !trebleData || bassData == [] || trebleData == []) return; for(var i = 0; i < (bassData.length - 1); i++) { bassData[i].close = bassData[i+1].close; trebleData[i].close = trebleData[i+1].close; } bassData[bassData.length - 1].close = bassVal; trebleData[trebleData.length - 1].close = trebleVal; // Select the section we want to apply our changes to var svg = d3.select("body").transition(); linesvg.select(".bassline") .attr("class", "line bassline") .attr("d", valueline(bassData)); linesvg.select(".trebleline") .attr("class", "line trebleline") .attr("d", valueline(trebleData)); } /* sperm */ // Continuously loop and update chart with frequency data. var width = svgWidth, height = svgHeight; var n = 100, m = 12, degrees = 180 / Math.PI; var spermatozoa = d3.range(n).map(function() { var x = Math.random() * width, y = Math.random() * height; return { vx: Math.random() * 2 - 1, vy: Math.random() * 2 - 1, path: d3.range(m).map(function() { return [x, y]; }), count: 0 }; }); var g = svg.selectAll("g") .data(spermatozoa) .enter().append("g"); var head = g.append("ellipse") .attr("rx", 12.5) .attr("ry", 6); g.append("path") .datum(function(d) { return d.path.slice(0, 3); }) .attr("class", "mid"); g.append("path") .datum(function(d) { return d.path; }) .attr("class", "tail"); var tail = g.selectAll("path"); d3.timer(function() { for (var i = -1; ++i < n;) { var spermatozoon = spermatozoa[i], path = spermatozoon.path, dx = spermatozoon.vx, dy = spermatozoon.vy, x = path[0][0] += dx, y = path[0][1] += dy, speed = Math.sqrt(dx * dx + dy * dy), count = speed * 10, k1 = -5 - speed / 3; // Bounce off the walls. if (x < 0 || x > width) spermatozoon.vx *= -1; if (y < 0 || y > height) spermatozoon.vy *= -1; // Swim! for (var j = 0; ++j < m;) { var vx = x - path[j][0], vy = y - path[j][1], k2 = Math.sin(((spermatozoon.count += count) + j * 3) / 300) / speed; path[j][0] = (x += dx / speed * k1) - dy * k2; path[j][1] = (y += dy / speed * k1) + dx * k2; speed = Math.sqrt((dx = vx) * dx + (dy = vy) * dy); if(j % 19 == 0) { drawCircle(path[j][0], path[j][1]); } } } head.attr("transform", headTransform); tail.attr("d", tailPath); }); function headTransform(d) { return "translate(" + d.path[0] + ")rotate(" + Math.atan2(d.vy, d.vx) * degrees + ")"; } function tailPath(d) { return "M" + d.join("L"); } var i = 0; function particle() { var m = d3.mouse(this); drawCircle(m[0], m[1]); d3.event.preventDefault(); } function drawCircle(x, y) { svg.insert("circle", "rect") .attr("cx", x) .attr("cy", y) .attr("r", 1e-6) .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5)) .style("stroke-opacity", 1) .transition() .duration(2000) .ease(Math.sqrt) .attr("r", 100) .style("stroke-opacity", 1e-6) .remove(); } function toRadians(angle) { return angle * (Math.PI / 180); } });
Examples of it in use & development
The first attempts contained an Audino & a microphone. The purpose was to make sound react to lights. I dropped the Audino as I am more comfortable working with Javascript then C.
This is a digital diagram of the circuit.
Then the plan was to make the data collected through the microphone interact with digital design. These sparks ignited to loud volume.
This is the progress of developing SVG with Javascript interacting with mp3.
The SVG's all react to different frequencies. This is best displayed by the bars at the bottom. Each bar is set to a different frequency and increases in size depending on the volume. Using these bars any SVG can be synchronized to react in similar ways. For example the sperms radius is manipulated by the 4th bar.
The lines is a nice touch because it follows the music and has a constant reaction to multiple bars. The rainbow spiral is purely effected by the pitch of the voice.
This version allows the user to switch elements off and on.
This final version has better scaling, interface and is less complicated. This working D3 model shows how sound can be interpreted visually through a browser using Javascript to create and animate SVG.
Designed By www.MaverickMedia.org.uk