Place of Internship: Fresh Futures Malaysia - Fresh Futures Education is a comprehensive Education Services Company committed to excellence in counselling. Fresh Futures' specialty is providing students alternative education paths to reduce their cost, course duration and providing each student with the opportunity to secure a job within the time frame that they are studying. (excerpt from website: freshfutures.com)
First task: Get used to Adobe Muse software
Senior taught me the basic functions of Muse.
I learnt how to use built-in and downloaded widgets.
Designing a website without first developing it using HTML, Muse is much more suitable for designers who likes a simple drag-and-drop.
After getting to know Muse on a basic level, I was tasked to design a simple layout for their website to display their sponsors/institutions.
Firstly, collecting images of the sponsors/institutions' logos and turn the image files into vector files using Adobe Illustrator. Secondly, I drew up drafts on different kinds of layout before transferring the layouts into Muse.
Drafting with pencil and paper before transferring them to Illustrator.
The chosen layout is then put into Muse.
This is the final outcome for the layout design:
After putting in the section. Changes were made to make the section smaller and less in the way. An image was added to the plain gray background that makes the design more welcoming.
What I learnt throughout the process:
Turning image files into vector files using the Image Trace function in Illustrator.
Turning logos transparent by excluding out paths to empty out the desired sections.
Playing around with layouts to see which ones work best with an already available website design.
Difference between responsive width and stretching width to browser for the image background of the layout.
Big corporate companies have rules and regulations on the usage of their logo, copyright infringement etc.
Second task: Integrating a Wordpress HTML into a Muse design.
This video was suggested by the boss on how to integrate a Wordpress blog into a Muse design without developing the HTML.
This is the blog. For this to work, I created a new page in the Muse file, placed all the basics such as the logo and the Menu bar. As simple as the Youtube video has stated, I copied the HTML code:
<div style='width: 900px; height: 800px; overflow: hidden;'>
<iframe style='width: 918px; height: 800px;' src='http://www.chandler-johnson.com/blog-test-site/' frameBorder="0"></iframe>
</div>
but did the necessary changes to the values of the width and height. This helps accommodate the size of the blog that will be displayed on the actual website.
Trying out different blog header images (illustrations or photos) before deciding on the one that fits the website.
There is a slider effect that allows the blog to be 'eaten up' slightly while scrolling the web page. Courtesy of the HTML code.
This is the layout of an article in the blog.
Third task: Doing the same thing but with a Careers page (think Jobstreet)
This is the content of a job description.
What I learnt throughout this process:
HTML codes can be made to simplify a lot of things, such as integrating two different platforms.
A design needs to blend and fit in with the others for harmony and synchronisation.
All buttons need to be linked accordingly in order for the Muse website designs to work together.
Fourth task: Creating a new page in the website
This task has a few sub-sections.
Sec 1: Creating a header/slide show consisting of 4 images.
Firstly, searching for suitable images to be put up on the website. Secondly, trying out different variations and combos of images to see which fits in with the tag lines more.
*I also tried doing photo-manipulation by combining two different images together.
Combos:
Finally, these 4 images were chosen. They were screened with a black path with lowered opacity so the tag lines would be readable.
Before creating the slide show in Muse, I also had to create a new button for the page. The new button would be fixed on the Menu bar and also on top of the slide show.
Menu button that links visitors to this web page.
Slide show button that opens up a registration form.
Finally, placing all the images into the Slide show Widget in Muse. The tag lines were then properly designed to match the homepage of the website. Shadow effect was added to give the texts depth and contrast to the image background.
How the registration form looks like:
What I learnt:
Choosing suitable images and making them work together on a website slide show.
Photo-manipulation using Photoshop.
Contrast is important so that the information stands out from a colourful background.
Adjusting text sizes to show emphasis.
Leading between lines of texts reduces the stress on reader's eyes. It also projects a clean block of text.
Button placing is important in order to catch the visitor's eyes.
Sec 2: Creating a counter
I downloaded a widget that enables us to customise the font type and size. The counter is placed directly below the slide show.
This is the counter widget. It starts counting from 0, all the way to the set number.
However, the counter does not go up to 1 million. Instead, it was replaced with a simple text box.
Different layouts were tested before settling for the one that looks best.
1: gray rectangle background that gives the counter its own little section.
2: gray rounded corners rectangle for the counter. Different tag line was also used.
3: blue rounded corners rectangle for the counter with shadow effect.
4: same as 3, but with a smaller font size.
5: white text on top of the slide show, bottom-right corner.
6: white text, emphasis on the counter and aligned with the "Join Pilot" button.
7: gray rectangle section with a darker shade of gray for the counter.
8: an underline for the counter.
9: 3 counters were designed, with their titles below the counter on a blue rectangle section.
10: same as 9, replacing the '1000000' with '1 million' instead. This was the final choice.
What I learnt:
Learning how to adjust the counter widget, such as transition duration, easing style and start position.
Positioning and placement of elements.
Design needs to be in harmony with its surrounding elements.
Experimenting is always the best way to go.
Sec 3: Highlight features of their newly developing app
A breakdown on what is supposed to be done: research on icon design, get inspiration from Internet, create icons using Illustrator and then place the designs onto Muse.
The icons needed are: Books, Earth, Scroll, Envelope, Binoculars and Tag. These are the variations that I came up with.
After selecting a few icons, I made combos to further narrow down the choices.
These are the ones that were chosen.
A few combinations.
Below are the icons individually before and after fine-tuning.
After double-checking the icons, I proceed to put them in Muse. There were a few layout designs before deciding on a final one.
1: Evenly spaced icons and text on the right of the icons. No borders on plain white background.
2: More space was placed between icons, text placed at the bottom of the icons inside a light gray box.
3: Evenly large spaces placed between icons, with lines separating them into segments for an even and uniformed design on plain white background.
4: Icons and text placed inside a box with different colour backgrounds. The boxes width are widen for a comfortable and spacious design. Shadow effect was added.
5: Same as 3 but without the lines.
6: The boxes around the text were given more width than height. Shadow effect was added.
7: gray background, icons and text separated into 2 different sections with a white circle and a gray rectangle respectively, shadow effect.
8: similar to 7 but the spacing between icons were reduced and evened.
9: same as 8 but with a white background.
10: removed all the other elements, leaving the icons and text on a white background.
This is the final choice for the layout design.
What I learnt:
Using the Strokes menu in Illustrator to turn normal paths into rounded-end paths.
Aligning the layout design in Muse with precise boxes and grid, it makes editing later easier.
Icons need to have a fixed height, to show unity. The width can be adjusted.
Varying thickness in lines allows an icon design to be creative and interesting.
Trial and error.
Sec 4: Benefits of beta-testing their app
This is a similar task to the one above. Icon design process is similar: Research-->Sketch-->Choose-->Fine-tuning
Icons needed(6): Earth, Smart-phone, Language Translation, Gears, Notebook, and Highlight
After selecting the icons, I fine-tune them.
These are the icons chosen.
Before and after fine-tune:
After the icons are completed, they are transferred to Muse for design on the web page. Before that I sketched out the possible layout designs with pencil and paper.
A few variations for the layout design:
1: round layout with the icons placed around a smart-phone image evenly inside circles(with shadow effect) on a white background.
2: same as 1 but without the circles.
3: the icons are placed on the top & bottom of the circle layout, the dotted line gets a change of colour.
4: icons placed in white rounded rectangles while the other elements are placed on a light gray background. the title is on top of a blue bar stretched to browser width.
5: same with 4, but the title is now on top of the light gray background instead of having its own segment.
6: icons and text on a white background, the title is on top of a light gray bar stretched to browser width.
7: same as 6 but the title is now on the white background.
This is the final choice for the layout design.
What I learnt:
Spacing between icons is crucial to the look and feel of the overall design.
White background is advisable for computer screens, case in point a white background website looks clean and well-structured. (Case by case)
Icons have to be able to communicate with the viewers without too much text support. Simple is best.
Export files in Illustrator gives a bigger and more crisp image file.
Shadows should be used in discretion.
Sec 5: Illustration (Character Design)
Character illustration for a small section on the web page, for accentuating their 'aim'. The goal of the characters is to invoke a sense of familiarity with the youths. It also makes the webpage more attractive and interesting.
Before getting the characters design down, I researched on possible and similar characters, trying out different kinds of art style.
Warm up sketches to get the hang of the art-style.
This style is inspired from the animated cartoon Adventure Time. Noodle-like arms, bubble eyes, no nose, mouth close to the eyes.
Experimenting with different art-styles, cute vs realistic.
Gave the realistic version a go. Details were given to the hair and clothes.
Tried out a cuter version, but less bubbly.
Combined the cute and realistic art-style. The character designs are more rounded at the edges.
Details are still given to hair and clothes.
Cute version with a drastic change in character design, rounded and bubbly.
Tried out the Japanese animation style. The character design is more dramatic and more flair was added to the overall design. (hair, clothes, eyes, pose etc)
Japanese animation style, half-torso. Details given to hair and clothes.
Adults vs Teenagers character designs. Combination of Western and Japanese animation style.
After deciding on the chosen 8 characters, I transfer them to Illustrator and start to draw them digitally. Using the pen tool, I trace the sketch and gave the lines varying thickness using the Strokes > Profile option.
Comparison: With and Without Line Variation
Completed line-art:
This last one did not make it into the finals.
After the line-art is complete, I proceed to put in the base colours for the characters. At first, I used the Pen tool to create paths inside the line-art. This process took hours and it's not as efficient. My senior suggested me the Live Paint Bucket tool, which turns grouped paths into fill-able sections. It makes filling the line-art with base colour easier.
Deciding on the hair and eyes colour.
The 'face' of the webpage. Spotlight character designs. Idea behind the design: Techno-Pop Idol feel, energetic and bright, active and cheerful. The colours on their outfits match the website.
Adults/Professionals in the working world. Idea behind the design: professionals, smart-looking, composed and stylish. The colours on their outfit matches the website.
Adventurous teenagers. Idea behind the design: adventurous and daring, brave souls ready to take on the world, strong at heart, inspired teenagers.
Teenagers looking at phones. Idea behind the design: simple and casual outfits, your average teens, simple accessories and cultural reference.
After the base colours are all added in, I gave them simple cel shading and hair highlights.
Light source for shading.
The character designs individually: (ethnicity/race set by me)
Chinese mixed.
Chinese mixed.
Asian.
White.
Malay.
Changed the male character's skin and eyes colour.
Indian.
Changed the female character's hair and eyes colour.
Red head European.
Blonde European.
After the character designs are completely shaded and highlighted, I placed them into Muse for the layout design.
1: varying angles of lines and 2 different colours on the layout design to show depth for the character designs.
2: windowed layout with 2 colours to show depth for the character designs.
3: Title is placed in its own segment separated by a light gray rectangle stretched to browser width, other elements are placed on a white background.
4: both the title and content are placed in a light gray rectangle segment.
5: similar to 4 but with the segment removed, all elements are on a white background.
How all of the characters look together with different layout designs:
Content on a separated segment.
Light gray was placed behind characters to separate this layout into 3 sections.
Each card is separated with a thin blue line.
Title and content are in the same segment.
Content segment is moved up, no longer placed as a footer element.
After deciding that the whole layout makes the webpage unnecessarily long, the layout was then changed to a slide show, where the 'cards' will rotate on auto.
Targets shaped like round buttons are placed on the bottom of the design to show the number of 'cards' in the slide show.
Two segments separates the title and the content, leaving a bit of white space to show depth.
The segment for the content is removed.
The content segment is removed, the targets also change states depending on which slide is showing.
Similar to the one above, but the content text is moved up in the design.
This is the final choice for the layout design.
What I learnt:
Strokes > Profiles give the lines interesting stroke variations.
Live Paint Bucket tool
Character design that is relevant to the subject matter but still retain its individuality. Giving it a relate-able colour scheme without going too far.
Layout design that makes the characters 'pop out' slightly by using a colour background against a white background.
Adjusting font size and choosing font colours suitable to the overall design.
How 'states' work for widgets (targets) compared to normal buttons.
I also learnt about web page breaking points in Muse, where the web page design breaks off if reached a certain size for display. For this website the maximum and minimum breaking points were 1200 pts and 619 pts respectively. Case in point:
The Menu bar on top has become useless, and the text on the slideshow is out of place.
The content is all mashed up together, rendering everything incoherent.
Same goes for this layout design.
The slideshow with the characters could not even fit in, and the text is unreadable.
Solution: I realised that we're supposed to create two different web page layout design for two different breaking points. The content on one breaking point would still be visible in the other breaking point, which means the size of the icons, font size etc cannot be changed unless you want everything to be re-sized two times smaller. (even in a 100% display) However, it is possible to 'Hide Content in Breaking Point'. That means content from max. BP will not be shown when we're designing for the min. BP.
Menu bar has been switched for the compact, drop-down version.
Content is properly placed.
The layout design was changed for this part.
The slideshow is now visible.
Other tasks: Little bits I tried helping out my co-workers.
Avatar design. The male features are the base, spectacles, exclamation point, suit collar and pen in pocket were added for variation.
Adding shadow under the Search icon in Illustrator. Initially I used the Blur effect, but it resulted in pixelated shadow as seen below.
My senior suggested copy-pasting the round path of the icon, changing its colour and opacity for a crisp shadow.
Finally, the shadow is placed at an estimated 75' angle behind the icon.
I learnt to properly work with layered paths.
Using Photoshop, I changed the colour of the title using the Magic Wand tool and selecting the pixels in the image, then going to Image > Adjustment > Hue/Saturation to change the colour.
Other Muse Stuffs:
When using widgets, always uncheck "Edit Together" so the changes do not apply to all sections.
Helpful function of scaling elements proportionately.
To add image to a certain dimension, first draw the path then go to Fill > Image.
Hyperlink helps link all the pages in Muse together, it can be used for buttons, images, texts etc.
Object > Insert HTML
Other AI Stuffs:
Image Trace > Low Fidelity Photo (for logos) > Expand.
Drag and drop images from folders directly to the art board.
