Viewing entries in
Apprentice

10 Tips for Building Wireframes

10 Tips for Building Wireframes

I have been learning to create low and high fidelity wireframes for both mobile and web devices. There are a variety of different tools you can use to create these wireframes like Illustrator, Photoshop and Sketch ( only available on Mac ). I have been using Sketch 3 to wireframe as its a simple combination of both illustrator and photoshop. 

More and more designers are using vectors for wire framing. The following tips will help you make the most of your wire framing experience. 

Wire framing is about working rapidly and iterating quickly. The aim is not to create attractive interfaces; your number one priority is to design information and experience. 

Below are 10 tips that i believe to be important when designing wire frames. 

1.  Start Sketching

Sketch them first with pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on sketches if they're for user tests). 

2. Go Monochrome

Wireframes make clear the hierarchy on a web page; they visually demonstrate the order in which users should process the available information. If you want users to process the headline before hitting the "buy now" button, the headline needs to "trump" the button by demanding more attention.

This visual hierarchy can be defined in a number of ways. We could use size to make the headline more impactful, we could use positioning (by placing it before the button). We could use colour, contrast and a range of other things, but doing so in a wireframe only makes things more confusing.

By removing colour from the equation, the visual relationship defined by position, size and (if you want to go the extra step) contrast, is much cleaner.

We're not building pretty, pixel perfect UI kits here. Stick to a limited range of greys, then use color just for labels and notes. 

3. Don't forget the goals of the page 

Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organise the information into hierarchy that serves the goal of the page. 

4. Pick Your End Point

Prior to commencement, work out who will be consuming the wireframes, how they'll consume and what what level of fidelity is required. Remember that theres a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you think they look perfect designers may feel inhibited and merely "colour in" the wireframes, preventing the design process from really getting going. 

5. Keep the rest of the team informed

Wire frames are not just for the client. All members of the web team should provide feedback on them, buying into the process at an early stage.

syd-creative-team.jpg

6. Use common elements

When designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you're creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency. 

7. Consider the content

If your wireframe aren't sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links and navigation. If practical use accurate sized fonts, images and consider what will happen when more text then ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required. 

8. Draw on your experience

You do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.

9. Keep it clean

If a particular page requires two text boxes and a button then it should have just that, no more, no less.

10. Get feedback 

I have learnt not to be afraid to test your wireframes with a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of the certain elements is. 

 

 

 

 

 

 

 

 

 

 

 

 

 

Team Treehouse

Team Treehouse

A key part of my structured training, has been to learn the fundamentals of web design - encompassing HTML & CSS.  And to learn this, I've been using Treehouse.

Treehouse, a leading online education provider,  seeks to help prospective coders become great coders by providing a rich library of over 600+ videos organised into specific learning tracks, along with interactive quizzes and code challenges. Treehouse provides deep and high quality training in HTML, CSS, Javascript, User Experience, as well as Back-End development in Ruby, PHP, iPhone and Android applications.

I have found it a truly enjoyable experience learning on Treehouse; its simple, effective, and offers so much for the learner to get to grips with. 

Along the journey you get to create projects that help you to understand the process. The first thing I created was a single page website for a bakery company called "Smells like Bakin". It took you through all the coding and then they give you a quiz at the end of each little section to make sure you understand what they've been teaching. Then, after that, there's a code challenge where they ask you to code yourself what they have taught you, via the online code editor, to start creating your web page. 

Screen Shot 2014-02-28 at 13.12.51.png

So this was the first project I built through Treehouse, which covered all the basics in HTML and CSS. 

The next stage works on other basics including tables, charts, links, text, lists, objects and forms, again at the end of each of these you have to take a quiz and a code quiz to show you have grasped the fundamentals, I find it really easy to learn from this and has helped a lot in giving me some foundational knowledge of how websites are made and the challenges we face when designing and building for the web. 

The next module will be learning more advanced HTML and CSS that I will be able to add to the Project to make the website more dynamic and engaging. 

 

New Tools | Optimizely

New Tools | Optimizely

So I have recently been introduced to Optimizely.com. Its a fantastic A/B testing site that is super simple to use. 

Optimizely makes website optimization software for companies. The Optimizely platform technology provides businesses the ability to conduct A/B testing, Multipage, and Multivariate testing allowing them to make better data-driven decisions.

 

 

It's very simple, you take your web page URL and input it into the box. Optimizely will pull through all your information from your website and bring it into a window where you can then add, edit, and change HTML, CSS and inject javascript. 

 

Its a very intuitive tool to use to create variations of experiments to try on your web page to try and increase various things such as clicks and sign ups etc. 

Screen Shot 2014-03-07 at 14.25.02.png

Once the page loads up, you get the options for changing, editing and adding HTML to the page so you can create variations of experiments to test out on the website. Once submitted you can then track how both compare to one another. 

 

As you can see from the image it is very simple to add HTML to the site where you can style new elements via CSS, in this case in our Header where I've just added a new <h2> element. The Options are endless to what you can do with Optimizely, you can create any amount on variations of your webpage to submit. 

Screen Shot 2014-03-07 at 15.03.25.png

I look forward getting to grips with Optimizely properly in the near future for various projects, as it's a very simple tool to use which could make the difference of new users signing up to our site or more people clicking links.

@steve: Tools like this are very powerful, when used correctly. Firstly, for most companies, the job of split testing design treatments, styles, messages and communication should not have to go into the development team to implement, where possible - marketeers, product owners, whoever it is responsible for optimising the site against the companies key metrics should not have a technical constraint to be able to make this part of their every day job.

The second thing is to remember, that split testing and optimising sites is just one aspect of the funnel. You need traffic first, so address this with your SEO strategy, social media, PR and other forms of organic traffic sourcing. If you’ve got even a small amount of budget, then Facebook or Google Ads targeting your market segment would be a good way to ensure your AB tests have a predictable sample set of fresh eyes to properly extract insights from your experiments.






Jimmy's Iced Coffee

Jimmy's Iced Coffee

I love to celebrate innovative, fresh business ideas - especially where technology is used to scale, distribute and optimise the customer experience. In particular, I'm very keen to support local businesses, in Poole, Bournemouth and the wider Dorset area and show the world that this part of the UK Countryside can mix it with the big boys.

So, I sent Ben to meet Jim Cregan, founder of Jimmy's Iced Coffee - based in Christchurch, Dorset.

IN THE BEGINNING || Jimmy's Iced Coffee

jimmys logo.jpeg

SO, LIVING HERE ON THE SOUTH COAST OF THE UK, I GET TO MEET SOME FASCINATING AND INTERESTING PEOPLE WHO HAVE SOME FANTASTIC STORIES TO TELL. ONE OF THEM BEING LOCAL SURFER JIM CREGAN.

Jim Cregan, a Dorset lad who spent his childhood growing up along the coast, watching and surfing the english channel most of his life and becoming quite a well known character in and around the area.

However Jim, like most of us Brits at some stage or another, had enough of our poor winter climate so decided to jet off to the other side of the world where he and his lovely lady Sophie would travel around Oz for a year. They bought a truck, converted it into their new home on wheels and hit the road. Magic. Loaded with boards, camping kit, stoves, music, wood and fire in their hearts they made it down to their favourite place in the world, Tasmania.

Alongside the wonders of the land, sea and adventures was a craze. The craze, "Iced Coffee". Jim fell in love with the stuff, consuming it when ever he could, after surf, while driving, as a hangover cure and for a lot of other occasions. He realised this epic product didn’t exist in the UK so he began contacting the Iced Coffee Companies in reach that he could franchise it. (although saying that, he had no idea what franchising meant).

After their mission and returning back to the UK to nothing but sweet and sickly iced coffee, he decided enough was enough. Jim persuaded his older sister Suzie, an endurance motorbike riding, charity fund raising legend and cafe owner to take part in the escapade to bring proper Iced Coffee to the UK. They both used her award winning cafe as a late-night laboratory, concocting all types of brews under the Iced Coffee umbrella until they found the right flavour.

jim cregan.jpg

Since the first lab session on that cold November morning in 2010, they have created Jimmy’s Iced coffee which you can now find and enjoy today. They sold their first carton in Selfridges London on April 7th 2011 and now have listings with Waitrose, Ocado, Welcome Break petrol stations, Budgens, WHSmith and a heap of wonderful cafes and delis across the UK.

I was lucky enough to get in contact with Jimmy himself about sponsoring me for my Longboarding and other activities that I get up too. I sent him over a couple of images, and Videos of myself and mates skating and he was quickly on side to provide us with a bunch of stickers, and a few crates of coffee for races and general riding.

thefamily.jpg

                                                                                  www.jimmysicedcoffee.com

Since then we have stayed in contact via social media and he’s a sucker for a good sunrise picture, so I occasionally drop him a photo of the sunrise in Poole harbour for his social media pages.

On Friday 31st I had arranged to take a trip over to the factory in Christchurch to catch up with Jim and to collect some more Iced Coffee for the up and coming races. The weather on this day was start of another storm on the way to the UK, heavy rain, strong winds, and traffic. I made my way over there and arrived at Jimmy's office and was greeted by his assistant (sorry can’t remember her name) she was busy doing accounts.

Jim got off the phone and we chatted about what I was now up to, where I was working, my longboarding, surfing etc.. We then got onto the subject of the company, and the next big step for them is to start shipping abroad.  He met a guy, who has sorted him out a container to ship in oversea’s. He has already shipped out to South Africa where the people there can buy his product.

As soon as the weather starts getting better, the plan is to head over to Christchurch and Mudeford where Jimmys is based and start filming some mini longboard edits and to get jimmy involved skating hopefully in his jimmy's iced coffee carton. RAD!

It was only a quick catch up as he was waiting for Dorchester Council to turn up for a meeting.

So, keep an eye out for his products on your local super market shelf, take a photo and tag @jimmysicedcoffee or #jimmysicedcoffee. He’ll appreciate it.

 

Schoey

 

The Build | Websters Wheelchairs

The Build | Websters Wheelchairs

Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

Following on from designing and building a brief for Websters, it is time to get stuck in and build the code.

It used to be that much of the design process was conducted with static graphic designs, produced in photoshop or fireworks - finally being handed off from the “web designer” to the “web developer” to convert the static designs into valid html and css.

Today is different. I’m a strong believer that there is no difference between a graphic designer and web developer when it comes to implementing front end web designs. Designers have to code, coders have to design.

So, the sooner we get into code, the better - particularly when you consider other challenges front end developers face, particularly when developing websites that will work effectively across the myriad of devices and display sizes that we now have to work with. It’s much easier to work this out in code, that creating dozens of iterations in static graphic format.

We’ll get into some of the tools available to make this easier in the development stage - where we can build on popular design patterns for responsive websites.

So, in summary: Designers need to code, as early as possible in the design phase.

I have chosen to build this holding page, as I feel it has a really soft and modern design to it and follows today's trends within web design. 

I opened up Sublime text and created a new document where I will write my code. Secondly, I created a Websters folder in which I would store all the images and files I would need to build the page. 

Since it was a while ago that I last wrote some code, I felt I needed a refresh, so I went back onto the Lynda.com training course which I completed just under 2 months ago. This helped me to refresh on the basics, after which, I got on with coding the basics of the holding page. 

This is the HTML markup - which provides us with a structure of content for the page. After speaking to Steve, What I would like to do with the page requires quite a bit of Jquery and JavaScript which he is going to go through with me at some point. As It is only a single page, I haven't created a style sheet to attach to the page as I will be simply be able to edit and format the text etc in HTML. ( I hope). 

The next stage is to add CSS to the text and get it formatted "centrally". 




So, I have managed to figure out how to format that text to how I wanted it, it's not yet the correct fonts, but it is in the right place. which I'm happy with. The next stage is to add the background and effects to the photo via Photoshop, to give it the soft translucent feel to it which will be very eye catching and effective. 

 

Monday 3rd February: 

So today, I have been researching non standard web fonts and how to Code and implement them into my design to get the style and look I'm after. It has taken me a while to get my head around how to do it, looking at various forums such as http://stackoverflow.com/questions/7717734/using-non-standard-font-in-web-pages. 

Reading through articles and googling questions on how to code NSF into HTML and CSS, using the font-face attribute to stylise the font-family. I then visited the font-face website (http://www.font-face.com/) where I followed their simple instructions, and it just clicked. So I have now changed the standard web font to something more appealing to the eye, however I am going to change the font on the paragraph as I feel it is a little difficult to read But I do like how it looks on the "Coming Soon" heading. 

Below is the css I used to implement the non-standard font:

@font-face {

    font-family: pistara;

    src: http://www.dafont.com/pistara.font?text=Coming+Soon;

    font-weight:400;}

        h1 { 

             font-family: pistara;

            font-size: 40px;

            margin-top: 200px;

            text-align: center;}

I have come across a problem. Before I figured out to code non  standard fonts, I had worked out how to set an background-image using CSS however, when I input the code for the @fontface within the style, it erased my background image and turned the background white again, I have been trying to find why this has happened but have had no success yet. 

The next step is to work on the background image again and really get it looking to what I had hoped for. 

Today, I have been researching background images and have managed to go get the background to display correctly in the window, however now it is hiding all my text. I don't know if it is the way in which Im putting the code in order or wether it is something else, I have been moving it around but nothing seems to work. 

I have been lookingat trying two different techniques to implement my background image, the easiest way in which to do it I found was by:

Websters'

 #bg {

            position: fixed;

            top: 0;

            left: 0;

            /* preserve aspet ratio */

            min-width: 100%;

            min-height: 100%;}

here is a link which I used to help me solve the problem: http://css-tricks.com/perfect-full-page-background-image/

Try using Google Web fonts again.

If you add a font to your collection, you can do the following:

1. Add the stylesheet to your web page via a normal tag that you are used to. e.g.
’ < link href=’http://fonts.googleapis.com/css?family=Hammersmith+One’ rel=’stylesheet’ type=’text/css’ >’

You can copy and paste this from the google fonts library. As it says, make sure you paste it above your other stylesheets (order is important)

2. Use the correct “font-family” name in your CSS

font-family: ‘Hammersmith One’, sans-serif;

This will call the Hammersmith One font, and then fall back to browser default sans-serif font for unsupported browsers.

 

 

Ben's Journey || First 6 Weeks at Beach.io

Ben's Journey || First 6 Weeks at Beach.io

Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

So on December 1st 2013, I quit my job within retail to start an "Apprenticeship"  with my eldest brother,  Steve at Beach (formerly Double Digital).

A long road ahead - learning, creativity, tea and coffee making and more learning. Where my brother is today, 3 years on after leaving his full time job, having increased his wealth of knowledge within the technical side of web design, creating, building, consulting and coding, and where he is today, is where I would like to hopefully be in the next 3 years. 

This meant I was going to have to throw everything at this, if I wanted to succeed and to prove to  Steve that I am able to make it profitable to have me working for him, I would have to load my brain with the necessary  tools that he uses to do his job and to do it well. 

 

Project Administration

So, first things first, Steve handed me the responsibility of his admin duties, uploading data from his project expense reports into the billing service which Freeagent offers. I have found Freeagent to be a fantastic program to follow the progress of our developers, most of which work overseas; its an easy way to log their work hours, and to keep a record of outgoing expenses and bills to clients. Social media plays a huge part of Beach, so using Hootsuite, which is a great program to have when you have multiple social media pages for various logins, which you can control all from page, so uploading relevant topics about social media, digital media to the Double Digital (@steve: Double Digital is in the process of being rebranded as Beach.io, references to both maybe used interchangeably) Facebook, twitter, etc, I found that I could kill too much time looking for a topic to use, so I needed to cut down on time spent looking through blog pages and websites to find sourceable information. 

@steve: distraction is a productivity killer. You need to be very disciplined, especially when doing research for social media or a project. The web is there to suck you in. Maintain a focus on your objectives and stick to strict time allocation for each task.

 

A few Programs I am using a lot are Elance, Odesk, Transparent business, Hubstaff and Freeagent. The first three are which we use for our developers so they can record their timesheets for us to see, to make sure that they are working their hours, on track with project deliverables and so we don;t have to keep interrupting them with constant status updates. They're very simple programs to follow, as it gives you the week and their total hours worked, which you can then go into a single day to see the daily hours where i need to then input that into Freeagent. I use Freeagent to input their timesheets so that when he need’s to, Steve can pay them. The only problem that I found, is when you click onto the developers work that they have been doing, its hard to see what the topic is, as i need to put a task into Elance, it can make it hard, so hopefully now the developers will start labelling their work to make it easier for us to see what task there on. 

@steve: Great point Ben. I need to ensure that there is a balance between accuracy of the data captured and balanced to ensure that it’s not getting in the way of the developers. It was easier when I was doing the admin work myself as I generally know what’s being worked on, but this isn’t scaleable and so more diligence in stating current Job Number, Job Title and Task in time tracking reports is necessary. I’ll raise this with the team.

 

Web Design Basics

Steve set me up with his Lynda.com Training site, This is a fantastic site to learn anything on the computer, my first training course was the HTML essential training course, this showed and taught you the basics of coding a website from scratch, It made sense to me that while learning how to code and build a basic website I may as well build something in which I could use in the future. Within this I found it’s very simple to make a mistake, in which it could cause the whole website not to work, so it was important to make sure you had all the correct coding in place, for example:

<h1 class="LR-site-title" style="display: none;">SILICON BEACH Labs</h1> <!-- This is correct. -->
<h1 class="LR-site-title" style="display: none;">SILICON BEACH Labs<h1> <!-- This is not correct. -->

In this example I have forgotten to put in the forward slash at the end of the closed tag, this is telling the website that it isn't closed so wouldn't format the heading. This shows it is important to make sure your work is neat, colour coded, and formatted correctly in order for your coding to work correctly.

@steve: Colour coding will be done automatically via your text editor, such as Sublime Text, which you are using. But, paying attention to the colour coding patterns will help you identify issues in your code. Formatting your html is also very important, particularly in static sites where you may end up with lots of html code in a single document, making it hard to read. A nice article here

 

From this HTML course I moved onto Essential CSS training, which I was looking forward to as design, art and graphics are what I enjoy most. To be able to learn how to format and design my page into how I would like it to look was very interesting and meant I was able to play around with photoshop, illustrator, and After effects.

 

Throughout the learning of html they kept referring to a “stylesheet” which they had not explained and I didn't know why I didn't have a stylesheet - this confused me. I then learnt that while building your html you start to build up a stylesheet in which you can use to make formatting your pages similar otherwise you would have to go through every page of your site and format the coding, whereas if you have a stylesheet it will make all the headings the same, the paragraphs the same, etc etc. 

So for example: 

class.mega-title h1 {
padding: 0;
margin: 0;
font-size: 40px;
font-weight: normal;
font-style: normal;}

@steve: can you amend your above example to valid CSS please. Check class selector . notation and remember to close it properly.

This is just some example of formatting in CSS, this says that all H1’s should look like this, which you can easily go into padding or font-size and change the value off.

Marketing Essentials

I have also briefly been looking online marketing essentials on Lynda.com, The marketing funnel is a consumer focused marketing model which illustrates the theoretical customer journey towards the purchase of a product or service. 

 This an example of the Nutribu funnel that I created this to show how many installs, register, and profiles are being generated through our app, out of screen is a table to show figures. I will be looking creating some Facebook and Google ads as well as some A/B testing.&nbsp;  A/B testing is where you send out either 2 of the same emails, newsletters, or something similar but you may only change one factor, that could be a “Click here” button to a “Press Here” button or “Sign up now” to a “create profile” button, you would then send the two out to your client base and see what gets a better response.  I am currently still working through the course for essential online marketing tools, and will come back to add more about this in the near future.&nbsp;     GRAPHIC DESIGN FUNDAMENTALS  My favourite thing to be doing is being creative, whether that's with a pen and paper, or painting, so I really wanted to get to grips with Illustrator, Photoshop and After Effects, so once again I found myself back on the Lynda.com website on each other essential learning courses, taking notes where I thought was appropriate to help me learn. I have past experience with Photoshop, I dabble with it now and again on my Ipad, and computer but never have I got looked fully in depth with the program, I look forward to continue to grow and expand my knowledge of these 3 programs to help me progress in my career, creating me more work opportunities in the near future. The most difficult thing I find at the moment within Illustrator is when drawing paths, I find it difficult to remember where the anchor points should be, and and which direction to drag them to create a curved line.&nbsp;  Overall, the last 6 weeks has been a real eye opener for me, I am thoroughly enjoying the learning and find it very mind stimulating, However I will look forward to some extra work from either Sergio or Nuno, which will increase my wages.&nbsp;

This an example of the Nutribu funnel that I created this to show how many installs, register, and profiles are being generated through our app, out of screen is a table to show figures. I will be looking creating some Facebook and Google ads as well as some A/B testing. 

A/B testing is where you send out either 2 of the same emails, newsletters, or something similar but you may only change one factor, that could be a “Click here” button to a “Press Here” button or “Sign up now” to a “create profile” button, you would then send the two out to your client base and see what gets a better response.

I am currently still working through the course for essential online marketing tools, and will come back to add more about this in the near future. 

 

GRAPHIC DESIGN FUNDAMENTALS

My favourite thing to be doing is being creative, whether that's with a pen and paper, or painting, so I really wanted to get to grips with Illustrator, Photoshop and After Effects, so once again I found myself back on the Lynda.com website on each other essential learning courses, taking notes where I thought was appropriate to help me learn. I have past experience with Photoshop, I dabble with it now and again on my Ipad, and computer but never have I got looked fully in depth with the program, I look forward to continue to grow and expand my knowledge of these 3 programs to help me progress in my career, creating me more work opportunities in the near future. The most difficult thing I find at the moment within Illustrator is when drawing paths, I find it difficult to remember where the anchor points should be, and and which direction to drag them to create a curved line. 

Overall, the last 6 weeks has been a real eye opener for me, I am thoroughly enjoying the learning and find it very mind stimulating, However I will look forward to some extra work from either Sergio or Nuno, which will increase my wages.